Links to Blueprint Resources

by Lee Honeycutt (honeyl@iastate.edu)

Blueprint CSS Framework

Blueprint Home - homepage on Google Code describing the framework and providing all CSS files.
Blueprint Google Groups - open-access group site that includes links and discussion of Blueprint development.
Blueprint Compression Script - Josh Clayton's excellent overview of how to customize Blueprint using the compression script. Benefits include setting project-specific details in a central file, exporting CSS to remote locations, defining namespaces, making customized layouts and grids, and creating semantic IDs to accompany Blueprint's non-semantic classes.
Blueprint Grid Generator - web-based interface that allows you to change the number of grid columns used in BluePrint development.
Liquid Blueprint - Andrei Herasimchuk's modification of Blueprint for creating liquid pages. Based on work at Involution Studios.
First Impressions of Blueprint - a graphic designer/web developer gives his first detailed impressions of using Blueprint for page design.
Blueprint with modified reduced reset - Christian Montoya's Blueprint modifications in which he replaces Eric Meyer's reset with a reduced reset of his own.
Boilerplate - a stripped-down version of Blueprint that boasts purely semantic CSS.

Quick Blueprint Tutorial - a brief tutorial from the Google Code site.
Blueprint Cheat Sheet - a printable PDF reference sheet showing all the Blueprint classes.
BlueFlavor's intro tutorial - a very good introduction and tutorial of BluePrint.
Hands On Blueprint - brief explanation, then several examples for creating columns, forms, and buttons.
How to use a grid in a Layout - good tutorial from Khoi Vinh.
Setting Type on the Web to a Baseline Grid - excellent article from A List Apart.

Photoshop grid file - a 24-column grid with guides for developing webpages in Photoshop for use with Blueprint.
Semantify - Christian Montoya's online tools for translating Blueprint CSS into semantic classes and IDs.
Blueprint Layout Tool .04 - Don Albrecht's online tool for constructing Blueprint layouts. Very confusing at first, but basically you can drag and drop columns to create custom grid and then copy the source code.
Silksprite - a Blueprint plugin providing the Popular Silk Icon Package in CSS Sprite form to improve peformance and ease of use.
CSS Mixin - a simple PHP library for mixing CSS classes together to produce more semantically meaningful styles. Example includes a Zen Garden-Blueprint demo.
Blueprint CSS AIR Grid Tool - an Adobe AIR application that places a transparent baseline grid over the browser window.
Eric Meyer's CSS Diagnostics - a CSS diagnostic stylesheet that can catch errors that most validators don't.
Big Red Angry Text - a snippet of code you place in your own external CSSheet to validate your code as you go. Text lights up when it finds an error.

Grids are Good - PDF presentation by Khoi Vinh and Mark Boulton on the use of grid systems in website design.
Grid Computing and Design - Mark Boulton's introduction to the use of grids in grpahic design.
Five Steps to Designing Grid Systems - Boulton's five-part series on using grid systems in print and website design.
Christian Montoya's CSS Techniques - good solid techniques for implementing full use of CSS on wesbsites.
Grid Calculator - online tool for calculating grid columns and gutters for Blueprint use. The first step before making Photoshop grid files.
Grid Tips for Photoshop Users - how to set up quick grids and guides in Photoshop.
GridMaker - a Photoshop script for creating columns and rows for Photoshop guides.
Grid Designer 2 - another online grid generator
Grid Maker - yet another online grid generator (not the same as the one above)
Semantic Image Replacement - describes how to use graphic images to replace h1-h6 elements and still maintain accessibility.
How to size text using ems - describes a method of setting the type selector to 62.5% so that 1 em = 10 pixels for all other type.