Old School Grid
Trustworthy postcss grid system we learnt to love, with wrapping columns and padding gutters.
Visit official website for live demo and documentation
What's that?
postcss-oldschool-grid is a postcss plugin that provide an easy to use and intuitive grid system based on padding gutters and wrapping columns.
No calc(), no right margins with :last-child and :nth-child(), simply nested containers with padding gutters.
Under the hood it behave like Bootstrap grid system, so all you have to do is to put content inside a column, put the column inside a row and eventually put the row inside a wrapper. Easy! :)
Example
Install
First of all you have to install and configure postcss in order to use this plugin: if you don't know what f***ing I'm talking about, take a look to the guide on the postcss github page.
Next step is to use npm to instll postcss-oldschool-grid:
$ npm install postcss-oldschool-grid`
And add it to your postcss processors:
var osg = ;......
Options
There are two ways to configure postcss-oldschool-grid:
- Pass an object as parameter when you call the processor
var config = wrapperWidth: '40px'; gutterWidth: '20px' totalColumns: 16...;
- Set options in the CSS, inside the special at-rule @grid (you can use either camelCase or param-case)
@
totalColumns
Accepted Values: string, number Default Value: 12
Set the total number of columns used to calculate the grid.
wrapperWidth
Accepted Values: string, number Default Value: "1024px"
Set the width of @wrapper element
wrapperPadding
Accepted Values: string, number, true|false Default Value: Inherit form GutterWidth
Set the padding of @wrapper element, so its external gutter. If setted to true it will inherit gutterWidth; if false it will be removed.
gutterWidth
Accepted Values: string, number Default Value: "30px"
The gutter width used in the grid.
verticalSpace
Accepted Values: string, number, true|false Default Value: Not set
Set the vertical space between columns and rows.
debugMode
Accepted Values: true|false Default Value: false
Activate debug mode for all rows: a background rappresenting the grid will be applied (like the exemple in this page).
Functions
@wrapper [width]
[width]: Width of the wrapper
Create a wrapper, fluid and centered in the page.
It also add border-box property to the element and all the children.
compiles:
@row
Create a row: better to use inside the wrapper, because it applies a negative margin to compensate wrapper and columns padding.
It also adds a clearfix.
compiles:
@col [number]
[number]: The number of cols to span this element.
Span the element for [number] cols.
compiles
@pull [number] or @push [number]
[number]: The number of cols to pull or push this element
Pull or push the element for [number] cols. Uses relative position and right or left properties.
compiles:
@clearfix
Utility to add a clearfix to an element.
@borderbox or @border-box
Utility to set an element and his children in box-sizing: border-box;.
If used outside any selector, il will apply border-box globally.
@
compiles:
@debug-grid
Utility to debug the grid with background guides.
Apply it only to a row element to prevent unexpected behaviours.