gridOverlay javascript plugin

A raw JavaScript plugin that creates a flexible overlay on your site for easy alignment of design elements to your grid during development.

Include the Code

Grab the file/code from Github and call it at the end of your document:

<script src="javascripts/gridOverlay.js"></script>
</body>
</html>

Demo

Toggle the grid visibility with Option + G (Mac) or Alt + G (PC). Try it now to see.

Options

The JS file includes variables that can be reset so you can specify maximum page width, column width, column color, gutter width, baseline height, baseline color and whether or not the grid is visible on page load or has to be toggled on.