Grid Settings

This set of variables is used to generate the site's grid. If you'd like a 12 column grid instead of a 24, simply change the $total-columns variable to 12.

Current Defaults

• $total-columns - 24
• $container-width - 100%
• $container-max - 1280px
• $column-gutter - 1em
• $container-gutter - 1em
• $footer-height - 262px
• $generate-grid - true

Responsive Break Points

Responsive helper classes use three basic breakpoints:

If you're using SASS, you can use the following breakpoint variables in your sass files:

• $desktop - 1280px
• $laptop-large - 1180px
• $laptop - 1080px
• $tablet-wide - 1024px
• $tablet-mid - 960px
• $tablet-tall - 768px
• $phone-large - 662px
• $phone - 480px
• $phone-tall - 320px

Containers

There is a container helper class which provides a max-width for your entire gridded area. If the screen is larger than the max-width, the container will be centered in the screen.

A typical setup for using grids is below:

 <div class="container">
   <div class="row">
     <div class="column-12"> ... </div>
     <div class="column-8"> ... </div>
     <div class="column-2 pre-2"> ... </div>
   </div>
 </div>

Rows

Give an html element a class of row to clear it and eliminate the outside gutter of the first and last column.

You should also use the row class when nesting columns together to make sure all the edges line up.

<div class="row">
  <!-- Some Columns -->
  <div class="row">
    <!-- Nested Columns -->
  </div>
</div>
<div class="row">
  <!-- Some More Columns -->
</div>

Columns

The column class makes that element span the specified number of columns. For example:

<div class="column-12"> ... </div>

The above div will have a width of fifty percent of its parent as the grid system is based on twenty-four columns. Columns are always based on their parent element, so you can nest columns indefinitely. Remember to use rows and containers (see above) to wrap your column layouts.

• .center - centers the column inside the row
• .last-column - floats the column to the far right

Responsive Columns

A number of responsive column classes are provided for quick responsive layouts as well.

<div class="column-12 tablet-column-18 phone-column-24"> ... </div>

The above is a typical use of the phone and tablet column classes. The div will be twelve columns on large screens (desktops), eighteen columns on medium screens (tablets), and full width on small screens (phones). These can be used with responsive show and hide classes for very fast and powerful responsive design and iteration. Change the size of your browser to preview the below responsive column:

Pre and Post

Use the .pre-xx and post-xx classes to add space before and after columns. Combined with the column-xx classes you can quickly layout pages.

<div class="column-6 pre-4 post-8"> ... </div>

The six column div above will have four columns of space to the left of it and eight columns of space to the right.

Responsive Pre and Post

Much like columns, pre and post classes can be used with the tablet- and phone- prefixes to apply that pre or post only at certain screen sizes. The following html could create a twelve column div will have six columns of space to its left on desktops, two columns of space to it's left on tablets, and one column of space on phones. Resize to preview in your browser.

Block Groups

Block groups is a special-use grid system for displaying a grid of items that all have the same column width. For example, if you need to show a list of products with three products in each row, you could use the following html:

<div class="block-group block-group-3-up">
  <div class="block"></div>
  <div class="block"></div>
  ...
  <div class="block">/div>
</div>

Block groups do not need to be cleared and do not need a row wrapper.

• .block-group-1-up - display one item in each row
• .block-group-2-up - display two items in each row
• .block-group-3-up - display three items in each row
• .block-group-4-up - display four items in each row
• .block-group-5-up - display five items in each row
• .center - blocks are centered if there is not enough to fill the row

Responsive Block Groups

Block groups can have different amounts of columns at different breakpoints. A common use case would be something like this:

<div class="block-group block-group-3-up tablet-block-group-2-up phone-block-group-1-up">
  <div class="block"></div>
  <div class="block"></div>
  ...
  <div class="block"></div>
</div>

The above grid will have three columns in each row for desktop, two columns in each row for tablets, and one column for each row on phones.

Show and Hide

Use the helper classes show and hide to show and hide elements from view. For example:

<div class="show"> </div>

and

<div class="hide"> </div>

These are useful when you need to toggle visibility in Javascript. Use them with responsive show and hide and responsive columns for fast responsive layouts.

Responsive Show and Hide

These convinience classes are meant to help with quick responsive layout. Below are the classes and what breakpoints they are visible on:

Show Helpers

