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

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