postcss-grid-system

postcss-grid-system

francoisromain.github.io/postcss-grid-system

A PostCSS plugin to create grids based on a fixed column width.

---

Installation

Install the npm package:

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

Require with PostCSS:

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

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

---

Configuration

Option 1: In javascript

{
  width:   '20.5rem';/* width of a single column */
  gutter:  '1.5rem'; /* width of the gutter */
  padding: '1.5rem'; /* padding of the main container */
  max:     8;        /* maximum number of blocs (wide screens) */
  min:     2;        /* minimum number of blocs (mobile) */
  align:   'center'; /* center or left */ 
  display: 'flex';   /* float or flex */  
}

Option 2: in css

@gs {
  width:   20.5rem;  /* width of a single column */
  gutter:  1.5rem;   /* width of the gutter */
  padding: 1.5rem;   /* padding of the main container */
  max:     8;        /* maximum number of blocs (wide screens) */
  min:     2;        /* minimum number of blocs (mobile) */
  align:   center;   /* center or left */ 
  display: flex;     /* float or flex */  
}

If no configuration, see the default values above.

A breakpoint is created for each value from min to max. When the screen is narrower than min * width, elements are fluids.

---

Usage

Media queries

@gs-media [breakpoint] {
    .my-class {
        …
    }
}

• breakpoint: apply classes when the screen is wider than breakpoint. To set the default styles (mobile first), use @gs-media 0 { ….

Example: input, output, markup, demo

Containers

gs: container

The container width is set for each breakpoint.

Example: input, output, markup, demo

Rows

gs: row

Rows are intended to contain either a bloc or a fraction element. They have a negative right margin.

Example: input, output, markup, demo

Blocs

gs: bloc [width] [align]

Blocs have a fixed width.

• width: width of the bloc.
• align: left or right.

Example: input, output, markup, demo

Fractions

gs: fraction [ratio]/[total]

• ratio: fraction of the total.
• total: divider, relative to width.

Example: input, output, markup, demo

Columns

gs: columns [columns]

• columns: number of columns.

Example: input, output, markup, demo