Essentially, the show classes will show that breakpoint and the breakpoint below it. So if you'd like something to be visible only on a phone, you would use class="phone-show". If you used tablet show, the element would be visible on tablet and phone.

Hide Helpers

Hide helpers are very similar to show. A responsive hide class will hide that breakpoint and the breakpoint below it. So if you wanted something to be visible on only desktop, you could use class="tablet-hide", hiding the element on tablet and phone. Or if you wanted something to be hidden only on a phone, class="phone-hide" would hide it on the phone only.

These helpers can be combined with responsive columns and responsive pre and post for a full responsive toolkit.

Visually Hidden

Use a class of "visually-hidden" on html elements to apply the visually-hidden mixin. Visually hidden will render an element invisile, but leave it in the DOM, accessable to screen readers.

<div class="visually-hidden"> </div>

Leader and Trailer

A method for applying space to the top or bottom of an element is provided by way of the leader-x and trailer-x helper classes.

• .leader-5 - apply 5 lines before the element
• .trailer-5 - apply 5 lines after the element
• .leader-4 - apply 4 lines before the element
• .trailer-4 - apply 4 lines after the element
• .leader-3 - apply 3 lines before the element
• .trailer-3 - apply 3 lines after the element
• .leader-2 - apply 2 lines before the element
• .trailer-2 - apply 2 lines after the element
• .leader-1 - apply 1 line before the element
• .trailer-1 - apply 1 line after the element
• .leader-half - apply half a line before the element
• .trailer-half - apply half a line after the element
• .trailer-0 - remove top margin from element
• .trailer-0 - remove bottom margin from element
• .no-leader - remove top margin from element
• .no-trailer - remove bottom margin from the element

Responsive Leader and Trailer

Much like other helpers, you can use tablet-leader and phone-leader for leader and trailer at specific viewport sizes.

Padding Leader and Trailer

The padding-leader and padding-trailer helper classes work the same as the leader and trailer classes, but use padding instead of margin.

• .padding-leader-5 - apply 5 lines of padding before the element
• .padding-trailer-5 - apply 5 lines of padding after the element
• .padding-leader-4 - apply 4 lines of padding before the element
• .padding-trailer-4 - apply 4 lines of padding after the element
• .padding-leader-3 - apply 3 lines of padding before the element
• .padding-trailer-3 - apply 3 lines of padding after the element
• .padding-leader-2 - apply 2 lines of padding before the element
• .padding-trailer-2 - apply 2 lines of padding after the element
• .padding-leader-1 - apply 1 line of padding before the element
• .padding-trailer-1 - apply 1 line of padding after the element
• .padding-leader-half - apply half a line of padding before the element
• .padding-trailer-half - apply half a line of padding after the element
• .padding-leader-0 - remove top padding from element
• .padding-trailer-0 - remove bottom padding from the element

Responsive Padding Leader and Trailer

Much like other helpers, you can use tablet-padding-leader and phone-padding-leader for leader and trailer at specific viewport sizes.

Full

Makes the object fill the parent. The parent must be absolute or relative. Writing <div class="full"></div> will apply the following css:

.full {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Right

Use a class of "right" on html elements to float elements to the right.

<div class="right"> </div>

Left

Use a class of "left" on html elements to float elements to the left.

<div class="left"> </div>

Responsive Right and Left

At times, you need to change which way elements are floated in tesponsive layouts. You can use the responsive right and left classes in conjunction with the standard right and left classes to quickly fix a float for a specific screen size.

• .tablet-left - float the element left on tablets
• .tablet-right - float the element right on tablets
• .phone-left - float the element left on phones
• .phone-right - float the element right on phones

Clear

Elements with a class of clear get a simple clear: both;.

<div class="clear"> </div>

Clearfix

Use a class of "clearfix" on html elements to apply the clearfix mixin.

<div class="clearfix"> </div>

Square Corners

Use the classes "square-left", "square-right", "square-top", "square-bottom" and "square-top-left", "square-top-right", "square-bottom-left" and "square-bottom-right" to remove border radius form elements.

• .square-left - Square off left
• .square-right - Square off right
• .square-top - Square off top
• .square-bottom - Square off bottom
• .square-top-left - Square off top-left
• .square-top-right - Square off top-right
• .square-bottom-left - Square off bottom-left
• .square-bottom-right - Square off bottom-right