Text

First Level Heading (h1)

Second Level Heading (h2)

Third Level Heading (h3)

Fourth Level Heading (h4)

Fifth Level Heading (h5)

Sixth Level Heading (h6)

This is a body paragraph with a hyperlink inside it. This is a body paragraph with a hyperlink inside it.

I'm a list item
I'm a list item
I'm a list item
I'm a list item

Paragraphs with inline code blocks look like this.

When one man, for whatever reason, has the opportunity to lead an extraordinary life, he has no right to keep it to himself.
-- Jacques Cousteau

A multi line code block might look like this:

function Person(name) {
  this.name = name;

  this.speak = function () {
    return this.name;
  };
}

var alice = new Person('Alice');

alice.speak();

Grid

Grids are created using the following classes: .container, .grid-row, .col, and .col-*.

You can apply the .container to create a wrapper class. If no columns are required, you can insert your content right in the body of the div.

<div class="container">
  <-- insert your content here -->
</div>

If you want to use columns, you have to nest them in a .grid-row container to make sure you don't double the gutter.

<div class="container">
  <div class="grid-row">
    <div class="col col-4">
      <-- insert your content here -->
    </div>
    <div class="col col-8">
      <-- insert your content here -->
    </div>
  </div>
</div>

They'll come out looking something like this:

.col-1

.col-11

.col-2

.col-10

.col-3

.col-9

.col-4

.col-8

.col-5

.col-7

.col-6

You can use helper classes to modify columns on mobile and tablet devices. These include:

.mobile-full
.mobile-half
.tablet-full
.tablet-col-*

Resize the window to see how the columns below change.

.col-1 .tablet-col-2 .mobile-half

.col-11 .tablet-col-10 .mobile-half

.col-2 .tablet-col-4 .mobile-half

.col-10 .tablet-col-8 .mobile-half

.col-3 .tablet-col-4 .mobile-half

.col-9 .tablet-col-8 .mobile-half

.col-4 .tablet-half .mobile-full

.col-8 .tablet-half .mobile-full

.col-5 .tablet-half .mobile-full

.col-7 .tablet-half .mobile-full

.col-6 .tablet-full .mobile-full

Grids can be safely nested inside of grids as well.

Customization

The dimension of the grid are defined in variables.scss and can be modified as desired. Look for these variables:

$grid-column-gutter: 15px;
$grid-column-width: 82px;

$mobile-container:  100%;
$tablet-container:  720px;

Buttons

button and a tags are styled the same way, by applying the .btn class.

Blue Button Red Button Green Button White Button Grey Button

Small buttons require adding the .btn-small class

Blue Button Red Button Green Button White Button Grey Button

Forms

Tables

This is a basic table:

Item	Quantity	Price	Total
Apples	6	$0.50	$3.00
Oranges	4	$1.00	$4.00
Bananas	5	$0.75	$3.75

This is a bordered table, created by adding the .table-bordered class:

Item	Quantity	Price	Total
Apples	6	$0.50	$3.00
Oranges	4	$1.00	$4.00
Bananas	5	$0.75	$3.75

This is a striped table, created by adding the .table-striped class:

Item	Quantity	Price	Total
Apples	6	$0.50	$3.00
Oranges	4	$1.00	$4.00
Bananas	5	$0.75	$3.75

Badges

Success

Warning

Alert

Info

Dark

Flash Messages