README
postcss-grid-system
francoisromain.github.io/postcss-grid-system
A PostCSS plugin to create grids based on a fixed column width.
Installation
Install the npm package:
npm install postcss postcss-grid-system --save-dev
Require with PostCSS:
postcss([require('postcss-grid-system')]);
See PostCSS docs to setup with Gulp, Grunt, Webpack, npm scripts…
Configuration
Option 1: In javascript
{
width: '20.5rem'; /* width of a single column */
gutter: '1.5rem'; /* width of the gutter */
padding: '1.5rem'; /* padding of the main container */
max: 8; /* maximum number of blocs (wide screens) */
min: 2; /* minimum number of blocs (mobile) */
align: 'center'; /* center or left */
display: 'flex'; /* float or flex */
}
Option 2: in css
@gs {
width: 20.5rem; /* width of a single column */
gutter: 1.5rem; /* width of the gutter */
padding: 1.5rem; /* padding of the main container */
max: 8; /* maximum number of blocs (wide screens) */
min: 2; /* minimum number of blocs (mobile) */
align: center; /* center or left */
display: flex; /* float or flex */
}
If no configuration, see the default values above.
A breakpoint is created for each value from min to max. When the screen is narrower than min * width, elements are fluids.
Usage
Media queries
@gs-media [breakpoint] {
.my-class {
…
}
}
- breakpoint: apply classes when the screen is wider than breakpoint. To set the default styles (mobile first), use
@gs-media 0 { …
.
Example: input, output, markup, demo
Containers
gs: container
The container width is set for each breakpoint.
Example: input, output, markup, demo
Rows
gs: row
Rows are intended to contain either a bloc or a fraction element. They have a negative right margin.
Example: input, output, markup, demo
Blocs
gs: bloc [width] [align]
Blocs have a fixed width.
- width: width of the bloc.
- align: left or right.
Example: input, output, markup, demo
Fractions
gs: fraction [ratio]/[total]
- ratio: fraction of the total.
- total: divider, relative to width.
Example: input, output, markup, demo
Columns
gs: columns [columns]
- columns: number of columns.