postcss-grid-fluid

postcss-grid-fluid

francoisromain.github.io/postcss-grid-fluid

A PostCSS plugin to create fluid grids.

---

Installation

Install the npm package:

$ npm install 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)

Global settings rule (and default values):

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

---

Usage

• Rows
• Blobs

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.

---

Examples

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

.my-blob {
  gf: blob 0.75;
}

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

01: input, output, markup, demo

02: input, output, markup, demo