jquery-vgrd

Enhance horizontal grids with a vertical pattern.

Usage

Include dependencies.

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="jquery.vgrd.min.js"></script>

Setup a grid with Bootstrap:

Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum

<div class="row vgrd">
  <div class="col-md-3 col-sm-4">
    <div class="vg-md-3 vg-sm-4"><div class="box">Lorem ipsum</div></div>
    <div class="vg-md-6 vg-sm-8"><div class="box">Lorem ipsum</div></div>
  </div>
  <div class="col-md-6 col-sm-4">
    <div class="vg-md-6 vg-sm-8"><div class="box">Lorem ipsum</div></div>
    <div class="vg-md-3 vg-sm-4"><div class="box">Lorem ipsum</div></div>
  </div>
  <div class="col-md-3 col-sm-4">
    <div class="vg-md-3 vg-sm-4"><div class="box">Lorem ipsum</div></div>
    <div class="vg-md-6 vg-sm-8"><div class="box">Lorem ipsum</div></div>
  </div>
</div>

.row.vgrd {
  margin-top: -15px;
  margin-bottom: -15px;
}

.row *[class*='vg-'] {
  padding-top: 15px;
  padding-bottom: 15px;
}

.box {
  height: 100%;
  padding: 15px;
  background: lightblue;
}

Initialize the plugin

$('.vgrd').vgrd({
  // aspect-ratio container-width
  unitRatio: 0.04751461988304
});

Options

Option	Type	Description
bindResize	Boolean	Specify whether to trigger layout automatically on window resize. Call `$('.vgrd').vgrd()` to resize manually. Default: `true`
breakpoints	Array	Specifies breakpoint detection keys. Default: `['xs','sm','md','lg']`
computeHeight	Function	Hook into the calculation routine by returning a height. Arguments: `element`, `calculatedHeight`, `containerWidth`, `unitRatio`, `patternValue`.
container	String	Provide parent container class. Defaults to `.row`.
cssPrefix	String	Specifies the prefix for vertical selector. Default: `vg-`
helperPrefix	String	Specifies the prefix for the breakpoint-helper selector prefix. Default: `visible-`
unitRatio	Float	Provides the measurement unit for vertical grid selector as proportion of container width. Default: `0.1`