Components

Basic Structure

Views

Grid

Usage

Example usage: .col-1-2 means 1 of 2 columns. .col-2-3 means 2 of 3 columns and so fourth. You can create most basic layouts with these grid classes.

.col-1-2

.col-1-2

.col-1-3

.col-2-3

.col-1-3

.col-1-3

.col-1-3

.col-1-4

.col-1-4

.col-1-4

.col-1-4

.col-1-4

.col-3-4

.col-1-5 and .col-1-8 Do not have accompanying classes. They are designed to be equally sized.

.col-1-5

.col-1-5

.col-1-5

.col-1-5

.col-1-5

.col-1-8

.col-1-8

.col-1-8

.col-1-8

.col-1-8

.col-1-8

.col-1-8

.col-1-8

Grid Padding

The grid is not padded by default, but if you choose, you can pad the grid evenly on the left and right sides by nesting your grid elements under: .padded padding.

.col-2-3

.col-1-3

If your layouts are heavy on typography you can use the .right-padded class by nesting your .col-'s under .right-padded:

.col-2-3

.col-1-3

You can also use .rowto automatically clear .col-markup. Alternatively, you can also use .clearat the end of .col-to clear columns.

Empty grid columns need content within to work properly. In most cases you'll want to hide them on your handheld breakpoint. Add .spaceto your .col-markup if you'd like an empty column to exist. The .spaceclass hides those empty columns automatically within the $handheld media query.

.col-1-3.space

.col-1-3 Some content.

.col-1-3.space

Some content.

Automatic Grid

Use the automatic grid if you don't need to be specific about your columns and only need equally sized columns. You can create an unlimited amount of columns automatically:

.col

.col

.col

.col

.col

.col

.col

.col

.col

.col

.col

.col

.col

.col

.col

.col

.col

.col

.col

.col

.col

.col

.col

.col

.col

.col

.col

Navigation Header

The navigation bar is fully responsive and can host an unlimited amount of sub-menu items.