Overview

less960

960 grid system mixins for the LESS dynamic css stylesheet system.

Purpose

960gs is cool and all that, but you end up with all these superfluous classes all over your html markup. I get that 960gs is for prototyping, but it blows having another step to take after finalizing the design (and who does finalize designs? in my experience things get changed - often). And still, odds are when you're prototyping a site you're already adding classes and whatnot in order to style particular blocks with particular lolcats.

So why not take advantage of dynamic css and bring the joy and added productivity of simple layouts to a system that you can work on while prototyping and carry on into production?

Usage

The 960gs classes are offered as mixins, to be utilized in your .less code

Import

Copy ninesixty.less into your directory of less scripts and it is as simple as:

@import 'ninesixty';

Grid Placement

The 960gs container and grid classes:

header{
  .container(12);
  div{
    .grid(4, 12);
  }
}
article{
  .container(16);
  div{
    .grid(4, 16);
  }
}
footer{
  .container(12);
  div{
    .grid(2, 12);
    .push(2, 12);
  }
}

Note that: While this example uses 12 and 16 as column numbers, you can use any arbitrary number of columns and the code will do the calculation for you. However, if it doesn't divide up cleanly it just won't.

Also note: The grid mixin requires you to pass in columns of the parent container as the second argument. Someone let me know if there's a better way to obtain this information.

Prefix/Suffix and Push/Pull

Prefixes and suffixes insert empty space before and after a grid unit:

.block{
  .grid(4, 16);
  .suffix(2, 16);
}

.block{
  .grid(4, 16);
  .suffix(2, 16);
}

Push and pull move a block left or right:

.block{
  .grid(4, 16);
  .push(2, 16);
}

.block{
  .grid(4, 16);
  .pull(2, 16);
}

Grid Children

In 960 grid children need alpha or omega class to keep the inside padding from going too crazy:

.block{
  .grid(1, 16);
  .alpha();
}

.block{
  .grid(1, 16);
  .omega();
}

Yeah, you need to add those classes to the first/last element, but until all browsers get better support for that in css, this is the best we can do.

Overriding width and padding

The grid system defaults to 960px width with 10px padding around all grid elements. You can override these values by setting the appropriate variables in your global namespace

@import 'ninesixty';
@ninesixty_width = 960px; 
@ninesixty_padding = 10px;

Please note that 960 is a pretty magic number and your grid widths might not cleanly divide by whatever your column number is.

License

I prefer BSD, but since 960gs is released as GPL/MIT, I guess I should do the same.

GPL License: http://www.gnu.org/licenses/gpl.html

MIT license: http://www.opensource.org/licenses/mit-license.php