grid-ng

• simple grid system based on less.js
• inspired by Ben Schwarz’s article on grid systems

customize

grid-ng is customizable. You can specify the number of columns, the column-width and the gutter-width. Hopefully the code is self-explanatory.

usage

There is one basic mixin that defines the grid.

.column;                        /* single column */
.column({number-of-columns});   
.column({number-of-columns},0); /* column with margin-right:0; */

e.g.: a 2 column layout

nav {
  .column(3);
}

article {
  .column(9,0);
}

Additionally, I added a content-container-class called “.content” which centers an element and applies the full page width calculated from the initial values of the grid.

width = {number-of-columns} * {column-width} + ({number-of-columns} - 1) * {gutter-width}

Use it as a mixin, e.g.:

.container {
  .content;

  nav {
    .column(3);
  }

  article {
    .column(9,0);
  }
}