Enhance horizontal grids with a vertical pattern.
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:
<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
});
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` |