Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
SASS mixins for a better 960 grid system
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
README.md
fixed_grid.scss
flexible_grid.scss

README.md

960-sass

What?

A collection of SASS mixins (specifically, SCSS) to allow you to easily and more-sematically use 960.gs for fixed or flexible grids.

Why?

Because using non-semantic, strictly-presentational grid classes like <div class="grid_4 alpha"> rubs me the wrong way, and because SASS is awesome.

How?

First, choose whether you want a flexible grid or a fixed grid, and save the appropriate file in your SASS directory.

Then, in your main SASS file, you can do things like this:

@import "flexible_grid";

section{
  @include container_12;

  article{
    @include grid(8);

    img{
      @include grid(2);
      @include alpha;
    }

    p{
      @include grid(6);
      @include omega;
    }

  }

  nav{
    @include grid(4);
    @include push(8);
  }

}

Just like 960.gs, included options are

  • container_12
  • grid(#)
  • push(#)
  • pull(#)
  • prefix(#)
  • suffix(#)
  • alpha
  • omega

Where?

You can see it in action in the stylesheet source of tjschuck.com

Who?

T.J. Schuck
http://tjschuck.com
@tjschuck

License

Copyright © 2011 T.J. Schuck
Released under the MIT license.

Something went wrong with that request. Please try again.