Scalable Grid System - Compass Plugin
Scalable.gs is a cross screen size and device CSS framework. Check out the Scalable.gs website for more information and use cases.
- This plugin is consistent with latest version of scalable.gs as of 4/5/2011
This plugin adds the Scalable Grid System framework to Compass.
The plugin is build upon the great work done by Christopher M. Eppstein and Matt Sanders with the 960 Grid System framework compass plugin. The framework follows some of the name convention from the 960.gs by Nathan Smith.
Install
gem install compass-scalablegs-plugin
Create a Scalablegs-based Compass Project
compass create -r scalable my_project --using scalable
Or, If you prefer to use Sass's indentation based syntax:
compass create -r scalable my_project --using scalable --syntax sass
Then edit your scalable.sass
accordingly.
Customising your Grid System
This plugin uses the following configuration variables:
$scalable-columns
(default: 20) controls the default number of grid columns$scalable-grid-min-width
(default: 26em - with the assumption of a 12px body font size) controls the default minimum site width$scalable-grid-max-width
(default: 82em - with the assumption of a 12px body font size) controls the default maximum site width$scalable-gutter-width
(default: 2%) controls the default gutter width
All of the mixins included with this plugin use these configuration variables as defaults if the corresponding argument is omitted from a mixin call.
Class-Based Grid System
To create a grid system that works like the original Scalable.gs 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)
Making Semantic Grids
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
+first
and+last
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:
$scalable-columns: 24
#wrap
+grid-container
#left-nav
+first
+grid(5)
#main-content
+grid-prefix(1)
+grid(10)
+last
Authors/Contributors
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.
Matt Sanders is probably the best go to person if you want more information about the original compass-960-plugin.
Kenneth Nordahl forked and then converted the original plugin over to the Scalable Grid System.
Other contributors have worked on original fork of this plugin.