Skip to the main content


Grid System

A responsive, mobile first fluid grid system based on Flexbox that appropriately scales up to 12 columns as the device or viewport size increases. It includes some predefined classes for easy layout options, while providing Sass utilities for generating more semantic layouts.

Grid System Preview

Basic Grid

The basic grid gives you twelve columns to work with across all various breakpoints.

Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col

Basic Grid (with column shifts)

The Basic Grid with column shifts allows you to create a two-column layout where there is (column-sized) space before (pre-*) or after (post-*) the content.

Pre 1 Col
Pre 2 Col
Pre 3 Col
Pre 4 Col
Pre 5 Col
Pre 6 Col
Pre 7 Col
Pre 8 Col
Pre 9 Col
Pre 10 Col
Pre 11 Col
Post 1 Col
Post 2 Col
Post 3 Col
Post 4 Col
Post 5 Col
Post 6 Col
Post 7 Col
Post 8 Col
Post 9 Col
Post 10 Col
Post 11 Col

Utility Class-based Grid

The grid can be used via specific classes on DOM elements. Defining rows, columns, and pre/post shifting of columns are all available.

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-3
col-3
col-3
col-4
col-4
col-4
col-12
col-2 pre-5 post-5
col-4 pre-4 post-4
col-6 pre-3 post-3
col-8 pre-2 post-2
col-10 pre-1 post-1

Utility Class-based Responsive Grid

Columns can also be scoped to specific responsive breakpoints. Column utility classes on DOM elements are prefixed with one of the preset responsive breakpoints.

xl-col-2 lg-col-2 md-col-4 sm-col-6 col-12 (base)
xl-col-2 lg-col-2 md-col-4 sm-col-6 col-12 (base)
xl-col-2 lg-col-2 md-col-4 sm-col-6 col-12 (base)
xl-col-2 lg-col-2 md-col-4 sm-col-6 col-12 (base)
xl-col-2 lg-col-2 md-col-4 sm-col-6 col-12 (base)
xl-col-2 lg-col-2 md-col-4 sm-col-6 col-12 (base)

Semantic-based Grid

The grid can be used and layouts defined purely using Sass as well. This reduces the number of DOM elements needed to render content and styling while allowing us to choose the most appropriate and semantic HTML elements for each situation.

Example News Story

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus totam dolorum recusandae voluptate modi laboriosam laudantium? Consequuntur, ipsam autem, eveniet pariatur consectetur qui maiores nemo asperiores omnis obcaecati debitis. Vitae.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, odio itaque, repudiandae voluptates vero velit possimus recusandae illum hic nobis doloribus assumenda laudantium. Nisi architecto eveniet, qui atque, maiores deleniti?

Example News Story

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus totam dolorum recusandae voluptate modi laboriosam laudantium? Consequuntur, ipsam autem, eveniet pariatur consectetur qui maiores nemo asperiores omnis obcaecati debitis. Vitae.

Example News Story

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus totam dolorum recusandae voluptate modi laboriosam laudantium? Consequuntur, ipsam autem, eveniet pariatur consectetur qui maiores nemo asperiores omnis obcaecati debitis. Vitae.

Example News Story

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus totam dolorum recusandae voluptate modi laboriosam laudantium? Consequuntur, ipsam autem, eveniet pariatur consectetur qui maiores nemo asperiores omnis obcaecati debitis. Vitae.

Example News Story

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus totam dolorum recusandae voluptate modi laboriosam laudantium? Consequuntur, ipsam autem, eveniet pariatur consectetur qui maiores nemo asperiores omnis obcaecati debitis. Vitae.

Example News Story

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus totam dolorum recusandae voluptate modi laboriosam laudantium? Consequuntur, ipsam autem, eveniet pariatur consectetur qui maiores nemo asperiores omnis obcaecati debitis. Vitae.

Semantic Gallery

Galleries are helpers that use the grid to columns and rows for homogenous content (such as photo galleries). Column count is defined at the gallery level and visual row breaks are managed automatically.

Like columns and rows, a gallery can be defined at the Sass level.

Utility Class-based Gallery

Galleries can be used via specific classes on DOM elements. Defining a gallery, its children (gallery items), and columns items should span are all available for customization.

Utility Class-based Responsive Gallery

Galleries can also be scoped to specific responsive breakpoints. Gallery utility classes on DOM elements are prefixed with one of the preset responsive breakpoints.