Skip to content

freshtilledsoil/gridOverlay

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published