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

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

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

Toggle the grid visibility with Option + G (Mac) or Alt + G (PC). Visit the demo page to try it out.

The JS file includes variables that can be reset so you can specify maximum page width, column width, column count, 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.

The SASS mixin this project started with has been moved to a GitHub Gist as this project changes to a plugin. You can find it here if you're interested.