postcss-structure

PostCSS-structure

http://francoisromain.github.io/postcss-structure/

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

The rule: The fewer differences in the size of the illustrations, the quieter the impression created by the design.

(Josef Muller Brockmann in The designer and the grid)

Installation

Install PostCSS-structure from npm:

$ npm install postcss-structure --save-dev

Check PostCSS usage instructions to setup with Gulp, Grunt, Webpack, Npm scripts…

Add PostCSS-structure to the required PostCSS plugins:

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

For example with a Npm script and postcss-cli, add this to package.json:

"scripts": {
  "start": "postcss -u postcss-structure -i src/styles.css -o dist/styles.css"
}
// -i is the input -o is the output

Run the script:

$ npm start

Settings

• Global
• Container
• Rows
• Blocs
• Bloc fractions
• Blobs
• Columns
• Show
• Right

Global

• unit: width of a single column
• gutter: width of the gutter
• padding: padding of the main container
• max: maximum number of blocs
• min: minimum number of blocs
• align: center or left
• display: float or flex

A media-query is created for each unit multiple, from min to max.

/* default values */ 

@structure {
  unit:    20.5rem,
  gutter:  1.5rem,
  padding: 1.5rem,
  max:     8,
  min:     2,
  align:   center,
  display: flex      
}

Containers

structure: container

The container width is defined for each media-query.

.my-container {
  structure: container;
}

Example: input, output, markup

Rows

structure: row

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

.my-row {
  structure: row;
}

Example: input, output, markup

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

Example (with offset): input, output, markup

Bloc fractions

structure: fraction [ratio]/[total]

• ratio: fraction of the total in one row.
• total: aribitrary divider, relative to unit.

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

Example: input, output, markup

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: aribitrary divider, relative to the breakpoint.

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

Example: input, output, markup

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

Example (with offset): input, output, markup

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

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