Our framework uses a responsive, 12-column grid based on Bootstrap. You'll notice gutters have been removed and replaced with padding helpers to allow for easy and consistent layout options.

How it works

Grid columns are created by specifying the number of twelve available columns you wish to span. For example, two equal columns would use two .col-xs-6.

<div class='clearfix'>
  <div class='col-xs-6'></div>
  <div class='col-xs-6'></div>
</div>

Grid rows, we hardly knew ye

Because gutters have been removed, Bootstrap's .row is no longer needed to create horizontal groups of columns. Use padding helpers like .pad0 and .pad2x to create padding within columns.

Example: 12 column grid

1
2
3
4
5
6
7
8
9
10
11
12
8
4
4
4
4
6
6
<div class='fill-blue dark clearfix space-bottom'>
  <div class='col-sm-1 pad0y center keyline-right'>1</div>
  <div class='col-sm-1 pad0y center keyline-right'>2</div>
  <div class='col-sm-1 pad0y center keyline-right'>3</div>
  <div class='col-sm-1 pad0y center keyline-right'>4</div>
  <div class='col-sm-1 pad0y center keyline-right'>5</div>
  <div class='col-sm-1 pad0y center keyline-right'>6</div>
  <div class='col-sm-1 pad0y center keyline-right'>7</div>
  <div class='col-sm-1 pad0y center keyline-right'>8</div>
  <div class='col-sm-1 pad0y center keyline-right'>9</div>
  <div class='col-sm-1 pad0y center keyline-right'>10</div>
  <div class='col-sm-1 pad0y center keyline-right'>11</div>
  <div class='col-sm-1 pad0y center'>12</div>
</div>
<div class='fill-blue dark clearfix space-bottom'>
  <div class='col-sm-8 pad0y center keyline-right'>8</div>
  <div class='col-sm-4 pad0y center'>4</div>
</div>
<div class='fill-blue dark clearfix space-bottom'>
  <div class='col-sm-4 pad0y center keyline-right'>4</div>
  <div class='col-sm-4 pad0y center keyline-right'>4</div>
  <div class='col-sm-4 pad0y center'>4</div>
</div>
<div class='fill-blue dark clearfix space-bottom'>
  <div class='col-sm-6 pad0y center keyline-right'>6</div>
  <div class='col-sm-6 pad0y center'>6</div>
</div>

Simple 2 column layout

Move columns to the right using .col-*-offset-* classes. These classes increase the left margin of a column by * columns. Note the use of .col-sm-offset-1 on the main content div to give spacing from the sidebar.

Sidebar content
Main content
<div class='col-sm-12 clearfix'>
  <div class='col-sm-4 pad2 fill-gray'>Sidebar content</div>
  <div class='col-sm-7 col-sm-offset-1 pad2 fill-blue dark'>Main content</div>
</div>

Centering content using offset

.col-*-offset-* classes can be used to center columns. Determine the offset using the formula 12 - width / 2.

Centered content
<div class='col-sm-12 clearfix'>
  <div class='col-sm-8 col-sm-offset-2 pad2 fill-blue dark'>Centered content</div>
</div>

Padding

Use padding helpers to create spacing around elements. Padding uses a scale of 0 to 4 and ranges from 5 to 40 pixels.

.pad0

.pad1

.pad2

.pad4

.pad0x

.pad1x

.pad2x

.pad4x

.pad0y

.pad1y

.pad2y

.pad4y

<div class='col-sm-10 col-sm-offset-1'>
  <div class='col-sm-3'>
    <p class='fill-gray dark pad0'>
      <span class='fill-darken1 block'>.pad0</span>
    </p>
    <p class='fill-gray dark pad1'>
      <span class='fill-darken1 block'>.pad1</span>
    </p>
    <p class='fill-gray dark pad2'>
      <span class='fill-darken1 block'>.pad2</span>
    </p>
    <p class='fill-gray dark pad4'>
      <span class='fill-darken1 block'>.pad4</span>
    </p>
  </div>
  <div class='col-sm-3 col-sm-offset-1'>
    <p class='fill-gray dark pad0x'>
      <span class='fill-darken1 block'>.pad0x</span>
    </p>                
    <p class='fill-gray dark pad1x'>
      <span class='fill-darken1 block'>.pad1x</span>
    </p>                
    <p class='fill-gray dark pad2x'>
      <span class='fill-darken1 block'>.pad2x</span>
    </p>                
    <p class='fill-gray dark pad4x'>
      <span class='fill-darken1 block'>.pad4x</span>
    </p>                
  </div>
  <div class='col-sm-3 col-sm-offset-1'>
    <p class='fill-gray dark pad0y'>
      <span class='fill-darken1 block'>.pad0y</span>
    </p>                
    <p class='fill-gray dark pad1y'>
      <span class='fill-darken1 block'>.pad1y</span>
    </p>                
    <p class='fill-gray dark pad2y'>
      <span class='fill-darken1 block'>.pad2y</span>
    </p>                
    <p class='fill-gray dark pad4y'>
      <span class='fill-darken1 block'>.pad4y</span>
    </p>                
  </div>
</div>

Controlling height

Elements can be given consistent heights using the rowN classes. rowN classes range from row0 to row15 and specify height in increments of 20px.

.row1
.row2
.row3
.row4
.row5
<div class='fill-blue dark clearfix'>
  <div class='center keyline-bottom row1'>.row1</div>
  <div class='center keyline-bottom row2'>.row2</div>
  <div class='center keyline-bottom row3'>.row3</div>
  <div class='center keyline-bottom row4'>.row4</div>
  <div class='center keyline-bottom row5'>.row5</div>
</div>

Fluid width containers

Use .container-fluid to wrap content and center a page to the grid. Though rare, .container-fluid can be nested as well.

Content wrapped in a .container-fluid class.
<div class='container-fluid keyline-all clearfix'>
  <div class='col-sm-8 col-sm-offset-2 pad2 fill-green dark center'>
    Content wrapped in parent with a <code>.container-fluid</code> class.
  </div>
</div>
Made with in Norcross by the UX Team.