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.