postcss-grid-fluid
v0.4.1
Published
A PostCSS plugin to create fluid grids.
Downloads
58
Maintainers
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
orrem
.
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
orrem
. - display (optional, default =
flex
):float
orflex
.