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 module:

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

Require the PostCSS plugin:

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

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

---

Configuration

Global settings rule (and default values):

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

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
• Containers
• Rows
• Blocs
• Fractions
• Columns

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.

.my-container {
  gs: container;
}

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.

.my-row {
  gs: row;
}

Example: input, output, markup, demo

Blocs

gs: bloc [width](-[offset])

Blocs have a fixed width.

• width: width of the bloc.
• offset (optional): remaining space before the bloc can take its width. if (width + offset) is wider than breakpoint, then width shrinks first.

.my-bloc {
  gs: bloc 2;
}

.my-bloc-with-offset {
  gs: bloc 2-3;
}

Example: input, output, markup, demo

Example (with offset): input, output, markup, demo

Fractions

gs: fraction [ratio]/[total]

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

.my-fraction {
  gs: fraction 3/2;
}

Example: input, output, markup, demo

Columns

gs: columns [columns](-[offset])

• columns: number of columns.
• offset (optional): remaining space before the columns are active. If (columns + offset) is greater than breakpoint, then columns shrinks first.

.my-columns {
  gs: columns 4;
}

.my-columns-with-offset {
  gs: columns 4-2;
}

Example: input, output, markup, demo

Example (with offset): input, output, markup, demo