960 Grid System - Standalone

960.gs is created by Nathan Smith. See the official site for more info: http://960.gs/

This plugin is consistent with latest version of 960.gs as of 3/19/2012

Install

gem install sass-960

Adding the 960 plugin to an existing project

Then make sure you have imported the grid library into your core .sass or .scss file with:

@import '960/grid';

Customizing your Grid System

This plugin uses the following configuration variables:

  • Global:
    • $ninesixty-columns (default: 12) count of grid columns
    • $ninesixty-class-separator (default: _) separator for generated classes
  • Fixed grid:
    • $ninesixty-gutter-width (default: 20px) default gutter width
    • $ninesixty-grid-width (default: 960px) default width of the grid container
  • Fluid grid
    • $ninesixty-fluid-gutter-margin (default: 2%) default gutter width for fluid grid
    • $ninesixty-fluid-grid-width (default: 92%) default width of the fluid grid container
    • $ninesixty-fluid-grid-margin width of container margin
    • $ninesixty-fluid-grid-min-width (default: 960px) default minimum width of container

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 960 Grid System framework use the @include grid-system-complete mixin to generate the corresponding classes. You can also customize the number of columns as demonstrated:

Example:

@include 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 {
    @include 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 @include grid-container mixin to declare your container element.
  • Use the @include grid(N, columns, gutter-width) mixin to declare a grid element.
  • Use the @include alpha and @include omega mixins to declare the first and last grid elements for a row.
  • Use the @include grid-prefix(N, columns) and @include grid-suffix(N, columns) mixins to add empty grid columns before or after a grid element.
  • Use the @include grid-push(N, columns) and @include 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:

$ninesixty-columns: 16

#wrap {
  @include grid-container
  #header {
    @include grid(16); }
  #middle {
    @include grid(16);
    #left-nav {
      @include grid(5);
      @include alpha; }
    #main-content {
      @include grid-prefix(1);
      @include grid(10);
      @include omega; } } }

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.