Example: 12 column grid
Example: 40px vertical grid
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%.
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:
In addition to
marginN that sets a left margin you can optionaly set a right with
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.
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-right with a
colN rule to add absolute positioned content overtop.
pin-bottomright are best for absolute positioning content with variable height.
pin-bottom, which require height to be specified use.
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.