Default Button

SCSS: sass/modules/_buttons.scss

<button class="btn">Button</button>
<a href="#" class="btn">Link Button</a>

Ghost Button

SCSS: sass/modules/_buttons.scss

<a href="#" class="btn btn-primary-ghost">Primary Ghost</a>
<a href="#" class="btn btn-secondary-ghost">Secondary Ghost</a>

Button Styles

SCSS: sass/modules/_buttons.scss

<a href="#" class="btn btn-primary">Primary Button</a>
<a href="#" class="btn btn-secondary">Secondary Button</a>

Responsive Images

SCSS: sass/modules/_images.scss

<img src="http://placehold.it/700x350" class="img-responsive js-rhythm">

Default Table

SCSS: sass/modules/_tables.scss

<table class="tbl js-rhythm">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td>John</td>
            <td>Zoidberg</td>
        </tr>
        <tr>
            <th>2</th>
            <td>Amy</td>
            <td>Wong</td>
        </tr>
        <tr>
            <th>3</th>
            <td>Bender</td>
            <td>Rodriguez</td>
        </tr>
    </tbody>
</table>

Striped Table

SCSS: sass/modules/_tables.scss

<table class="tbl tbl-striped js-rhythm">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td>Hubert</td>
            <td>Farnsworth</td>
        </tr>
        <tr>
            <th>2</th>
            <td>Philip</td>
            <td>Fry</td>
        </tr>
        <tr>
            <th>3</th>
            <td>Hermes</td>
            <td>Conrad</td>
        </tr>
    </tbody>
</table>

Abbreviation

Usage: The HTML Abbreviation element represents an abbreviation, and optionally provides a full description for it. If present, the title attribute must contain this full description, and nothing else. (More Info)

SCSS: sass/modules/_typography.scss

<abbr title="Cascading Style Sheets">CSS</abbr>
<abbr title="Hyper Text Markup Language">HTML</abbr>

Blockquote

Usage: The HTML Block Quotation Element indicates that the enclosed text is an extended quotation. (More Info)

SCSS: sass/modules/_typography.scss

<blockquote cite="http://fillerama.io/">
    <p>And I'm his friend Jesus. Stop! Don't shoot fire stick in space canoe! Cause explosive decompression! THE BIG BRAIN AM WINNING AGAIN! I AM THE GREETEST! NOW I AM LEAVING EARTH, FOR NO RAISEN!</p>
    <footer>Quotes from <cite>Futurama</cite></footer>
</blockquote>

Description List

Usage: The HTML Description List Element encloses a list of pairs of terms, and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs). (More Info)

SCSS: sass/modules/_typography.scss

<dl>
    <dt>Insane in the Mainframe</dt>
    <dd>I've got to find a way to escape the horrible ravages of youth.</dd>

    <dt>A Taste of Freedom</dt>
    <dd>I've been there. My folks were always on me to groom myself and wear underpants.</dd>
    <dd>I've taught the toaster to feel love! Goodbye, cruel world.</dd>

    <dt>Lethal Inspection</dt>
    <dd>Fetal stemcells, aren't those controversial? Good news, everyone!</dd>
</dl>

Inline Elements

Usage: Inline HTML5 elements to be used in a paragraph element.

SCSS: sass/modules/_typography.scss

<p><a href="#">This line of text is a link.</a></p>
<p><del>This line of text is deleted.</del></p>
<p><em>This line of text is emphasised.</em></p>
<p><strong>This line of text is strong.</strong></p>
<p><code>This line of text is a code.</code></p>
<p><small>This line of text is small.</small></p>
<p><mark>This line of text is highlighted.</mark></p>
<p><time datetime="2015-10-12 01:23:45">This line of text is a datetime.</time></p>

Modular Scale

Usage: A heading element briefly describes the topic of the section it introduces. <h1> is the most important, and <h6> is the least. (More Info)

SCSS: sass/modules/_typography.scss

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

Ordered List

Usage: The HTML Ordered List Element represents an ordered list of items (numbered). (More Info)

SCSS: sass/modules/_typography.scss

<ol>
    <li><code>Bender</code>, I didn't know you liked cooking. That's so cute.</li>
    <li>Guess again.</li>
    <li>That could be 'my' beautiful soul sitting naked on a couch. If I could just <small>learn to play</small> this stupid thing.</li>
    <li>Wow! A <mark>superpowers drug</mark> you can just rub onto your skin? You'd think it would be something you'd have to freebase.</li>
</ol>

Paragraph

Usage: The HTML Paragraph Element represents a paragraph of text. Paragraphs are block-level elements. (More Info)

SCSS: sass/modules/_typography.scss

<p>Switzerland is small and neutral! We are more like Germany, ambitious and misunderstood! And then the battle's not so bad? With a warning label this big, you know they gotta be fun! Anyhoo, your net-suits will allow you to experience Fry's worm infested bowels as if you were actually wriggling through them. Good news, everyone! I've taught the toaster to feel love! And from now on you're all named Bender Jr.</p>

Thematic Break

Usage: The HTML hr element represents a thematic break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with a section). It is represented as a horizontal rule. (More Info)

SCSS: sass/modules/_typography.scss

<p>Yes, if you make it look like an electrical fire. When you do things right, people won't be sure you've done anything at all. Is the Space Pope reptilian!? No! The cat shelter's on to me. I was all of history's great robot actors - Acting Unit 0.8; Thespomat; David Duchovny!</p>

<hr>

<p>You seem malnourished. Are you suffering from intestinal parasites? Anyone who laughs is a communist! You'll have all the Slurm you can drink when you're partying with Slurms McKenzie! It must be wonderful. For example, if you killed your grandfather, you'd cease to exist!</p>

Unordered List

Usage: The HTML unordered list element represents an unordered list of items, namely a collection of items that do not have a numerical ordering, and their order in the list is meaningless (bullets). (More Info)

SCSS: sass/modules/_typography.scss

<ul>
    <li>A true <em>inspiration</em> for the children.</li>
    <li>I usually try to keep my sadness pent up inside where it can fester quietly as a <strong>mental illness</strong>.</li>
    <li>I just want to talk. It has nothing to do with mating. <a href="#">Fry</a>, that <del>doesn't</del> make sense.</li>
</ul>

civil.js

An optional, jQuery plugin is included (dist/civil.js), and it can help restore vertical rhythm for blocks with unpredictable heights, e.g. code blocks, images, and other objects that do not obey the baseline. Below is an example of how you may use it (it is currently being used on this page).

$(window).on("load", function () {
    // Targetting images (with class .js-rhythm), and code blocks
    $(".js-rhythm, .highlight > pre").civil({
        baseline: 30,
        extra: 30
    });
});

The plugin will restore vertical rhythm on the page by adding margin-bottom to offending blocks (compensating). If extra is supplied, it will be added to the compensated margin.

The example above is wrapped in $(window).on("load", fn) to ensure that images are rendered, and that their heights are computed before we determine how much extra margin it needs for vertical rhythm to be established.