postcss-structure

postcss-structure

francoisromain.github.io/postcss-structure

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

Installation

Install the npm module:

$ npm install postcss-structure --save-dev

Require the PostCSS plugin:

postcss([ require('postcss-structure') ])

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

Example with a npm script and postcss-cli:

$ npm install postcss-cli --save-dev

Add a script to package.json:

"scripts": {
  "build": "postcss -u postcss-structure -i src/styles.css -o dist/styles.css"
}

$ npm run build

Configuration

Global settings rule (and default values):

@structure {
  unit:    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 media-query is created for each unit multiple, from min to max. When the screen is narrower than min * unit, elements are fluids.

Usage

• Containers
• Rows
• Blocs
• Fractions
• Blobs
• Columns
• Show
• Hide
• Right
• Custom styles

Containers

structure: container

The container width is set for each media-query.

.my-container {
  structure: container;
}

Example: input, output, markup, demo

Rows

structure: row

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

.my-row {
  structure: row;
}

Example: input, output, markup, demo

Blocs

structure: bloc [breakpoint]-[width](-[offset])

Blocs have a fixed width.

• breakpoint: number of units that fit into the screen. If the screen is narrower than the breakpoint, the bloc is fluid and takes full 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 {
  structure: bloc 3-2;
}

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

Example: input, output, markup, demo

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

Fractions

structure: fraction [ratio]/[total]

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

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

Example: input, output, markup, demo

Blobs

structure: blob [breakpoint]-[ratio]/[total]

Unlike blocs, blobs width will change depending on the breakpoint.

• breakpoint: number of units that fit in the screen.
• ratio: fraction of the total.
• total: divider, relative to the breakpoint.

.my-blob {
  structure: blob 3-2/3;
}

Example: input, output, markup, demo

Columns

structure: columns [breakpoint]-[columns](-[offset])

• breakpoint: number of units that fit into the screen. If the screen is narrower than the breakpoint, the element has one column.
• 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 {
  structure: columns 3-4;
}

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

Example: input, output, markup, demo

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

Show

structure: show [breakpoint]

• breakpoint: the element is made visible when the screen is wider than breakpoint. A class has to be defined above in the CSS to make it invisible.

.my-element {
  structure: show 3;
}

Example: input, output, markup, demo

Hide

structure: hide [breakpoint]

• breakpoint: the element is hidden when the screen is wider than breakpoint.

.my-element {
  structure: hide 3;
}

Right

structure: right [breakpoint]

• breakpoint: the element is pushed to the right when the screen is wider than breakpoint.

.my-element {
  structure: right 3;
}

Example: input, output, markup, demo

Custom styles

@structure-media [breakpoint] {
    .myClass {
        …
    }
}

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

Example: input, output, markup, demo