postcss-grid-fluid

francoisromain.github.io/postcss-grid-fluid

A PostCSS plugin to create fluid grids.

Installation

Install the npm package:

npm install postcss postcss-grid-fluid --save-dev

Require the PostCSS plugin:

postcss([require('postcss-grid-fluid')]);

See PostCSS docs to setup with Gulp, Grunt, Webpack, npm scripts…

Configuration (optional)

Option 1: In javascript

{
  width: 1,         /* width/total of one blob integer if there is a _total_ or a float smaller than 1. */
  gutter: 0,        /* width of the gutter */
  display: 'flex'   /* 'float' or 'flex' */
}

Option 2: in css

@gf {
  width: 1; /* width/total of one blob */
  gutter: 0; /* width of the gutter */
  display: flex; /* float or flex */
}

If no configuration, the default value.

Usage

Rows

gf: row ([gutter])

• gutter (optional, default = 0): width of the gutter in px or rem.

Rows are intended to contain a blob. They have a negative right margin.

Blobs

gf: blob [width](/[total]) ([gutter]) ([display])

• width: width of the blob. Could be an integer if there is a total or a float smaller than 1.
• total (optional, default = 1): divider of the container width.
• gutter (optional, default = 0): width of the gutter in px or rem.
• display (optional, default = flex): float or flex.

Example 1: input, output, markup, demo

Example 2: input, output, markup, demo