Gutters

gutters are applied to row elements and specify how much space is placed between cells

no gutter

<div class='row no-gutter'>
  <div></div>
  <div></div>
  <div></div>
</div>

small gutter

<div class='row small-gutter'>
  <div></div>
  <div></div>
  <div></div>
</div>

medium gutter

medium is the default. no class is required.

<div class='row'>
  <div></div>
  <div></div>
  <div></div>
</div>

large gutter

<div class='row large-gutter'>
  <div></div>
  <div></div>
  <div></div>
</div>

Grid System

basics

If you just want even width columns, flex box will handle most of the drudgery for you. just add 'row' to a containing element's class list and you're done.

<div class='row'>
  <div></div>
  <div></div>
</div>
<div class='row'>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class='row'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

controlled grid

to specify the width of a given cell, specify the width in number of columns (out of 12) using the class name 'small-x', where x is the number of columns.

HINT: When you specify the column width, you don't need to close the row tag and open another. the system will wrap the cells in increments of 12.

HINT: You can mix controlled and un-controlled cells within a row.

Why 'small'? - small is the default class for column widths for mobile, which can then be overridden with specified widths for tablet and desktop. We'll cover this in the next section.

<div class='row'>
  <div class='small-6'></div>
  <div class='small-2'></div>
  <div class='small-2'></div>
  <div class='small-2'></div>
  <div class='small-8'></div>
  <div class='small-4'></div>
</div>
<div class='row'>
  <div class='small-6'></div>
  <div></div>
  <div></div>
</div>

responsive grid

this system provides three breakpoints - small, medium, and large. roughly: mobile, tablet and desktop. use the classes 'small-x', 'medium-x' and 'large-x' to specify the column widths of an element for each breakpoint.

<div class='row'>
  <div class='small-12 medium-6 large-3'></div>
  <div class='small-12 medium-6 large-3'></div>
  <div class='small-12 medium-6 large-3'></div>
  <div class='small-12 medium-6 large-3'></div>
  <div class='small-2 medium-1'></div>
  <div class='small-4 medium-2'></div>
  <div class='small-6 medium-3'></div>
  <div class='small-6 medium-3'></div>
  <div class='small-4 medium-2'></div>
  <div class='small-2 medium-1'></div>
</div>

offsets

to specify the left offset of a given cell, use 'offset-[screen size]-x', where x is the number of columns 0-12.

HINT: you might need 'offset-medium-0' or 'offset-large-0' to reset a cells offset when using 'offset-small-x'

<div class='row '>
  <div class='small-4 offset-small-8'>offset 8</div>
  <div class='small-8 offset-small-4'>offset 4</div>
  <div class='small-12 '>offset 0</div>
</div>

offset 8

offset 4

offset 0

nesting

this is cake. each cell can in turn also be a row. just add 'row' and you're done. Within a cell, the 12 column system resets.

<div class='row'>
  <div class='small-12 medium-6 row'>
    <div class='small-6'></div>
    <div ></div>
    <div ></div>
  </div>
  <div class='small-12 medium-6 row'>
    <div class='small-8 row'>
      <div></div>
      <div></div>
    </div>
    <div class='small-4 row'>
      <div></div>
    </div>
  </div>
</div>

row spanning

this is a tiny bit tricky. what we're actually doing is visually promoting child cells to sibling cells. To accomplish this, we remove the padding of the nested row which contains the promoted cells by adding the class 'no-row-padding'.

<div class='row'>
  <div class='small-4 row'>spans 3 rows</div>
  <div class='small-8 row no-row-padding'>
    <div class='small-12'></div>
    <div class='small-12'></div>
    <div class='small-12'></div>
  </div>
</div>

spans 3 rows

Utilities

no-cell-padding

<div class='row'>
  <div class='no-cell-padding'>no cell padding</div>
  <div class='no-cell-padding'>no cell padding</div>
  <div class='no-cell-padding'>no cell padding</div>
</div>

no cell padding

hide-for-x, show-for-x

<div class='row'>
  <div class='hide-for-small'>this is <strong>not</strong> visible on small</div>
  <div class='hide-for-medium'>this is <strong>not</strong> visible on medium</div>
  <div class='hide-for-large'>this is <strong>not</strong> visible on large</div>
  <div class='show-for-small'>this is <strong>only</strong> visible on small</div>
  <div class='show-for-medium'>this is <strong>only</strong> visible on medium</div>
  <div class='show-for-large'>this is <strong>only</strong> visible on large</div>
</div>

this is not visible on small

this is not visible on medium

this is not visible on large

this is only visible on small

this is only visible on medium

this is only visible on large

order-[screen size]-[position]

flex box allows you to re-order elements as they're displayed without altering their order within the markup.

this system provides some convenience methods changing the order of items for a given screen size

use the class name 'order-[screen size]-[position]' where 'position' is a number 1 through 12.

<div class='row'>
  <div class='order-large-1 order-medium-2 order-small-3'>
    large: first<br/>
    medium: second<br/>
    small: third<br/>
  </div>
  <div class='order-large-2 order-medium-3 order-small-1'>
    large: second<br/>
    medium: third<br/>
    small: first<br/>
  </div>
  <div class='order-large-3 order-medium-1 order-small-2'>
    large: third<br/>
    medium: first<br/>
    small: second<br/>
  </div>
</div>

A
large: first
medium: second
small: third

B
large: second
medium: third
small: first

C
large: third
medium: first
small: second

Funko
Grid System

documentation

source

demo

index