Blueprint CSS Watermark GIF for Pixel-Perfect Web Design

by
on November 7, 2009
(1 minute read)

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:

Simple Cloud Hosting Built for Developers

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

I’ve got invites for a free bank transfer!

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”.

Looking for cool gift ideas? TrendLiker.com lists hundreds of nice items and lets you know when they go on sale on Amazon.

Did you enjoy this article?

Thank with a coffee ☕

Or help me out by clicking one of these buttons:

    
    

3 comments

  • Chris Cavalluci says:

    Xavi- Thanks for putting together the PNG file. Can you explain a how the naming of the objects and layers relate to the CSS IDs or classes?
    Thank you.

  • Henriko says:

    Hi Xavi! Thanks for sharing this fine PNG file. I’m also a new BIG fan of Fireworks and its productivity tools.
    Cheers!

  • Xavi Author says:

    Updated the download links, they should work again :)

Follow me for cool new products and interesting findings on graphic design, web development, marketing, startups, life and humor.


/*Twitter*/ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); /*Facebook*/ (function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=28624667607";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk')); /*Google+*/ window.___gcfg = {lang: 'en-GB'};(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
Airbnb 25€ discount