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.

Example: input, output, markup, demo