Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

postcss-grid-system

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

postcss-grid-system

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


Version published
Maintainers
1
Created

postcss-grid-system Build Status

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 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-grid-system -i src/styles.css -o dist/styles.css"
}
$ npm run build

Configuration

Global settings rule (and default values):


@gs {
  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 breakpoint is created for each value from min to max. When the screen is narrower than min * unit, 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.


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

.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

FAQs

Package last updated on 21 Apr 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts