gr8-dev v0.0.2

ⓖⓡ⑧ DEV

Development grid for gr8

npm i gr8-dev

Example

var gr8 = require('gr8')
var dev = require('gr8-dev')
var rst = require('recsst')

var css = gr8()

rst.attach()
dev.attach()
css.attach()

<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.

API

gr8dev.attach(options)

Appends grid to dom and attaches event listeners for toggling the grid and dev styles.

gr8dev.detatch()

Removes grid from dom and removes event listeners.