postcss-grid

A semantic grid system for PostCSS

Installation

npm install postcss-grid

Usage

var fs = require('fs');
var postcss = require('postcss');
var grid = require('postcss-grid');

var css = fs.readFileSync('input.css', 'utf8');

var options = {
  columns: 12, // the number of columns in the grid
  maxWidth: 960, // the maximum width of the grid (in px)
  gutter: 20, // the width of the gutter (in px)
  legacy: false // fixes the double-margin bug in older browsers. Defaults to false
};

var output = postcss()
  .use(grid(options))
  .process(css)
  .css;

Columns

Columns are created by using the grid-column declaration and passing a /-delimited value. This value contains the number of columns the element should span, separated by the total number of columns in the element's container.

Example:

.element {
  grid-column: 1/12;
}

Turns into:

.element{
  float: left;
  width: 6.42361%;
  margin-right: 2.08333%;
}

You can also use it in conjunction with the !last declaration to make sure that the last element of the row doesn't allocate a gutter, pushing itself to the next row.

Example:

.element {
  grid-column: 1/2 !last;
}

Turns into:

.element{
  float: left;
  width: 6.42361%;
}

Offsetting elements

Elements can be offset to the left and the right by using grid-pull and grid-push.

Example:

.push {
  grid-push: 1/12;
}
.pull {
  grid-pull: 1/12;
}

Turns into:

.push {
  margin-left: 8.50694%;
}
.pull {
  margin-right: 8.50694%;
}

Width and gutter values

The width and gutter values can be retrieved by calling grid-width(...) and grid-gutter(...) from a declaration.

Example:

.element {
  width: grid-width(1/12);
  margin-left: grid-gutter(12);
}

Turns into:

.element {
  width: 6.42361%;
  margin-left: 2.08333%;
}