1024 Grid System - Compass Plugin

---

This plugin adds the 1024 Grid System framework to Compass.

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 is the creator of Compass, a core contributor to Sass and the father of this plugin.

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

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

bdec5f6f67aa6f19925a99c1b8ba48c4890a008a