Schema comes equipped with Source Sans Pro by Paul D. Hunt. If
is not the font you want to use you can assign new typefaces in the variables.less file.
All html headings h1 through h6 are available for use. You'll also find .h1 through
.h6 to assign a matching style to any element you want.
EXAMPLE
p with a .h3 tag.
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
Add different text sizes to any element by using these classes.
| Example | Class | Description |
|---|---|---|
| 12px | font-xs
| (@base-font-size * 0.75) = 12px / 0.75rem |
| 14px | font-sm |
(@base-font-size * 0.875) = 14px / 0.85rem |
| 16px | (Schema's base size) | @base-font-size = 16px / 1rem |
| 20px | font-lg |
(@base-font-size * 1.25) = 20px / 1.25rem |
| 24px | font-xl |
(@base-font-size * 1.50) = 24px / 1.50rem |
Schema comes with these default font weights.
| Variable | Description |
|---|---|
@weight-300 |
font-weight; 300; |
@weight-400 |
font-weight: 400; |
@weight-700 |
font-weight: 700; |
@weight-800 |
font-weight: 800; |
The default font-size is 1rem (or 16px). Default line-height is 1.3125.
helpers.less have classes to help with text alignment. You'll find text-left, text-right, etc.
<p>…</p>EXAMPLE
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, dolorem, dolor, amet fugiat ad omnis eveniet harum recusandae maxime delectus illo nisi a nostrum modi ex. Nemo sapiente eum soluta?
Illo, iste, pariatur, dicta, consequatur maiores deserunt temporibus doloribus voluptas asperiores sint dolorum deleniti animi mollitia quod ullam fugit a atque inventore facilis ab dolorem magni necessitatibus tempore dolor itaque.
Eligendi, accusantium, inventore alias ab eos explicabo quam temporibus. Quae, error, ea repudiandae praesentium illo distinctio molestiae placeat totam quibusdam cumque veniam animi aut mollitia laborum soluta repellendus deleniti illum?
text-centerLorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, possimus, dignissimos mollitia blanditiis labore optio reiciendis odio iure doloremque quam eveniet doloribus laudantium inventore non atque officiis explicabo perspiciatis nam.
text-rightLorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, architecto fugiat possimus eius vero molestias ab harum nam dolores rerum. Officiis, dolores quam quas molestiae voluptatum ipsum quidem vero repellat.
text-justifiedLorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, provident, ipsum laborum rem natus eveniet? Pariatur, corporis, nemo in ab quos tempore libero dolorem impedit dicta laboriosam! Quam, nemo libero.
You can make a paragraph stand out more by adding the class lead to it.
EXAMPLE
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, ab nisi soluta voluptatum ea exercitationem assumenda minima fugit porro alias asperiores.
<p class="lead">…</p>Looking to use a quote? Wrap any quote with the html tag blockquote or the class .blockquote.
EXAMPLE
Lorem ipsum dolor sit amet, consectetur adipisicing
— Some Cool Person
<blockquote>
<p>…</p>
<cite>…</cite>
</blockquote>