Development grid for gr8
npm i gr8-dev
var gr8 = require('gr8')
var dev = require('gr8-dev')
var rst = require('recsst')
var css = gr8()
rst.attach()
dev.attach()
css.attach()View grid html
<div data-gr8-dev="data-gr8-dev" class="dn">
<div class="psf w100 h100 t0 l0 pen dev px1">
<div class="fl h100 c1 p1">
<div class="h100 w100"></div>
</div>
<div class="fl h100 c1 p1">
<div class="h100 w100"></div>
</div>
<div class="fl h100 c1 p1">
<div class="h100 w100"></div>
</div>
<div class="fl h100 c1 p1">
<div class="h100 w100"></div>
</div>
<div class="fl h100 c1 p1">
<div class="h100 w100"></div>
</div>
<div class="fl h100 c1 p1">
<div class="h100 w100"></div>
</div>
<div class="fl h100 c1 p1">
<div class="h100 w100"></div>
</div>
<div class="fl h100 c1 p1">
<div class="h100 w100"></div>
</div>
<div class="fl h100 c1 p1">
<div class="h100 w100"></div>
</div>
<div class="fl h100 c1 p1">
<div class="h100 w100"></div>
</div>
<div class="fl h100 c1 p1">
<div class="h100 w100"></div>
</div>
<div class="fl h100 c1 p1">
<div class="h100 w100"></div>
</div>
</div>
</div>In the browser you can now press w to toggle the grid or d to toggle dev styles.
Appends grid to dom and attaches event listeners for toggling the grid and dev styles.
| option | default | controls |
|---|---|---|
| wrapClass | 'px1' |
grid wrap class, handy for page gutter |
| wrapAttrs | {} |
additional wrap attributes, handy for responsive |
| colClass | 'p1' |
column wrap class, handy for column gutter |
| colAttrs | {} |
additional column attributes, handy for responsive |
| visible | false |
initial grid visibility |
Removes grid from dom and removes event listeners.