postcss-grid-fluid

postcss-grid-fluid

A PostCSS plugin to create fluid grids.

---

Installation

Install the npm module:

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

Require the PostCSS plugin:

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

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

Example with a npm script and postcss-cli:

$ npm install postcss-cli --save-dev

Add a script to package.json:

"scripts": {
  "build": "postcss -u postcss-grid-fluid -i src/styles.css -o dist/styles.css"
}

$ npm run build

---

Configuration (optional)

Global settings rule (and default values):

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

---

Usage

• Rows
• Blobs

Rows

gf: row ([gutter])

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

• gutter: width of the gutter in px or rem.

.my-row {
  gf: row 1.5rem;
}

Blobs

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

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

.my-blob {
  gf: blob 0.75;
}

.my-blob-with-offset {
  gf: blob 3/4 1.5rem float;
}

Changelog

0.1.0

• first version