A couple of months ago I made a video (see below) on making layouts with Blueprint in which I only covered the “span-*” classes, lately, I’ve been getting comments on the vid and emails asking me what else one can do with blueprint.
As with any framework I recommend that you learn the language first, in this case CSS. I don’t know if Blueprint has any official documentation but the truth is that it’s not needed, after you watch my video and look at the source code of this framework you should be able to figure out what each class does, I chose blueprint over 960 CSS for several reasons, but one of the most important ones was that Blueprint had names for classes that “made sense”, in my opinion.
The names of classes for the grid (layout) are “span-*”, “prepend-*”, “append-*”, “push-*” and “pull-*”, not literally of course, you would replace the asterisk with a number that represents that number of colums you want to use.
In my video I used only two files “screen.css” and “ie.css”. The “ie.css” makes your layout compatible with Internet Explorer and must be placed below the “screen.css” file. The “screen.css” file is actually several files combined into one, it includes “grid.css”, “forms.css”, “reset.css” and “typography.css”. These files are inside the folder “src”, short for “source” I guess, in your blueprint folder. The benfit of these files been separate is that you don’t have to use all of them, just the one (or two or three) that is suitable for your site. Let’s talk about watch each of these files does, although by the name you can probably infer what they do.
reset.css – A must have
This file resets all your margins, padding, borders etc to zero. Regarless of wheter you use blueprint or not you should ALWAYS use a reset file so that you won’t have to “tweak” your code because of 20 extra pixels in IE that don’t show in other browsers.
grid.css – For easy compatible layouts
This is the file that has the classes, prepend, append, span, pull, push that are necessary to make layouts.
forms.css – Make those input areas look good
forms.css is my second favorite, after grid.css, because it comes with a set of classes for (you guessed it) forms. My favorite classes in this file are “text” and “title” which can be used for input of type text, it also has styles for fieldsets, textareas and even notices that help you communicate with the user ( I will cover this file deeply in my next post so stayed tuned 😉 )
typography.css – Style that font.
There is really nothing to say about this file other than that it styles your site’s font. You may not want to use this file in your site, unless you like the like the font style it gives to your pages.
Remeber, like I said, that if you want to use all these files you can use screen.css and don’t forget to include ie.css.
httpv://www.youtube.com/watch?v=KHLrEF9tHjw