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.
The easiest way is to use this bookmarklet.
Otherwise, you can add the JS to your page. It's all packaged in there.
Then you can create a new instance on your page.
var myGrid = new Grid();
This example shows Bootstrap’s 12 column grid. Resize your browser to demo the grid at different sizes.