wocss-objects-grid

4.0.2 • Public • Published

This module is DEPRECATED

This module has been moved to the monorepo wocss (and renamed to @wocss/objects-grid)

GRID

Object

The wocss-objects-grid module contains the grid object, a powerful grid system based on Flexbox.

Install using npm:

$ npm install wocss-objects-grid --save

Note The grid object use negative margins, you will need a root element overflowing the grid object, or it might cause horizontal scroll.

Usage

With a tool like webpack you can import this module writing:

@import '~wocss-objects-grid';

Basic usage of the Grid object uses the required classes:

<div class="o-grid">
  <div class="o-grid__item"></div>
  <div class="o-grid__item"></div>
</div>

Note The grid object should be complemented with the wocss-utilities-widths module, for example:

<div class="o-grid">
  <div class="o-grid__item u-12/12 u-6/12@tablet"></div>
  <div class="o-grid__item u-12/12 u-6/12@tablet"></div>
</div>

Modifiers

.o-grid

  • o-grid--stretch items with same height.
  • o-grid--middle items with vertical centering.
  • o-grid--gutter-[1|2|3|4|5|6] alter spacing between items, see wocss-spaces variable.
  • o-grid--gutter-x-[1|2|3|4|5|6] alter spacing between items on x axis, see wocss-spaces variable.
  • o-grid--gutter-y-[1|2|3|4|5|6] alter spacing between items on y axis, see wocss-spaces variable.

.o-grid__item

  • o-grid__item--auto the width of this item is based on its content width.
  • o-grid__item--fit this item will take up the remaining space available. (modifier applied by default)

For example:

<div class="o-grid o-grid--gutter-3">
  <div class="o-grid__item"></div>
  <div class="o-grid__item"></div>
  <div class="o-grid__item"></div>
</div>

Dependencies

Readme

Keywords

Package Sidebar

Install

npm i wocss-objects-grid

Weekly Downloads

1

Version

4.0.2

License

MIT

Unpacked Size

5.51 kB

Total Files

3

Last publish

Collaborators

  • wochap