Typography

Headers and Text Sizing

Headers are built using typical html elements h1 - h6. To give ourselves a bit more control, we've created utility classes for applying different sizes to the default elements so that we can control markup hierarchy while still applying the sizes we want visually (.text-0-xs, .text-1-xs, .text-2-xs, .text-3-xs, .text-4-xs, .text-5-xs, .text-6-xs). By default, headers have no margin/padding applied to them and are bold.

h1, .text-0-xs 3.75rem, 60px

Treehouse is an online school that teaches you code

h1, .text-1-xs 3rem, 48px

Treehouse is an online school that teaches you code

h2, .text-2-xs 2.25rem, 36px

Treehouse is an online school that teaches you code

h3, .text-3-xs 1.5rem, 24px

Treehouse is an online school that teaches you code

h4, .text-4-xs 1.25rem, 18px

Treehouse is an online school that teaches you code

h5, .text-5-xs 1rem, 16px
Treehouse is an online school that teaches you code
h6, .text-6-xs 0.875rem, 14px
Treehouse is an online school that teaches you code
p 1rem, 16px

Treehouse is an online school that teaches you code

<h1 class="text-0-xs">Treehouse is an online school that teaches you code</h1>
<p class="text-0-xs">Treehouse is an online school that teaches you code</p>
<h1>Treehouse is an online school that teaches you code</h1>
<p class="text-1-xs">Treehouse is an online school that teaches you code</p>
<h2>Treehouse is an online school that teaches you code</h2>
<p class="text-2-xs">Treehouse is an online school that teaches you code</p>
<h3>Treehouse is an online school that teaches you code</h3>
<p class="text-3-xs">Treehouse is an online school that teaches you code</p>
<h4>Treehouse is an online school that teaches you code</h4>
<p class="text-4-xs">Treehouse is an online school that teaches you code</p>
<h5>Treehouse is an online school that teaches you code</h5>
<p class="text-5-xs">Treehouse is an online school that teaches you code</p>
<h6>Treehouse is an online school that teaches you code</h6>
<p>Treehouse is an online school that teaches you code</p>

.text-6-xs .text-5-sm .text-4-md .text-3-lg Resize your browser to see this text size change. 

<div class="border-mid-xs m-b-3-xs p-1-xs">
<p class="text-6-xs text-5-sm text-4-md text-3-lg">
<span class="inline-block-xs hide-sm">.text-6-xs</span>
<span class="hide-xs hide-md inline-block-sm">.text-5-sm</span>
<span class="hide-xs hide-lg inline-block-md">.text-4-md</span>
<span class="hide-xs inline-block-lg">.text-3-lg</span>
<span class="m-r-1-xs p-r-1-xs border-r-dark-xs"></span>
Resize your browser to see this text size change.
</p>
</div>

Emphasis

Using the following tags will add some emphasis to your text elements

.regular

Treehouse is an online school that teaches you code

<p class="bold"><span class="regular">Treehouse is</span> an online school that teaches you code</p>
strong, .bold

Treehouse is an online school that teaches you code

<p class="bold">Treehouse is an online school that teaches you code</p>
em, .italic

Treehouse is an online school that teaches you code

<p class="italic">Treehouse is an online school that teaches you code</p>
.caps

Treehouse is an online school that teaches you code

<p class="caps">Treehouse is an online school that teaches you code</p>

Text Alignment

Use the following classes to control text alignment in your layouts.

.text-left

Left aligned text

<div class="p-2-xs border-mid-xs">
<p class="text-left-xs">Left aligned text</p>
</div>
.text-right-xs

Right aligned text

<div class="p-2-xs border-mid-xs">
<p class="text-right-xs">Right aligned text</p>
</div>
.text-center-xs

Center aligned text

<div class="p-2-xs border-mid-xs">
<p class="text-center-xs">Center aligned text</p>
</div>
.text-justify-xs

Justified aligned text. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

<div class="p-2-xs border-mid-xs">
<p class="text-justify-xs">Justified aligned text ...</p>
</div>

Lists

Leap comes with basic styles for unordered and ordered lists. You can remove the styling on either of them by using the class, .list-unstyled.

ul
  • List item 1
  • List item 2
  • List item 3
  • List item 4
ol
  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
.list-unstyled
  • List item 1
  • List item 2
  • List item 3
  • List item 4
.list-lined
  • List item 1
  • List item 2
  • List item 3
  • List item 4
<ul>
<li>List item 1</li>
<li>List item 2 </li>
<li>List item 3</li>
<li>List item 4</li>
</ul>

<ol>
<li>List item 1</li>
<li>List item 2 </li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

<ul class="list-unstyled">
<li>List item 1</li>
<li>List item 2 </li>
<li>List item 3</li>
<li>List item 4</li>
</ul>

<ul class="list-lined">
<li>List item 1</li>
<li>List item 2 </li>
<li>List item 3</li>
<li>List item 4</li>
</ul>