Base.css uses a percentage based grid that adapts to smaller viewports. It includes predefined grid classes that scale up to 12 columns. There's also margin clasess to create spacing between grid columns that complement the grid system.

Taking a cue from Jeff Croft, everything in base uses the border-box box model making it easy to apply border and padding rules without manipulating the calculated width of the container.

Percentage based

The grid rules are percentage based therefore they are calulated from within the parent containers current width. e.g:

<div class='col6 clearfix'>
  <div class='col6'></div>
  <div class='col6'></div>
</div>

col6 is 50% of the parent which is 50% of its containing element. Note: the usage of the .clearfix class. If you are working with floated columns these should be wrapped in a parent container containing this class.

Nesting column/margin classes

Because Grid columns are relatively sized to their parents, a col6 inside a col10 is actually 50% of 83.3333%, or 41.6666% of 100% (relative to the body, it is equivalent to a col5). When nesting grid columns, attempt to maintain the twelve-column grid when possible.

Mobile

margin classes reset and col classes adjust to 100% width when viewed in mobile as the grid system recommends a flat linear list when viewed on mobile.

40px vertical grid

The vertical rhythm of base.css is based on 40px. Many common elements (buttons, input fields, headings) have an exact height of 40px making it easy to align elements and have predictable, consistent heights. The `rowN` classes allow you to specify explicit heights of elements in increments of 40px.

Example: 12 column grid

1
2
3
4
5
6
7
8
9
10
11
12
<div class='clearfix prose'>
  <div class='col1 center keyline-right'>1</div>
  <div class='col1 center keyline-right'>2</div>
  <div class='col1 center keyline-right'>3</div>
  <div class='col1 center keyline-right'>4</div>
  <div class='col1 center keyline-right'>5</div>
  <div class='col1 center keyline-right'>6</div>
  <div class='col1 center keyline-right'>7</div>
  <div class='col1 center keyline-right'>8</div>
  <div class='col1 center keyline-right'>9</div>
  <div class='col1 center keyline-right'>10</div>
  <div class='col1 center keyline-right'>11</div>
  <div class='col1 center'>12</div>
</div>

Example: 40px vertical grid

.row1
.row2
.row3
.row4
<div class='clearfix prose'>
  <div class='row1 center keyline-all space-bottom'>.row1</div>
  <div class='row2 center keyline-all space-bottom'>.row2</div>
  <div class='row3 center keyline-all space-bottom'>.row3</div>
  <div class='row4 center keyline-all'>.row4</div>
</div>

Example: 2 column layout

Note the use of .margin0 on the main content div to give spacing from the sidebar. This is optional of course but for expected behavior, the margin width along with columns floated should add up to 100%.

Sidebar content
Main content
    <div class='col12 clearfix'>
      <div class='col4 pad2 fill-grey'>Sidebar content</div>
      <div class='margin0 col7 pad2 fill-blue dark'>Main content</div>
    </div>
  

Example: centered column using margin

To calculate the correct margin to use, take the difference of the column divided by 12 and divide that number in half.

e.g: to center a .col10 take the difference from 12 (2) and divde this number in half: .margin1

Main content
<div class='col12 clearfix'>
  <div class='col8 pad2 margin2 fill-blue dark'>Main content</div>
</div>

Margin right

In addition to marginN that sets a left margin you can optionaly set a right with marginNr

Floated content with right margin
<div class='col12 clearfix'>
  <div class='col6 pad2 margin1r fr fill-navy dark'>Floated content with right margin</div>
</div>

Padding

Because base.css uses box-sizing:border-box, padding does not effect the width of the element so padding and grid column play nicely together. Padding comes in 5/10/20/40px varieties.

.pad0

.pad1

.pad2

.pad4

.pad0x

.pad1x

.pad2x

.pad4x

.pad0y

.pad1y

.pad2y

.pad4y

    <div class='col3'>
      <p class='fill-blue dark pad0'>
        <span class='fill-darken1'>.pad0</span>
      </p>
      <p class='fill-blue dark pad1'>
        <span class='fill-darken1'>.pad1</span>
      </p>
      <p class='fill-blue dark pad2'>
        <span class='fill-darken1'>.pad2</span>
      </p>
      <p class='fill-blue dark pad4'>
        <span class='fill-darken1'>.pad4</span>
      </p>
    </div>

    <div class='col3 margin1'>
      <p class='fill-navy dark pad0x'>
        <span class='fill-darken1'>.pad0x</span>
      </p>
      <p class='fill-navy dark pad1x'>
        <span class='fill-darken1'>.pad1x</span>
      </p>
      <p class='fill-navy dark pad2x'>
        <span class='fill-darken1'>.pad2x</span>
      </p>
      <p class='fill-navy dark pad4x'>
        <span class='fill-darken1'>.pad4x</span>
      </p>
    </div>

    <div class='col3 margin1'>
      <p class='fill-blue dark pad0y'>
        <span class='fill-darken1'>.pad0y</span>
      </p>
      <p class='fill-blue dark pad1y'>
        <span class='fill-darken1'>.pad1y</span>
      </p>
      <p class='fill-blue dark pad2y'>
        <span class='fill-darken1'>.pad2y</span>
      </p>
      <p class='fill-blue dark pad4y'>
        <span class='fill-darken1'>.pad4y</span>
      </p>
    </div>
  

Absolute positioned layouts

For sites that feature a full page map there's often a need to display content over top without breaking the overflow of the page. You can pair a pin-left or pin-right with a colN rule to add absolute positioned content overtop. pin-topleft,pin-topright,pin-bottomleft,pin-bottomright are best for absolute positioning content with variable height. There's also pin-top and pin-bottom, which require height to be specified use.

Absolute positioned
    <div class='col12 pad4 clearfix fill-grey contain'>
      <div class='col4 pin-left pad2 fill-green dark'>Absolute positioned</div>
    </div>
  

Fixed width layout

To set width limits and center a page to the grid you can wrap your layout in a containing div with a class of limiter. Generally this should be applied to the top most element.

A div wrapped in parent with a .limiter class.
    <div class='limiter keyline-all clearfix'>
      <div class='col4 margin4 pad2 fill-green dark'>A div wrapped in parent with a <code>.limiter</code> class.</div>
    </div>