visible-grid

What is it?

visible-grid makes it easier to develop and design beautiful web applications by making your grid system visible while you work.

Configure as many grids as you want. They are saved to localStorage, so you can use them on any page your working on. Resizing is taken care of automatically, so if you have a responsive set-up simply resize to see the grid at that width.

Quickly toggle the UI and grid with the “u” and “g” hot-keys. You can programmatically add, remove and reset grids too.

You can get the script via bower install visible-grid.

How do I use it?

The easiest way is to use this bookmarklet.

Otherwise, you can add the JS to your page. It's all packaged in there.

<script src="visual-grid.js" type="text/javascript">

Then you can create a new instance on your page.

var myGrid = new Grid();