Check out my new project, Practical Service Design!
User Experience at Hello Erik

Grid based CSS: Bluprint CSS Framework

Posted May 16, 2011

I recently started spinning up HTML projects using the Blueprint CSS framework. It’s quite a fascinating way to construct your page. I have been familiar with the 960px “safe” width for visitors who are on a 1024×768 resolution monitor, and often prepare my Photoshop documents to adhere to that standard. I even would go so far as to do the design work in the 960 grid format, in Photoshop. But when it came to the HTML, I’d just construct the CSS and divs as needed and not worry about a framework.

Many sites are built this way – you build exactly what you need based on your design. And if that original Photoshop file happens to conform to a width standard or grid configuration, all the better. But I hadn’t really made the jump to using the CSS grid. framework. I don’t really have a good reason as to why… most likely it was something I wanted to do, but probably needed to get a project out the door and delivered to a client/supervisor/ceo or whomever. But it was time to catch up with the rest of the whiz-kids who are using the HTML (pronounced Hot-Metal) and CSS (pronounced “Sis”) and PHP (pronounced “fup”).

How the Blueprint Works

This is it. There’s more to the screen.css file that comes with the framwork, but essentially this image is the crux of how the system works. At first, it can be pretty confusing. It really isn’t. And I intend to show that here.

First, you can see the container class right at the top. Everything else lives inside this container (almost always a div). It is 950px wide, and auto centers on the page.

What? 950 pixels? I thought you said 960 pixels? Well, the author of the Blueprint framwork chose a container that is 950 pixels wide instead of 960. There’s no different here – the 960 width contains a 5px padding on each outer edge (giving you that 10 extra pixels of width). What this does is make the horizontal scrollbar on your browser appear with a 5 pixel buffer for your content. With the 950px container, the browser won’t show the horizontal scrollbar until the content touches the browser edge. Some may car, some may not. If you want your “crushable” area to be the 960px width (950px with 5px on each side), you just need to add:

This will add the 5px to each side, while still maintaining the 950px inner dimension of the container so all the blueprint spans (which are div widths, not the CSS attribute “span” which is a point of confusion). Also, be sure to remember how the collective widths of margins, paddings, and borders work. Since we want the inner content of the .container div to be 950px, we don’t add a margin, we add a padding. This will make the browser look at this as a 960px block level element (950 + 5 +5).

That was a little bit of a tangent, but a few people have asked me about the difference between Blueprint and 960Grid. Essentially, not much. They both work on the same principle that the site should fit within a 950px usable content area. Some naming conventions and decisions on margin and padding are different, but that’s a different blog post altogether.

Moving on. So you can see there are 24 columns, each 30px wide with a 10px right-margin. They all float left. The 24 column span, since it is intended to go the full width of the container, has the margin-right set to 0px. This makes the 24 column span the 950px exactly. Each column that is smaller than that has a 10px right margin.

Now, there’s another important essential to using the grid. The .last class. This is a class that is just:

You add this to the final column in your row, and it shaves off the right margin (just like the 24 column div).

A Simple Example

So let’s get right to a very easy example of how this could work. Say you want to have a section of your layout that is 3 sections, two narrow ones and then a wide one. Since we are using a 24 column system, you can do any combination, but let’s use something easier. Section 1 will be 4 columns wide, section 2 will be 4 columns wide, and section 3 will be 16 columns wide. 4 + 4 + 16 = 24. So here is how it would be coded:

Take note of the third section. It has the .last class put in it. This is because there is a 10 pixel right-margin gutter on the end of each span that isn’t the span-24. So if you add the pixels up, you get 150px + 150px + 630px = 930px. But we’re 20px short! That is because the first 2 sections have the 10px right-margin, so really it looks like this: 150px +10x +150px +10px + 630px + 10px -10px = 950px. The span-16 630px column does have a 10px right margin, but the .last class removes it, so it put it as -10px in the little sum above.

So right there, you’d have a 3 section layout. And if you build your graphics in the grid format, which there are PSD templates for Photoshop, your graphics and content will be able to be placed into the HTML/CSS very quickly. Surprisingly quickly.

Here’s what the Photoshop template looks like (click for full size):

So as long as you’re working with this grid layout, you can just fly through taking your designs into HTML and CSS. I had thought I was pretty fast with the hotmetal code, but once I started using Blueprint for appropriate projects (it’s not for everything… more on that later), things started being built much faster, and cleaner. There are alot more options in the screen.css file, but the basics just require the knowledge of how the columns work, and making sure your content fits inside.

With that explained, you aren’t constrained by the grid completely. It’s not mean to be a design framework, only a layout framework. You could use the blueprint css to construct the boundaries and sections of your site before you add any content or graphics at all. All it is doing, so far, is constructing an invisible grid and frame for your content to be placed in to. From here, it’s to your discretion as to how you want to populate your page.

Caveats

Now, there are some caveats I’ve ran in to that I hadn’t thought of until I ran into them as minor problems.

1. Borders add to the outside width of a block element. What this means is that if you wanted something to have a 1px border, you have to put a new block level element (a div probably) inside the blueprint div. Why? Because the blueprint div has a set width that is made to fit perfectly within the system, but if you add a border, that adds 1 pixel to each side, and breaks the whole row, since it all floats left.

2. Due to the left floating of everything, often to maintain the layout you want, you have to include wrapper divs around your content. Basically, what you do is figure out where your “row” of columns is, and wrap it all in a span-24 div. What this does is essentially put a 950px wrapper around your columns, so that if there are float problems, the content below the wrapper doesn’t get messed with. The code looks like this:

What I did above was create two rows, each with two different sections. The first row is a 3 and 21, the second is a 17 and a 7. Each of those sections is wrapped in a span-24 full width column (note that the last section in each row still needs the .last class).

I have started to use the full width span-24 class to wrap things where I want disparate sections of content, it helps keep the floats clean (hah) and prevents alot of needless blueprint wizardry to do something which should be very simple. While it might be kludge (I am not sure), it does really make things fast.

Conclusion

Other than those 2 things, I’ve found blueprint to be a very flexible way to do front end HTML and CSS layouts, especially considering how easy it is to take a PSD that is already designed to fit in the grid. In fact, right now I am in the process of designing interfaces and front end design for a large browser-based interactive application, and the software engineers have loved it. It’s so easy to create a component library in the blueprint framework, and the engineers are able to take it and easily take it from HTML mockup templates into working PHP.

If anyone has any questions or comments about Blueprint, I’d love to discuss them. In the meantime, download the files from blueprintcss.org and give it a try. You may like it, you may not, but either way I bet you’ll learn alot about CSS that you might not have thought of before.

Pro Resume Critique or Phone Consultation from me!
Get professional tune-up and expert advice!
Resume Reviews – Consultation Calls
I love all things experience design. I work as a Principal Service Experience Designer at Intuit in Mountain View, CA.