Intwo

Grids are a designers best friend. Trusting, working with, and breaking the grid are all things that you should be familiar with if you are doing communication design. In most graphics programs it is easy to set this up and there are many different ways to do it. When working with the web, though, there are not as many commonly known tools to achieve the pixel perfect results that you want.

There are increasingly more frameworks sprouting up that give you flexibility to work with a solid, cross browser grid with ease. For a lot of these you can find Photoshop, OmniGraffle, or Illustrator templates that will allow you to design with the grid that you will be working with. Once finished the design process, though, I am not aware of anything to guide you through the rest of the development.

Last week I went on a search and found a few resources to create a grid overlay in your browser. I found this, this, and this. What I found to be the most flexible, though, was Allan Jardine’s ‘Grid’ bookmarklet. It grabs a little widget that overlays on top of the site that you are viewing and allows you to structure a grid on top of it with whatever parameters you want. I thought that it might be a pretty useful tool, but still didn’t necessarily help me as I like to edit my CSS in cssEdit and it doesn’t have the option to use bookmarklets.

To circumvent that minor problem I did the following:

1. Added a “Grid” button in my header file:
   <a id="grid_overlay" href="#">GRID</a>
2. Styled it to be out of the way:
   a#grid_overlay {
   color: #252525;
   text-decoration: none;
   position: absolute;
   padding: 5px;
   top: 0px;
   left: 0px;
   }
   
   a#grid_overlay:hover{
   background-color: #33ffcc;
   color: #fff;
   }
3. Used jQuery to select the button, and ran Allan Jardine’s bookmarklet code.
   function fnStartGrid(sUrl) {
   var nScript = document.createElement('script');nScript.setAttribute('language','JavaScript');nScript.setAttribute('src',sUrl);document.body.appendChild(nScript);
   }
   
   $('#grid_overlay').click(function(){
   fnStartGrid('http://www.sprymedia.co.uk/design/grid/media/js/grid-loader.js');
   return false;
   });

The one obvious downfall to this is that it has to pull code from his server, and therefore you need an internet connection to use it, but it has been helpful to me, so I thought that I would share.

This entry was posted on Saturday, February 21st, 2009 at 9:42 pm and is filed under design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.