960 Grid System - Compass Plugin
- Port of Version 1.0
- 2008-03-24
Created by Nathan Smith. See the official site for more info: http://960.gs/
This plugin adds the 960 Grid System framework to Compass.
Install
gem install compass-960-plugin
Create a 960-based Compass Project
compass create -r ninesixty my_project --using 960
Or, If you prefer to use Sass's indentation based syntax:
compass create -r ninesixty my_project --using 960 --syntax sass
Then edit your grid.sass
and text.sass
files accordingly. A reset is added into grid.sass automatically.
Customizing your Grid System
To create a grid system with other number of columns use the +grid-system
mixin to generate
the corresponding classes.
Example:
#wrap
+grid-system(24)
Making Semantic Grids
- Use the
+grid-container
mixin to declare your container element. - Use the
+grid
mixin to declare a grid element. - Use the
+alpha
and+omega
mixins to declare the first and last grid elements for a row. - User the
+grid-prefix
and+grid-suffix
mixins to add grid columns before or after a grid element.
Example:
#wrap
+grid-container
#left-nav
+alpha
+grid(5,16)
#main-content
+grid-prefix(1,16)
+grid(10, 16)
+omega