Here’s a snippet I wrote the other day that overlays the page with a typographical/layout grid when activated. Others exist, but very few, and not with the functionality I wanted, so there’s room for another.

I made it into a jQuery plugin simply to make it clear it’s dependent on jQuery: It’s not suitable for chaining (which apparently makes it a “utility plugin“).

Also, I’ve namespaced it as the rather vague ‘devTools’ in order to allow me to possibly add more tools to the plugin later while maintaining backwards compatibility. Hope you find a use for it!

Demo

Usage

Activation

$.devTools.grid(
	[columns], [column width (px)], [column margins (px)], {[optional configuration]}
);

Optional configuration

Key Notes Example Default
qs Value of query string value to look for if grid is to be activated that way. false leads the grid to be shown on load. ‘grid=true’ false
id The id used for the div containing the columns. ‘myGridContainer’ ‘browserToolsGrid’
container the element the grid is to be appended to. ‘#myContent’ ‘body’
center A boolean stating whether your website is centered. true false
color the colour of the grid. rgba is best so you can see through the grid. ‘rgba(200, 200, 100, 0.3)’ ‘rgba(204, 243, 204, 0.3)’
textColor the colour of the info text. ‘#ccc’ ‘#aaa’
outerMargins Use far left and far right margins true false
toggle Show the toggle button. false true

Example

Centered site, activated by adding ‘grid’ to the query string

$(function () {
	$.devTools.grid(16, 45, 15, {
		center:true,
		qs:'grid'
	});
});

More complex example

A double grid (with sub columns), shown by default.

$.devTools.grid(6, 158, 2 , {
	hideToggle: true
});
$.devTools.grid(6, 98, 62 , {
	hideText: true
});

Download

devTools.grid()