Grid System

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.

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

    <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>