Basscss / Docs / Modules

Base Typography

 

basscss-base-typography v0.0.3

Base Typography

Base type scale

Typographic elements are normalized to a simple type scale that works well across devices. Default top and bottom margins are set for commonly-used typographic elements.

Hamburger 1

Hamburger 2

Hamburger 3

Hamburger 4

Hamburger 5
Hamburger 6
<h1>Hamburger 1</h1>
<h2>Hamburger 2</h2>
<h3>Hamburger 3</h3>
<h4>Hamburger 4</h4>
<h5>Hamburger 5</h5>
<h6>Hamburger 6</h6>

Type scale utilities

The .h1.h6 font-size utilities can be used to override an element’s default size.

Pastrami 1

Pastrami 2

Pastrami 3

Pastrami 4

Pastrami 5

Pastrami 6

<p class="h1">Pastrami 1</p>
<p class="h2">Pastrami 2</p>
<p class="h3">Pastrami 3</p>
<p class="h4">Pastrami 4</p>
<p class="h5">Pastrami 5</p>
<p class="h6">Pastrami 6</p>

Lists

By default, lists have bullets or numbers and padding left.

  • Half-Smoke
  • Kielbasa
  • Bologna
  1. Prosciutto
  2. Andouille
  3. Bratwurst
  4. Chorizo
<ul>
  <li>Half-Smoke</li>
  <li>Kielbasa</li>
  <li>Bologna</li>
</ul>
<ol>
  <li>Prosciutto</li>
  <li>Andouille</li>
  <li>Bratwurst</li>
  <li>Chorizo</li>
</ol>

To remove default list styling, use .list-reset.

  • List Reset
  • Removes bullets
  • Removes numbers
  • Removes padding
<ul class="list-reset">
  <li>List Reset</li>
  <li>Removes bullets</li>
  <li>Removes numbers</li>
  <li>Removes padding</li>
</ul>

To set lists inline, use utilities.

  • Half-Smoke
  • Kielbasa
  • Bologna
  • Prosciutto
<ul class="list-reset">
  <li class="inline-block mr1">Half-Smoke</li>
  <li class="inline-block mr1">Kielbasa</li>
  <li class="inline-block mr1">Bologna</li>
  <li class="inline-block mr1">Prosciutto</li>
</ul>