Base Reset Base Typography Base Forms Base Buttons Base Tables Utility Layout Utility Typography Utility White Space Utility Responsive States UI Utility Button Sizes UI Utility Groups UI Utility Disclosure States Positions Grid Table Object Color Base Color Forms Color Forms Dark Color Tables Color Buttons Colors Color Borders Flex Object Utility Headings Background Images

# basscss-base-typography v0.0.3

# Base Typography

NPM Github

## 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>