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


gem install sass-960

Adding the 960 to an existing project

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

@import '960';

Adding the 960.gs to your Rails 3 assets pipeline

In your application.css add

 *= require 960

And be happy with your 960.gs layout.

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. Youccan also customize the number of columns as demonstrated:


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


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


$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;


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.