« Home

Version 1.x Reference

See here for the newer Version 2.x Reference document.

Getting Started

There are a number of ways to use it. The main HTML structure is as follows.

 <body class="the-grid">
   <div class="a-row">
     <div class="a-column">
     </div>
   </div>
 </body>

Grid Sizes

Default 1140px Grid

 <body class="the-grid">
 </body>

Medium 960px Grid

 <body class="the-grid medium">
 </body>

Small 800px Grid

 <body class="the-grid small">
 </body>

12-Column Grid

<div class="a-row">
  <div class="a-column width-1-of-12"><div class="content">1</div></div>
</div>

   ...

 <div class="a-row">
   <div class="a-column width-12-of-12"><div class="content">12</div></div>
   <div class="a-column width-12-of-12"><div class="content">12</div></div>
   <div class="a-column width-12-of-12"><div class="content">12</div></div>
   <div class="a-column width-12-of-12"><div class="content">12</div></div>
   <div class="a-column width-12-of-12"><div class="content">12</div></div>
   <div class="a-column width-12-of-12"><div class="content">12</div></div>
   <div class="a-column width-12-of-12"><div class="content">12</div></div>
   <div class="a-column width-12-of-12"><div class="content">12</div></div>
   <div class="a-column width-12-of-12"><div class="content">12</div></div>
   <div class="a-column width-12-of-12"><div class="content">12</div></div>
   <div class="a-column width-12-of-12"><div class="content">12</div></div>
   <div class="a-column width-12-of-12"><div class="content">12</div></div>
 </div>

16-Column Grid

 <div class="a-row">
   <div class="a-column width-1-of-16"><div class="content">1</div></div>
 </div>

 ...

 <div class="a-row">
   <div class="a-column width-16-of-16"><div class="content">16</div></div>
   <div class="a-column width-16-of-16"><div class="content">16</div></div>
   <div class="a-column width-16-of-16"><div class="content">16</div></div>
   <div class="a-column width-16-of-16"><div class="content">16</div></div>
   <div class="a-column width-16-of-16"><div class="content">16</div></div>
   <div class="a-column width-16-of-16"><div class="content">16</div></div>
   <div class="a-column width-16-of-16"><div class="content">16</div></div>
   <div class="a-column width-16-of-16"><div class="content">16</div></div>
   <div class="a-column width-16-of-16"><div class="content">16</div></div>
   <div class="a-column width-16-of-16"><div class="content">16</div></div>
   <div class="a-column width-16-of-16"><div class="content">16</div></div>
   <div class="a-column width-16-of-16"><div class="content">16</div></div>
   <div class="a-column width-16-of-16"><div class="content">16</div></div>
   <div class="a-column width-16-of-16"><div class="content">16</div></div>
   <div class="a-column width-16-of-16"><div class="content">16</div></div>
   <div class="a-column width-16-of-16"><div class="content">16</div></div>
 </div>

%-Column Grid

 <div class="a-row">
   <div class="a-column width-100-in-pc">
     <div class="content">100</div>
   </div>
 </div>

 ...

 <div class="a-row">
   <div class="a-column width-1-in-pc">
     <div class="content">1</div>
   </div>
 </div>

Positioning Columns

There are a couple of classes available for the position of columns within the grid, with the ability to center, or nudge (left or right) columns.

Centering

A centered class can be applied to a column like so. However, it will cause all other columns in that row to float beneath it.

 <div class="a-row">
   <div class="a-column width-12-of-12 centered">
     <div class="content"> Centered 12</div>
   </div>
 </div>

12 Column Nudging Left or Right

Uses the class nudge-12-left-xx or nudge-12-right-xx (where xx is from 1...11).

 <div class="a-row">
     <div class="a-column width-12-of-12 nudge-12-(left|right)-1">
         <div class="content"> Nudge Left 1</div>
     </div>
 </div>

 ...

 <div class="a-row">
     <div class="a-column width-12-of-12 nudge-12-(left|right)-11">
         <div class="content"> Nudge Left 1</div>
     </div>
 </div>

16 Column Nudging Left or Right

Uses the class nudge-16-left-xx or nudge-16-right-xx (where xx is from 1...14).

 <div class="a-row">
   <div class="a-column width-16-of-16 nudge-16-(left|right)-1">
     <div class="content"> Nudge Left 1</div>
   </div>
 </div>

 ...

 <div class="a-row">
   <div class="a-column width-16-of-16 nudge-16-(left|right)-14">
     <div class="content"> Nudge Left 1</div>
   </div>
 </div>

% Nudging Left or Right

Uses the class nudge-pc-left-xx or nudge-pc-right-xx (where xx is from 1...99). This is meant to be as flexible as possible, using the 99% nudge will obviously push any elements beyond the width of the containing element.

 <div class="a-row">
   <div class="a-column width-xx-in-xx nudge-pc-left-1">
     <div class="content"> Nudge 1% Left </div>
   </div>
 </div>

And that's a wrap! Short and sweet.

© Harry McKillen, 2016