gistfile1.txt

/* 
   A dynamic version for the 960.gs CSS grid framework. 
   
   Usage:
   .mydiv {
     .grid(4); // 4 column box
     .grid(4, -2); // 4 column box, 2 column pull (negative left margin)
     .grid(8, 0, 2); // 8 column box, 2 column prefix (left padding) 
     .gird(8, 0, 0, 3); // 8 column box, 3 column suffix (right badding)
   }


   Requires LESS (http://lesscss.org/). Should be easy to translate to other CSS preprocessors.
 */

@columns: 12;
@column-width: 60px;
@gutter-width: 20px;

body {
    min-width: @columns * (@column-width + @gutter-width);
}

#container {
    width: @columns * (@column-width + @gutter-width);
    padding-left: -10px; /* no need to mark the first and last col */
    padding-right: -10px;
    margin: auto;
}

.grid(@cols: 1, @pull: 0, @prefix: 0, @suffix: 0) {
    display: inline;
    float: left;
    position: relative;
    width: (@column-width + @gutter-width) * @cols - @gutter-width;
    left: @pull * (@column-width + @gutter-width);
    margin-left: 10px;
    margin-right: 10px;
    padding-left: @prefix * (@column-width + @gutter-width);
    padding-right: @suffix * (@column-width + @gutter-width);
}