This plugin adds the 1024 Grid System framework to Compass.

gem install compass-1024-plugin

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.

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

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.

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

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

Chris Eppstein is the creator of Compass, a core contributor to Sass and the father of this plugin.

Jesse Cofie (Maze 0sl0) is the author of this plugin and is based on the 960.gs by Nathan Simth.

bdec5f6f67aa6f19925a99c1b8ba48c4890a008a