wocss-objects-cols

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 
 
@import '~wocss-objects-cols';

Basic usage of the Cols object uses the required classes:

<div class="o-cols">
  <div class="o-cols__col"></div>
  <div class="o-cols__col"></div>
</div>

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:

<div class="o-cols o-cols--gutter-3">
  <div class="o-cols__col o-cols__col--12 o-cols__col--6@md"></div>
  <div class="o-cols__col o-cols__col--12 o-cols__col--6@md"></div>
  <div class="o-cols__col"></div>
</div>

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

Dependencies

• wocss-settings-spaces
• wocss-tools-bem-constructor
• wocss-tools-breakpoints