Xavi Esteve » 960s http://xaviesteve.com I'm a front end web developer and graphic designer from Barcelona based in London. I am passionate in JavaScript, jQuery, CSS, PHP, Wordpress, usability and SEO. Thu, 10 May 2012 11:45:38 +0000 en hourly 1 Blueprint CSS Watermark GIF for Pixel-Perfect Web Design http://xaviesteve.com/427/blueprint-css-watermark-gif-for-pixel-perfect-web-design/ http://xaviesteve.com/427/blueprint-css-watermark-gif-for-pixel-perfect-web-design/#comments Sat, 07 Nov 2009 00:46:34 +0000 Xavi http://xaviesteve.com/?p=427 Here’s a GIF image that will help you get pixel-perfect results when designing the template of a website. It has been designed for the Blueprint CSS framework and it is based in:

24 columns of 30px width separated by 10px spaces which make 950px width in total.

Paste it into your template with your favourite editor (Photoshop, Fireworks…) and align everything to the grid. I recommend you use Blueprint CSS or a similar 24 column based framework when developing the front-end.

Blueprint columns

Download Blueprint Bitmap (37KB)

  • 24 columns of 30px
  • separations of 10px
  • 950px total width

For a 3 column layout you would use 8+8+8 columns, for a two column layout 16+6 is good or for four boxes 6+6+6+6 columns.

Since I work in Fireworks for web design and I am a great fan of Blueprint, I will be releasing a collection of Fireworks templates ready to be modified, think as if they were some kind of PNG “framework”.

]]> http://xaviesteve.com/427/blueprint-css-watermark-gif-for-pixel-perfect-web-design/feed/ 0