CSS Demos

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 designers with a solid CSS foundation, including 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. For the best learning experience, download the example code first, so you can see the final article marked up using Blueprint.

Download The Example Code

What is a CSS Framework?

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 targeted at developers (eg. 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 made up (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. Blueprint provides sensible defaults that are sure to jump start your design process.

The Nitty Grid-dy

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:

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:

1. Create a new HTML file and include the base Blueprint CSS files
2. Create a div “container” that would be the outer wrapper of my page
3. Create a header “column” of span 24 that would cover an entire row
4. Create a main content “column” of span 16, which would take up 2/3 of the next row
5. Create a sidebar “column” of span 8, which would take up the other 1/3 of the row. I would also specify that this column is the “last” element in the row.
6. Create a footer “column” of span 24

Show Me the Code

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.

Download and include the Blueprint CSS Files

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 container grid and divide it into columns

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:

Create a content area and a sidebar

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! Notice I didn’t actually write any CSS myself. Wasn’t that easy?

Fancy Forms

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 image above. Here’s the source:

What about notification messages? Blueprint has you covered there also. Check out these handy dandy classes for displaying notifications or “flash” messages in a way that is clear and colorful:

Plugins

Blueprint has a plugin system that allows other designers to drop in custom CSS, which may include additional styles for buttons, fonts, and other customizations. The buttons in the form shown above are not included in Blueprint’s main forms.css file, but are included in a Blueprint plugin. To use a plugin, all you do is import its .css file from within the main Blueprint screen.css file — it’s kinda like importing a Python module. Once you have imported the plugin, its specific classes and customizations become available.

Another useful plugin is “fancy-type”, which includes such features as “incremental leading”. This is useful for including small side notes on paragraphs and other textual enhancements.

Conclusion

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!