A raw JavaScript plugin that creates an overlay on your site for easy alignment of design elements to your grid during development.
CSS JavaScript Ruby
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
images
javascripts
stylesheets
.gitignore
README.md
index.html

README.md

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 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). Visit the demo page to try it out.

Options

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.

Please Note

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.