1200 GRID SYSTEM

15 COLUMN GRID

CLASS NAMES

»   SIZING

BASED ON NUMBER OF COLUMNS
grid_1 grid_2 grid_3 grid_4 grid_5
grid_6 grid_7 grid_8 grid_9 grid_10
grid_11 grid_12 grid_13 grid_14 grid_15
container_15
this is the total width of your site, including 10px margins on either side to make 1200px

»  ADJUSTMENTS

MINOR TWEAKS TO SOLVE ISSUES
omega
changes right margin from 10px to 0px
alpha
changes left margin from 10px to 0px
clear
creates an invisible, horizontal block of space determined by the margins you set

»  REARRANGING

PUSH/PULL
push_1
moves an element 1 column width to the right, allowing floating elements to overlap or switch places, changing visual order
pull_1
moves an element 1 column to the left, allowing floating elements to overlap or switch places, changing visual order

»  BLOCKING

PREFIX/SUFFIX
prefix_1
adds 1 column of padding to the left side, preventing elements from sliding into place
suffix_1
adds 1 column of padding to the right side, preventing elements from sliding into place
USE BOTH FOR A SINGLE ELEMENT WITH NOTHING ON EITHER SIDE

HOW IT WORKS

left arrow     SIZING

The grid system uses class names to determine how wide an element is according to how many columns it occupies. For example, a grid_5 element like this one spans the width of five columns.

left arrow     PLACEMENT

Elements are moved within the grid by assigning class names that designate amounts of padding or margin corresponding to column widths. All of the elements use the float property, so essentially it is like moving dominoes back and forth in a line by telling them to move left 400 pixels or right 30 pixels.