960 Grid System - Compass Plugin
-
Port of Version 1.0
-
2008-03-24
Created by Nathan Smith. See the official site for more info: <960.gs/>
This plugin adds the 960 Grid System framework to [Compass](compass-style.org/).
Install
sudo gem install itsucks-compass-960-plugin
Create a 960-based Compass Project
compass -r ninesixty -f 960 <project name>
Then edit your ‘grid.sass`, `text.sass` adn `debug.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.
-
Use 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
Debug Grids
+showgrid_12(!selector = ".wrap_12")
+showgrid_16(!selector = ".wrap_16")