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
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