gridOverlay, a JS Plugin for Perfect Alignment

by Steve Hickey

For the impatient, I’ll start off with the link: gridOverlay Javascript Plugin.

Why We Built It

The gridOverlay Plugin was built to solve a couple of problems. First and foremost, this is a tool for helping with the issue of aligning elements to a layout grid. If you’re using Sass to write CSS you’re probably using some sort of grid system already, but if you’re using using vanilla CSS, or just want a sanity check, you can add this JavaScript file during development to check on your layout.

The other problem it can help with is creating a baseline grid for your page. By default it shows a 24px baseline grid, but that can be easily modified in the options at the beginning of the JS file. Once you have your grid set up it’s simple to tweak values in the web inspector in your browser and then copy those back to your CSS.

Options

The available options are: maximum page width, the number of columns, 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.

The Future

Plans for the future include breakpoints for responsive grids, a control panel rendered in the DOM for altering options on the fly and a bookmarklet for quick checks without downloading/installation.

About Steve Hickey

Steve is a UX designer who also happens to be a skilled beer brewer and cook. He got his start in print design, soon adopted...