Activate the Govias Grid 16 April 2010

The year is 2010AD and Reevoo has a new designer, sent from the future to make things more nice looking than they previously were.

This new “Govias” brought with him a grid exactly 960 pixels wide, with a 10px gutter on each side, and several columns of 60px separated by gaps of 20px. Apparently it's not rocket surgery (designers have been doing this stuff for years), but the developers were astounded by how this grid was the root of all alignment.

We call it the Govias Grid.

So now all our front end work should align it's self to the grid, as all the design work aligns with the grid. This left us with one question. Where is the grid?

Where is the grid?

In photoshop Govias had the grid, and aligned stuff to the grid. Life was good. But as soon as the designs left on their journey to the developers all grid was lost (I don't/won't have Photoshop on my machine). So we got sloppy.

Mumblings of “close enough” and “just nudge it left a bit” were heard. Flipping between tabs had titles in different positions, confirming alignment between browsers became a massive pain. A new approach was needed.

A new hope.

A developer by the name of George Brocklehurst decided he could make a difference, he knew javascript and owned a text editor, a bookmarklet was born:

ACTIVATE THE GOVIAS GRID.

We used this to build the new [Reevoo Plus][http://www.reevoo.com/account] section of the site. Check it out with the bookmark enabled to see exactly how we used it.

What about your site?

So you like this idea? Then you should have put a ring on it… erm… what I mean to say is that you should use the source below, and adapt it to use a different grid, possibly with different alignment. The code is fairly self explanatory, after all it really isn't brain science.

Source code:

javascript:
if( !window.goviasGrid ){
  window.goviasGrid = document.createElement("div");
  document.getElementsByTagName("body")[0].appendChild(window.goviasGrid);
  window.goviasGrid.style.background = "url(http://tomlea.co.uk/assets/the-grid.png) repeat-y 50% 0";
  window.goviasGrid.style.width = "100%";
  window.goviasGrid.style.height = "100%";
  window.goviasGrid.style.position = "fixed";
  window.goviasGrid.style.top = "0";
  window.goviasGrid.style.bottom = "0";
  window.goviasGrid.style.left = "0";
  window.goviasGrid.style.right = "0";
  window.goviasGrid.style.display = "none";
  window.goviasGrid.style.zIndex = "99999";
  window.goviasGrid.onclick = function(el){ window.goviasGrid.style.display = "none"; };
}

if( window.goviasGrid.style.display == "none"){
  window.goviasGrid.style.display = "block";
}else{
  window.goviasGrid.style.display = "none";
}

undefined;