Tuesday, August 14th, 2007

Blueprint CSS Framework: Typography matters

Category: CSS, Framework

Olav Bjorkoy recently launched Blueprint CSS, a framework that takes typography into account.

Why did Olav create it?

After reading an article by Jeff Croft on frameworks for designers, I started looking at the existing CSS frameworks, trying to find one that was right for me.

Never again was I to repeat the tedious task of creating a grid from scratch, defining default typography, or battling with inconsistent default browser CSS.


Here’s some of the features Blueprint brings to the table (not

, mind you):

  • An easily customizable grid
  • Some default typography
  • A typographic baseline
  • CSS reset for default browser styles
  • A stylesheet for printing
  • No bloat of any kind.

Many people have gotten excited about it, includein Mark Boulton:

What a list! Now, if you just put the first point aside, the core features of Blueprint bring together some of the best typographic design thinking on the web over the past year or so. Eric Meyer’s reset code is in there, Richard Rutter’s Vertical Rhythm theory, Jeff Croft’s ideas on managing a CSS framework.

Going back to the grid—and this is what really interests me—Olav has used Khoi Vinh’s theories and practice on grid design to great, practical use. What is so important about this CSS framework to me is that it has been designed to solve a design problem, not a technical problem. As all great systems, it has been designed to help and guide the designer. As you can tell, I’m already a big fan.

Posted by Dion Almaer at 12:40 am

3.8 rating from 68 votes


Comments feed TrackBack URI

this is for lame programmers who don’t know how to write proper
CSS code themselves.

there are a lot of unneeded stuff in those CSS files from Blueprint.
nice idea though for noobs who don’t know jack shit CSS and can
learn some good things from the architecture of the files included.

all in all, this is useless.

Comment by Vsync — August 14, 2007

@Vsync: first of you lose the right to comment on CSS frameworks when your site is tabletastic :)

Next your comment about it only being useful to ‘lame programmers’ is non-sense. I write CSS for a living as does Mark, and we think there is alot of useful features here – you calling us ‘lame programmers’?

Of course if you know CSS you could write something similar yourself but thats not the point of frameworks. The point is that it means you don’t have to.

Lets apply your logic to some other frameworks:
I can write php, therefore cake and codeigniter are lame.
I can write Javascript, therefore jQuery and prototype are lame.
I can write my own CMS, therefore wordpress and MovableType are lame.

Do you see how silly that looks? We know these scripts/frameworks/libraries are not lame because they save us the time of coding our own software/frameworks/libraries.

So stop being an ass, just because you don’t see the usefulness of something does not mean that everyone using it is a ‘lame programmer’ it probably just means that you are too ‘lame’ to see how it is useful ;)

Comment by Aaron Bassett — August 14, 2007

Nice idea, but i prefer to write the CSS by myselfNice idea, but I prefer to write the CSS by myself.

Comment by Maurizio — August 14, 2007


let’s talk about lamers

Comment by hal — August 14, 2007

This looks pretty cool… I can write css myself all day long, but I’m not that organized and I end up fighting with the same quirks multiple times because of it. You can easily trim out whatever you don’t want. Great job guys…

Comment by Will — August 14, 2007

That is utter rubbish. Blueprint simply helps get a design set up fast without having to test and change code time and time again. It doesn’t destroy the need to code css. The framework only provides a basic structure not a fully functioning site.
It is also a great way to teach a beginner.

Like previously stated lazy is a designer who continues to use tables for basic website layouts.

Comment by Darren — August 14, 2007

Thanks for the plug. A lot of cool additions are coming in BP 0.5, including proper default form formatting. :)

Comment by Olav — August 14, 2007

I think the main problem with this release is the use of pixel size fonts. Obviously by using it you write off the ability of more than 50% of your audience being able to resize the text.

I’ve seen the arguments against making that provision but I strongly disagree with them and I would have thought it would be a bad habit to get into.

You can get a similar CSS base by using Yahoo’s Grid-font-reset file which allows you to scale the text correctly.

Comment by Ross Riley — August 14, 2007

Ah… if only I had the spare time. I’m looking at the To-Do list for Blueprint and I’m thinking, “man… i think i could nail that one. damn this day job taking up my 9-5 and paying my bills!!!”

Anyhoo, I’ve started using yui’s grid-reset-fonts framework and I like a lot about it. A good lot. I’m working on a multi-app system that had some crappy design code already in place, so when I’m put on the task of redesigning each app, I can drop in yui, pick up the content and place them into some properly nested divs, and WOOOSHHH, layout’s done and i get to debugging/ebaying faster than I ever have before.

I’ve been doing web design professionally for a few years now. Only since my junior year of college would I say that I’ve come to be a true pro at it, and now I’m 4 years pas that. I spent many-a-day designing layout after layout, float after float. I’m happy that I can work with a grid system and do all this stuff effortlessly now, and I feel like actually *know* what these grids are doing, thus I sort of earned the right to use them. I don’t think I’ lazy.

