Buttons

<button class="$colour">...</button>

Clean

<button class="$colour clean">...</button>

Dropdown

<button class="$colour dropdown">
    <span>...</span>
    <ul>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
    </ul>
</button>

Navigation

<nav class="bar $style">
    <ul>
        <!-- Collapse Item (Required) -->
        <li class="collapse"><span><i class="fa fa-bars"></i></span></li>

        <!-- Brand or Logo -->
        <li class="brand"><span>...</span></li>

        <!-- Left Aligned Items -->
        <li><span>...</span>/li>
        <li><a href="#">...</a></li>

        <!-- Dropdown Menu -->
        <li class="dropdown">
            <span>Dropdown</span>
            <ul>
                <li><span>...</span></li>
                <li><a href="#">...</a></li>
            </ul>
        </li>

        <!-- Right Aligned Items -->
        <ul class="right">
            <li><span>...</span>/li>
            <li><a href="#">...</a></li>
        </ul>

        <!-- Inline Forms -->
        <li><input type="$type"></li>
    </ul>
</nav>

Breadcrumbs

<nav class="breadcrumbs">
    <ul>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li class="active">...</li>
    </ul>
</nav>

Pagination

<nav class="pagination">
    <ul>
        <li><a href="#"><i class="fa fa-caret-left"></i></a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#"><i class="fa fa-caret-right"></i></a></li>
    </ul>
</nav>

Banners

Notices

<notice class="$colour">
    ...
</notice>

Alerts

<alert class="$colour">
    ...
</alert>

Panels

<panel class="$colour">
    <div class="head">...</div>
    <div class="body">...</div>
</panel>

Dismissables

<$element class="$colour" id="close">
    <div class="dismiss">×</div>
    ...
</$element>

Images

<img src="#" class="thumbnail">
<img src="#" class="thumbnail circle">

Tables

<table class="$style">
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
</table>

Progress Bars

<div class="progress $style">
    <div class="bar $colour" style="width: 50%"></div>
</div>

Forms

<input type="$type" class="$colour">

<select class="$colour">
    <option>...</option>
</select>

<textarea class="$colour">...</textarea>

Grid

<div class="row">
    <div class="box col-6">...</div>
    <div class="box col-6">...</div>
</div>

Full-Width

<div class="row">
    <div class="full col-6">...</div>
    <div class="full col-6">...</div>
</div>