Package Exports

postcss-grid-fluid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-grid-fluid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 */  
}

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