1024 Grid System - Compass Plugin
This plugin adds the 1024 Grid System framework to [Compass](compass-style.org/).
Install
gem install compass-1024-plugin
Create a 1024-based Compass Project
compass create -r tentwentyfour my_project --using 1024
Or, If you prefer to use Sass’s indentation based syntax:
compass create -r tentwentyfour my_project --using 1024 --syntax sass
Then edit your ‘grid.sass` and `text.sass` files accordingly. A reset is added into grid.sass automatically.
Adding the 1024 plugin to an existing project
Add the following to your compass.rb config file:
# Require any additional compass plugins here.
require 'tentwentyfour'
Then make sure you have imported the grid library into your core .sass or .scss file with:
@import compass/reset
@import 1024/grid
Customizing your Grid System
This plugin uses the following configuration variables:
-
‘$tentwentyfour-columns` (default: 12) controls the default number of grid columns
-
‘$tentwentyfour-grid-width` (default: 1024px) controls the default overall grid width
-
‘$tentwentyfour-gutter-width` (default: 20px) controls the default gutter width
-
‘$tentwentyfour-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.
Class-Based Grid System
To create a grid system that works like the original 1024 Grid System framework use the ‘+grid-system-complete` mixin to generate the corresponding classes. You can also customize the number of columns as demonstrated:
Example:
+grid-system-complete(24)
If you want to scope the grid inside a specific set of selectors or control your container class’ name you can use the ‘+grid-system` mixin instead.
Example:
#wrap
.my_container
+grid-system(16)
This will render all of the grid system nested below your selector, replacing the normal function of the container class (would be .container_16 in this example).
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 ‘+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 1024 Grid System framework.
Example:
$tentwentyfour-columns: 16
#wrap
+grid-container
#header
+grid(16)
#middle
+grid(16)
#left-nav
+grid(5)
+alpha
#main-content
+grid-prefix(1)
+grid(10)
+omega
Authors/Contributors
[Chris Eppstein](chriseppstein.github.com/) is the creator of Compass, a core contributor to Sass and the father of this plugin.
[Jesse Cofie (Maze 0sl0)](github.com/bohan) is the author of this plugin is based on the 960.gs by Nathan Simth.