I’d recommend newbs to code everything from scratch as much as possible in the beginning. When you feel like you’ve met all the bugs across all the browsers and the job’s getting repetitive, move on to grids.

However, what worries me with blueprint is how you’re locked into these fixed 70px grids, whereas yui seems more fluid right now. Both have their merits I’m sure. I cannot wait until the free time comes where I can compare/contrast these two systems.

Comment by Eric Fields — August 14, 2007

I agree. Frameworks of any kind aren’t meant for beginners (though of course they do assist them). They’re meant for experienced users who are no longer really learning anything new on every project, just doing the same things over and over again. A good framework stays out of your way and just provides structure and efficiency. There are frameworks for applications, frameworks for Javascript, why not frameworks for CSS as well?

Comment by Mike Ritchie — August 14, 2007

I’m a big fan of :focus{-moz-outline-style:none} to hide the horrible firefox dotted borders, so I’d just like to throw out the suggestion to put that in reset.css.

Comment by Burke — August 14, 2007

It’s great to see the promotion of typography (and reset) stylesheets as one of the best techniques for overcoming browser differences. Those that are new to this idea might also like to check out Yahoo!’s YUI library which contains stylesheets for building very high quality cross-browser websites.

Comment by Davidofff — August 14, 2007

hey man [Aaron Bassett], i do CSS for a living also, and
actually, what u THOUGHT was my company site, isn’t actually, because
our site is currently being build in the past 6 months.
u can see it if u were to type /index.php ….

and for your other comment, writing JS isn’t CSS.
writing JS is much more complex, and anyway, i a jQuery fan for a year now, and its the best.
i use alomost everything it has to offer in my projects.
with this Blueprint its different. it has lots of stuff that i as a developer don’t really need, and as a developer, already have from my previous projects and can copy from them (who isn’t using hes old project files..)
so basically u can say that i came up with my version of “CSS basic files for projects”, and i think mine are better..

in the end, its just a pile of rules….not much brain (like jQuery)

Comment by vsync — August 14, 2007

I think BluePrint is brilliant. Thanks Olav for your work. One thing that concerns me is that the only option is a 960px wide layout. Is nobody designing for 800×600 any more? I’ve made myself a modified version of blueprint that works to 760px using 12 columns. It would be good if there was a choice of grid.css options for working to different resolutions. The other thing is the px sizing for fonts, which I’m not 100% sure on, but I’ll keep using it and see how I go.

Comment by Michael McCorry — August 14, 2007

schweeeeet. You guys rule.

Comment by q — August 15, 2007

blueprint is superb. a real time saver. great work Olav (ignoring idiots like vsync is probably the best idea!)

Comment by Eddy — August 15, 2007

I love it when designers flame because of CSS.. Hahaha.. Slow days.. :D

Comment by MarkeeO — August 18, 2007

man that vsync, what a muppet. Its a framework you idiot! of course it will contain things you dont need, its up to you to take them out. It saves us professionals re-inventing the wheel each time we design a website.

I have been working on my own framework, but just dont have the time to finish it off. I admire blueprint becuase he has put this out in public, ok , it might not be perfect, but I doubt anyone will create something perfect!

Comment by simon — August 19, 2007

Yeah MarkeeO, it is one of those slow days :P
Vsync, i wonder how long you’ve been around doing these design / programming thingy… frameworks are created to assist lame old lazy ass like the rest of us from reinventing the wheels, and since different lazy ass needs different features, that is why frameworks tends to be bloated ;)
CSS framework ? hell yeah.. save me a lot of time from hacking CSS, so I can concentrate more on the real programming… CSS is always a pile of rules because it is exactly what it is, pile of rules… it’s not real programming language like PHP or Javascript that comes complete with logic in the first place.
I used to have my own PHP framework back in the days before cake, codeigniter and even PHP 5 even exist, and PHP 4 is still new… now I have to drop it because i don’t have time to maintain, do documentation, etc. ( and because it was sooo 90s, haha… ) it save me lots of time back then but the most important is that it makes me more appreciative to framework makers.
Weed out stuff you don’t need from a framework, customize it to suit your exact need, that is why they let you obtain the source in the first place… do as much dynamic loading as possible, and cut down unnecessary effect if you want to make good use of it while also optimizing the whole site.
Don’t be evil, if you think you have something better, why don’t you share it to public, like Olav did, instead of just making crazy insulting comment like that.
btw, a little apache setting will save you from /index.php embarrassment, whether it was intentional (as in company policy on private beta ) or not :D

Comment by bolongsox — August 23, 2007

I find Blueprint CSS is very useful and an creative solution for common CSS problems. And Vsync, your site is ugly

Comment by anonymous — September 4, 2007

I like the blueprint css framework, and actually doing my pending redesign with it. Its simply cool.

Comment by Zaigham — September 7, 2007

I prefer to use my own Framework using some reset code from Eric Meyer and my own classes for the grid and typography

Comment by Andy Gongea — September 25, 2007

Leave a comment

You must be logged in to post a comment.