This module has been DEPRECATED
The module has been renamed to wocss-objects-grid
Cols
Object
The wocss-objects-cols
module contains cols object
, a powerful grid system based on Flexbox.
Install using npm:
$ npm install --save wocss-objects-cols
Note The cols object
use negative margins, you will need a root element overflowing the cols object
, or it will cause horizontal scroll.
Usage
With a tool like webpack you can import this module writing:
// dependencies imports ;
Basic usage of the Cols object uses the required classes:
Modifiers
cols
o-cols--stretch
columns with same height.o-cols--middle
columns with vertical centering.o-cols--gutter-[1|2|3|4|5|6]
alter spacing between columns, see gutters value below.
cols__col
All modifiers may be prefixed with @[xs|sm|md|lg|xl]
by default, see breakpoints value below.
o-cols__col--auto
o-cols__col--fit
this column will take up the remaining space available.o-cols__col--[1|2|3|...|12]
if you want to change the size of a single column, you can use one the following classes.
For example:
Values
Breakpoints
Key | Value |
---|---|
xs | 320px |
sm | 480px |
md | 768px |
lg | 992px |
xl | 1200px |
Gutters
Key | Value |
---|---|
1 | 0.25rem |
2 | 0.5rem |
3 | 1rem |
4 | 2rem |
5 | 4rem |
6 | 8rem |