wovue-cols v0.0.2

Cols

The wovue-cols module contains the grid system components.

Install using npm:

$ npm install --save wovue-cols

Note this will only works with webpack build system.

Note The wv-cols component use negative margins, you will need a root element overflowing the wv-cols component, or it will cause horizontal scroll.

Usage

require('wovue-cols/src/_components.cols.scss')

import { WvCols, WvCol } from 'wovue-cols'

new Vue({
  components: {
    WvCols,
    WvCol
  }
})

<div class="u-overflow-hidden">
  <wv-cols :gutter="4" vertical-align="middle">
    <wv-col size="6" md="2" lg="8">
      <!-- here your content -->
    </wv-col>
    <wv-col size="6" md="10" lg="4">
      <!-- here your content -->
    </wv-col>
    <wv-col size="12">
      <wv-cols :gutter="2">
        <wv-col size="3">
          <!-- here your content -->
        </wv-col>
        <wv-col size="7">
          <!-- here your content -->
        </wv-col>
      </wv-cols>
    </wv-col>
  </wv-cols>
</div>

Props

cols

col

Breakpoints