Grid System

Use the grid system to build the layout of custom page templates.

The grid system is based off of the Neat framework by Thoughtbot. Width classes are provided to quickly build basic grid layouts that default to 100% width on mobile widths. For nested grids or more nuanced responsiveness, use the build in Neat Sass mixins.

.width-one-half

.width-one-third

.width-two-thirds

.width-one-fourth

.width-three-fourths

.width-one-six

.width-five-sixths

.width-one-twelfth

.width-five-twelfths

.width-seven-twelfths

.width-eleven-twelfths

Example Grid Box

One Third
Two Thirds

Example Grid Box Using Shift Classes

Two Thirds (Shifted One Third)

Example Grid Box with Multiple Rows

One Whole
One Half
One Half
One Third
Two Thirds
One Fourth
Three Fourths

Notes

  1. Generally, fractional widths of all grid items within a grid box should add up to one complete row. If whitespace is needed within a row, shift classes are available to add whitespace to the left of a grid item.

  2. If a grid box needs to contain more than one row, the class .end-row is required on the last item of each row.