Last updated: Oct 30, 2015

Built on a Modular Scale with thoughtful typographic defaults, Fuselage helps you get your message across more effectively.

Headings

Headings are constructed by default using a modular scale. There are five heading sizes that are built in off the bat.

Output

H1 Sub

H2 Sub

H3 Sub

H4 Sub

H5 Sub
HTML
        <h1>H1 <small>Sub</small></h1>
<h2>H2 <small>Sub</small></h2>
<h3>H3 <small>Sub</small></h3>
<h4>H4 <small>Sub</small></h4>
<h5>H5 <small>Sub</small></h5>

Headline

The .headline class creates a large headline.

Output

Hello.

HTML
        <p class="headline">Hello.</p>

Deck and Byline

The .deck and .byline classes help style articles.

Output

This is a deck, it introduces the article and adds extra awesomeness.

By Some Person

HTML
        <p class="deck">
    This is a deck, it introduces the
    article and adds extra awesomeness.
</p>
<p class="byline">By Some Person</p>

Drop Cap

The .drop-cap class makes it easy to implement drop caps. Add a span around the first phrase, and give it the .initial-phrase class in order to style it in small caps.

Output

Dorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae fugit labore ipsum iste obcaecati delectus reiciendis vel dolorem, aliquam ab perspiciatis quaerat, magni qui est blanditiis? Non, pariatur quaerat omnis!

HTML
        <p class="drop-cap">
    <span class="initial-phrase">Dorem ipsum dolor sit amet,</span> consectetur adipisicing elit.
    Repudiandae fugit labore ipsum iste obcaecati delectus reiciendis
    vel dolorem, aliquam ab perspiciatis quaerat, magni qui est
    blanditiis? Non, pariatur quaerat omnis!
</p>

Lists

These are the default styles for ordered, unordered, and definition lists.

Output
  1. Do this first.
  2. Then this.
    1. Be mindful of this though!
  3. Lastly, do this.
  • Apples
    1. Honeycrisp
  • Avocados
  • Cheese
Splendiferous
Extraordinarily or showily impressive.
That was a splendiferous Sunday dinner.
HTML
        <ol>
    <li>Do this first.</li>
    <li>Then this.
        <ol><li>Be mindful of this though!</li></ol>
    </li>
    <li>Lastly, do this.</li>
</ol>

<ul>
    <li>Apples
        <ol><li>Honeycrisp</li></ol>
    </li>
    <li>Avocados</li>
    <li>Cheese</li>
</ul>

<dl>
    <dt>Splendiferous</dt>
    <dd>Extraordinarily or showily impressive.</dd>
    <dd>That was a splendiferous Sunday dinner.</dd>
</dl>

Blockquotes and Pull Quotes

blockquotes and pull quotes blocks are made easy in Fuselage.

Output

When your arm gets hit, the ball is not going to go where you want it to.

John Madden

For the Present is the point at which time touches eternity.

HTML
        <blockquote>
    <p>When your arm gets hit, the ball is
    not going to go where you want it to.</p>

    <cite>John Madden</cite>
</blockquote>

<p class='pull-quote'>
    For the Present is the point at which time touches eternity.
</p>

Code Snippets

Fuselage has built-in styles for code blocks as well.

Output
        # clone the repository
git clone https://github.com/TeamSkosh/fuselage.git
HTML
<pre><code># clone the repository
git clone https://github.com/TeamSkosh/fuselage.git
</code></pre>

Text Links

Fuselage allows you to use your branding heirarchy on links within your text. Simply use branding color variables to change the color of text links. Also, create your own using the `text-link` mixin

Output

This paragraph displays the control that a user has over text links. Linking is a helpful for curious readers!

HTML
        <p>
    This <a>paragraph</a> displays the
    <a class="secondary-text">control</a> that a user
    <a class="tertiary-text">has over</a> text links.
    <a class="warn-text">Linking</a> is a helpful for
    <a class="success-text">curious readers</a>!
</p>