Blueprint is both a CSS Framework and an album by the legendary hip-hop artist Jay-Z. In this article, I am going to be writing about the Blueprint CSS Framework, which provides "a solid CSS foundation to build your project on top of, an easy-to-use grid, sensible typography, and a stylesheet for printing". This is my first experience with a CSS Framework, so I am going to test-drive Blueprint by writing this article using it, starting with an empty file in TextMate. So let's do this.
These days the word framework is being used all of the time, but usually it's in reference to a web development framework like Ruby on Rails, Django, or Spring. "CSS Framework" is a relatively new term used to describe a framework intended to be used by designers rather than back-end programmers. Frameworks like Django and Rails free you from the boring, repetitive stuff that is required by every web application -- tasks like building an authentication system, creating a database abstraction layer, and organizing your code so that it is maintainable and secure. Rather than having to make these kinds of decisions over and over again, a framework takes care of these decisions for you so that you can focus on the Fun Stuff -- the needs of your individual application.
A CSS Framework provides these same benefits to designers, allowing for RWD, an acronym which I just pulled out of my ass for the sole purpose of testing out how the acronym tag looks (Who knows, maybe it will catch on). So rather than banging your head against the wall trying to figure out why your page looks like %$@! in Internet Explorer when you don't even know what the word typography means, you can let Blueprint handle all of this for you. This will give you more time to focus on the fun, creative stuff.
When you first start using Blueprint, the most important concept to understand is the "grid". The best way for me to explain this is by comparing the "grid" to something else that is grid-like -- an HTML table! Dun dun DUN! That's right, I said it. "Table" is some kind of bad word to web standards evangelists, but it helped my understanding to compare the Blueprint grid to a table. In fact, let's see what a default table looks like in Blueprint:
| Col 1 | Col 2 | Col 3 | Col 4 | ... | Col 24 |
|---|---|---|---|---|---|
| Behold! I am a header div, so I span all 24 columns! I take up the an entire row in this container! | |||||
| Well I am the main content, so I will span 16 columns! | I'm just a sidebar, so I'll be 8 columns | ||||
| I span 8 | Me too | Me three! | |||
| Well the footer deserves to span the entire 24 columns as well! | |||||
Note: This table was created for demonstration purposes. The HTML source of this table does not accurately portray the text in its cells. This little side note you are reading is an example of what you can do with the Blueprint typography plugin, which we will discuss in a moment. Cool, huh?
So the grid is analogous to the small table above -- except it's a 950 pixel wide "container" that is divided into 24 columns, each spaced 10 pixels apart. Using Blueprint, you can place "column" elements on the page with great precision and give each column a "span" (the span of each column is analogous to the colspan attribute of a td tag) to specify how wide the column should be. So to create a simple layout using Blueprint, I would:
Enough of the jibber-jabber and analogies, let's break it down step-by-step and see what the actual markup looks like for the layout described above.
After downloading the latest version of Blueprint from Google Code, unzip the file and copy the blueprint subdirectory into a directory called "css". Then create a new HTML file in the parent directory (above css) and include the Blueprint CSS files like so:
You can optionally include your own CSS files after the Blueprint CSS files to override the default styles and make your own customizations if necessary.
Create a div with a class attribute of "container". Inside of this div, create header and footer "columns" that span the entire 24 rows of the container:
To finish off the layout, create two additional divs, one for the main content of your page, and one for a navigation box that will float on the right side of the page. Notice that the navigation div has a "last" class, which is important because it tells Blueprint that this is the last column on that row.
And that's all there is to creating a simple layout with Blueprint! Wasn't that easy?
In addition to simplifying layouts, Blueprint also makes your forms and fonts look nice without all the hassle. The form below is an example of what a simple form looks like when created with the appropriate Blueprint classes. The markup is extremely simple, and I only added a couple of lines of custom CSS to make my form look like the one below:
Blueprint also comes with a number of handy dandy classes for displaying notifications or "flash" messages in a way that is clear and colorful.
The buttons in the form above are not included in the forms.css file, but are included in a Blueprint plugin. Plugins allow other designers to drop in custom CSS, which may include additional styles for buttons, fonts, and other customizations. The "buttons" plugin comes with Blueprint. To use it, all you do is import its .css file from within the main Blueprint screen.css file -- it's like importing a Python module.
Blueprint also comes bundled with a fancy-type plugin that includes such features as "incremental leading", which is useful for including small side notes like the ones in this article.
The Blueprint CSS Framework looks very promising, and I was excited that I was easily able to create a clean design in no time. Now people like me who aren't experts in typography and obscure browser problems can quickly create new designs that are both attractive and are ensured to look the same across all browsers. Bundle this with a solid web framework like Django and you have a solid foundation upon which to build the next killer web app. Awesome!