postcss-grid
    Overview
    Reviews
    Code
    Tutorials
    Playground
    Contributors
    Issues
    Documentation
    Chat

postcss-grid

A semantic grid system for PostCSS

2.0.0  •  Updated 4 years ago  •  by Andy Jansson  •  MIT License

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%;
}

Popularity

Stars
71

Maintenance

Development

Last ver 4 years ago
Created 5 years ago
Last commit 4 years ago
16 days between commits

Technology

Node version: 0.12.7
0 unpacked

Compliance

MIT License
OSI Approved
0 vulnerabilities

Contributors

1 contributors
andyjansson
Maintainer, 8 commits
viktortsarevskiy
1 PRs

Tags

postcss
grid
css
postcss-plugin
Ready for the next level?
Join Openbase's founding team to help us build the ultimate open-source app store, work with the latest technologies, and enjoy great culture, impact and autonomy
Openbase helps developers choose among and use millions of open-source packages, so they can build amazing products faster.
FacebookLinkedIn
© 2020 Devstore, Inc.