Caramel

Buttons


<button class="btn $color">...</button>
<button class="btn $color sml">...</button>


<button class="btn $color clean">...</button>
<button class="btn $color clean sml">...</button>

<div class="nav btn dropdown">
    <button class="btn dropdownitem $color">...</button>
    <ul>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
    </ul>
</div>

Thick




Normal


<nav class="nav bar $style $color">
    <ul>
        <li class="collapse"><a href="#" class="menu"><i class="fa fa-bars"></i></a></li>

        // Brand or Logo
        <li class="brand"><a href="#">...</a></li>

        // Navigation Items
        <li><a href="#">...</a></li>

        // Dropdown Menu
        <li class="dropdown"><a href="#" class="dropdownitem">Dropdown</a>
            <ul>
                <li><a href="#">...</a></li>
            </ul>
        </li>

        // Right Aligned Navigation Items
        <ul class="right">
            <li><a href="#">...</a></li>
        </ul>
    </ul>
</nav>

Alerts

Default: A little plain, isn't it?
Success! Congratulations, it works!
Error. You broke it. You have no one to blame but yourself!
Warning: Something went wrong!
Info: Did you know, Bacon is more delicious in Canada?
Dark: Deep Space Nine.
Clean: Incase your boss says your style is 'childish', and you need more 'professionalism'.
<div class="alert $color">
    ...
</div>

Notices

Default: A little plain, isn't it?
Success! Congratulations, it works!
Error. You broke it. You have no one to blame but yourself!
Warning: Something went wrong!
Info: Did you know, Bacon is more delicious in Canada?
Dark: Deep Space Nine.
<div class="notice $color">
    ...
</div>

Panels

Default:
A little plain, isn't it?
Success!
Congratulations, it works!
Error.
You broke it. You have no one to blame but yourself!
Warning:
Something went wrong!
Info:
Did you know, Bacon is more delicious in Canada?
Dark:
Deep Space Nine.
<div class="panel $color">
    <div class="panel-head">...</div>
    <div class="panel-body">...</div>
</div>

Dismissables

Warning: Something went wrong!
Warning: Something went wrong!
<div class="notice $color" id="note">
    <div class="dismiss"><i class="fa fa-close"></i></div>
    ...
</div>

<div class="breadcrumbs">
    <ol>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li class="active">...</li>
    </ol>
</div>

Images


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

Tables

Name Alias GitHub User
Kurisu kurisubrooks kurisubrooks
Kaori Kaorioka Kaorioka
Henry SkylordRedstone hedgehog1029

Name Alias GitHub User
Kurisu kurisubrooks kurisubrooks
Kaori Kaorioka Kaorioka
Henry SkylordRedstone hedgehog1029
<table class="table">
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
</table>

Progress Bars

80%
19%
32%
64%
48%
50%
30%
10%
<div class="progress">
    <div class="progress-bar $color" style="width:50%">
        <span class="progress-text">50%</span>
    </div>
</div>

Pagination

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

Forms



<input type="text">

<input type="submit" class="btn $color">

<select>
    <option>...</option>
</select>

<textarea>...</textarea>

Grid

Note: You can do any combination of numbers as long as they add up to a maximum of 12.

col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1

col-2
col-2
col-2
col-2
col-2
col-2

col-3
col-6
col-3

col-3
col-3
col-3
col-3

col-4
col-4
col-4

col-6
col-6

col-8
col-4

col-12

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


Full-Width Grid


col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1

col-2
col-8
col-2

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