960.gs is created by Nathan Smith. See the official site for more info: http://960.gs/
- This plugin is consistent with latest version of 960.gs as of 3/14/2011
This plugin adds the 960 Grid System framework to Compass.
gem install compass-960-plugin
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.
This plugin uses the following configuration variables:
$ninesixty-columns
(default: 12) controls the default number of grid columns$ninesixty-grid-width
(default: 960px) controls the default overall grid width$ninesixty-gutter-width
(default: 20px) controls the default gutter width$ninesixty-class-separator
(default: '_') sets the word separator for classnames generated by +grid-system
All of the mixins included with this plugin use these configuration variables as defaults if the corresponding argument is omitted from a mixin call.
To create a grid system that works like the original 960 Grid System framework
use the +grid-system
mixin to generate the corresponding classes. You can
also customize the number of columns as demonstrated in the following example.
Example:
#wrap
+grid-system(24)
To create a grid system using only CSS, use the following semantic grid mixins:
- Use the
+grid-container
mixin to declare your container element. - Use the
+grid(N, columns, gutter-width)
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(N, columns)
and+grid-suffix(N, columns)
mixins to add empty grid columns before or after a grid element. - Use the
+grid-push(N, columns)
and+grid-pull(N, columns)
mixins to move a grid element from its default position.
N
is the number of grid columns to span as in grid_N
or push_N
with the original 960 Grid System framework.
Example:
$ninesixty-columns: 16
#wrap
+grid-container
#header
+grid(16)
#middle
+grid(16)
#left-nav
+grid(5)
+alpha
#main-content
+grid-prefix(1)
+grid(10)
+omega
Chris Eppstein is the creator of Compass, a core contributor to Sass and the father of this plugin.
Nathan Smith is the author of 960.gs, the grid system this plugin is based on. He's also kind enough to let us pester him with questions from time to time.
These days, Matt Sanders is probably the best person chat with if you've found a bug or want to get a patch included.
We've also been lucky enough to have some help from a number of other contributors.