Alex Dunae

Respecting the Grid in HTML (and Making Your Designer Happy)

I made Nik, the design half of Dialect, really happy a few weeks back. You see, he’s meticulous, as any good designer should be, and sticks strongly to a grid system when designing sites. I sometimes (inadvertently) miss a few things when coding up his files, and I think my interpretations of the grid have driven him to drink on occasion.

My usual workflow is this:

1. Turn on the guides in the source Illustrator file and do a little reconnaissance
2. Write a page’s markup in a static HTML file
3. Position and size all the content elements
4. Position and size the type
5. Add any dynamic behaviours
6. Add all the colours, backgrounds, icons, etc…

In an effort to do a little professional development, I finally decided to recreate the Illustrator guides in my HTML file using a PNG file mixed with a sliver of JavaScript.

Here’s my working file before:

And here it is after pressing ‘g’ to toggle the grid view:

You can see a live demo right here.

This simple addition cutout countless rounds of revisions and has actually made my job a lot easier. The code to accomplish this is nice and straightforward, and easy to strip out when you go live.

In my CSS file, I declare the grid styles that will appear when the body has the debug class.

/* the main grid */
.debug #container { background-image: url("grid.png"); background-repeat: repeat; }
 
/* light box for base elements */
.debug #header, .debug #viewer, .debug #footer {
	background-color: #d9d9d9;
	opacity: .8;
}
 
/* dark box for overlayed elements */
.debug #header .nav, .debug h1, .debug #footer .section {
	background-color: #b9b9b9;
	opacity: .8;
}

The JavaScript simply listens for someone to press g and then toggles the debug class on the body element. (N.B. I’m using jQuery in this example.)

$(document).ready(function () {
	$(document).bind('keypress', function (e) {
		if (e.which === 103) {
			$('body').toggleClass('debug');
		}
	});
});

Of course, you can see all this on the demo page.

Incidentally, as I was drafting this post New York Times designer Khoi Vinh announced his nifty Basic Maths WordPress theme, which has this exact same feature. Needless to say, I think he’s brilliant.