wocss-objects-cols

1.0.1 • Public • Published

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

Package Sidebar

Install

npm i wocss-objects-cols

Weekly Downloads

0

Version

1.0.1

License

ISC

Last publish

Collaborators

  • wochap