Pisake Cho's mashup design is design exploration through digital edge

reset.css This file sets sensible defaults across all browsers. I’m sure we are all familiar with starting a new project, going to our main CSS file and adding a few default styles to the body selector, such as ‘margin: 0; padding:0; font-family: Helvetica, Arial, sans-serif;’ or something along those lines. This is what reset.css does, and more. It resets default styles for spacing, tables, fonts, etc. so you can work from a clean slate.

typography.css This file sets up some nice default typography. I won’t explain all of the styles but I will say that this is my favourite parts of Blueprint because, to me, there is nothing more discouraging than trying to lay out a page and seeing some black Times New Roman text jammed up into the top left corner of a page. Ugh. Blueprint’s typography.css keeps me from ever seeing that again. The typography.css also sets up some really nice styles around font sizes, line-heights, default styling of tables, etc.

grid.css This file handles the grid layout portion of blueprint. We will have a look at the classes that it uses in a bit. One important thing to note with the grid, by default it uses a width of 950px, with 24 columns each having a width of 30px and a 10px margin between columns. This may sound constrictive, but if this is not the layout you want, you can always use a Blueprint Grid CSS Generator to generate a custom grid layout. If this last paragraph completely confused you, please read on as we will build a layout using a grid in a bit. If you are not familiar with CSS grid layouts and want some background, Raj’s Which CSS Grid Framework Should You Use for Web Design? is a good intro.

ie.css Blueprint supports IE, so of course it needs it’s own specific stylesheet to take care of those little details that makes IE so special The nice thing is that Blueprint does handle this for you, so all of its core styles will work in all of the major browsers (I think it even supports IE 5).

print.css This file sets some default print styles, so that printed versions of your site looks better than they usually would. The print.css file also has an option where you can fill in your domain name so that relative links are shown in parentheses behind the text link in the printed version of your page. Without filling in this section only remote links will print properly. Check out the bottom of the print.css src file, linked above.

forms.css This file provides nice looking default forms as well as classes for error notifications or even flash notifications if you are using something like Rails. Since this is the only section I will not cover in more detail, here is some of the default form styles in use:

No. Blueprint comes with three compressed stylesheets for your HTML pages, screen.css which contains #’s 1-3 & 6 from above, print.css, and ie.css. The reason that I outlined the different parts of the framework above is because the framework is modular, each of those pieces works independently of each other. The nice thing about this is that if you decide that one aspect of Blueprint, such as a grid layout, doesn’t fit your project but you still want the benefits of reset.css and typography.css, you don’t have to use the the grid but the other styles will still work.