Launch: Blueprint, a CSS framework

Posted on August 03, 2007. 53 comments.

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.

The only viable option I found was the Yahoo UI Library, but with its dozens of files, weighing in at a hefty 11mb (archived), YUI is just way too bloated for what I want from a designers framework.

(YUI is still a great framework though, and there’s lots to learn from going through its impressive code.)

Presenting Blueprint

Not happy with what I had found, I began writing my own CSS framework, and, after a while, figured that this was something others might find useful as well. So today, I’m releasing Blueprint: a light-weight, easy to use framework for CSS development.

(And when I say light-weight, I mean it. It’s almost too small to be called a framework.)

Here’s some of the features Blueprint brings to the table (not <table>, 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

The framework has only five CSS files, making it a light, refreshing breeze compared to the tornado that is YUI. All you have to do is include two CSS files (screen.css and print.css) in the of each HTML file, and you’re ready to go.

Blueprint is still in early development, so you shouldn’t use it any projects of importance just yet. I, however, am using it in all my new projects, fixing bugs as they appear. In other words, new versions should be released quite often.

Get your, got mine

If you’re still interested, head over to the Blueprint site to see an example, read the quick tutorial, or just grab yourself a copy. Oh, and please make sure to check out the “credits” section.

If anyone would like to contribute suggestions, bug reports, or even better, bug fixes, I’d love to hear from you: olav at bjorkoy dot com.

Tags: blueprint, css
53 comments
  • khaled says:

    I like what you’ve done there Olav, very cool stuff indeed. I’ve not finished off my site (not by a long shot so I definitely might give this a nice looking into).

  • Olav says:

    Thanks! Your site is always a pleasure to read, but i do miss your previous blue designs.

  • matthijs says:

    Interesting. I’ve been working on something similar, also inspired by the Yahoo UI and the way Jeff Croft and others did theirs. Agreed that such a framework should be very light weight. Only put in what you really can re-use. Otherwise you end up overruling almost all framework rules with the project specific ones.

  • Dimox says:

    Thanks for good job, Olav! I’ll write about this framework on my blog.

    P.S. This site have very nice design ;).

  • Alvin says:

    Great work. Someone just need to step up and do this. And you did.

    That I salute :).

  • Antoine says:

    Excellent! Everything that I need, and nothing that I don’t! Just the right balance of prescriptive and flexible…

    Please, keep it lightweight, and keep polishing it. I intend to start using it on a rather large corporate .NET site, and I will let you know if I run into any issues.

  • Dever says:

    Just downloaded this, looking really good. I’m not a designer, but I do code a lot of layouts so this will come in handy on my next project(s) and will definately improve the whitespace usage on them. Keep up the good work.

  • FS says:

    mmmm… i have to disagree. In blueprint every class name make reference to a visual aspect of the element, and that is totally against the semantic markup concept. I think this is why theres no other css framework. Because every markup has to be different because every type of info has different meanings in different contexts.

  • Willson says:

    Sidebar doesn’t work in Microsoft Internet Explorer 6.0, http://bjorkoy.com/blueprint/test.html

  • Gary says:

    Congrats on the launch, looking forward to trying it out.

  • Adam says:

    Great work so far! Been a fan of 960width for a while, so glad you decided to take the number and expand on it.

  • Olav says:

    Thanks for the kind words, guys.

    @Antoine: Yeah, I’ll keep polishing it, and try to keep you guys up to date. :)

    @FS: That’s a good point, however, there’s no other way of doing it when you’re working with a framework. (If you have a better idea, please enlighten me. :)

    @Willson: Thanks, I’ll look into that.

    @Adam: Yeah, 960px is my preference as well. :)

  • Olav says:

    @Dimox: Thanks, I appreciate it. :)

  • Arik says:

    I spent countless hours trying to do the same exact thing. This thing is just beautiful and pretty much gets me off the hook of creating my own. Thank you thank you!

  • Darren says:

    It was extremely easy to use and the best I have found. I decided to do a guide on my site to setting up a basic web page using Blueprint.

    It can be found here: Blueprint: A CSS Framework.

    p.s: I’m liking the design of this site. Good colour scheme.

  • Nick D says:

    Nice work. I agree about the naming conventions being a little weird but after playing around with it a little bit the solution I came up with was since Blueprints elements were all class based I just used ID’s as my descriptors and then overwrote Blueprints base style with more specific definitions for my site via the ID’s I had just defined.

    So HTML:

    Stuff

    and CSS:

    header h1 {

    Stuff }

    That way you still get the grid definitions without looking the descriptions and personalizations.

    An example of using Blueprint for a redesign that I am doing can be found here: http://nickdenardis.blogspot.com/2007/08/working-with-blueprint-css-framework.html

    I did see some weirdnesses with IE7 but all in all the other browsers worked real consistently. I really enjoyed working with it and I totally see its potential. Keep up the good work!

  • Justin Ruckman says:

    Really nice! I’ve got a ton of sites I’m working on this month and I will give this a try. I’m always game for ironing out tedious steps in coding so I can focus on the visuals.

  • Adam Salter says:

    I agree with Nick D… Classes should describe the visual layout, which they do with Blueprint. If you have to assign specific semantic meaning to an item you still can with id’s

    Not a problem.

    Or you could even get really Kung Fu and use Prototype js to do

    $(‘header’).addClassName(‘column span-14’);

    simple semantic markup… :)

  • Jenny says:

    Wow this is pretty great. However, here’s a few future looking suggestions I have:

    1) Offer up a compressed version that doesn’t have comments or spacing, with all the relevant css in a single file (or one for screen, one for print). This both reduces connections needed and file size.

    2) Move to relative font sizes. This has a number of accessibility advantages, and can still offer the precision you need here to adhere to your grid

    3) Offer up other different common grid sizes, so a person doesn’t need to modify it themselves.

    Incidentally, the Yahoo User Interface library includes 1 and 2, and in a roundabout way, 3. I know you balked at its 11mb size, but the css portion of it is actually rather small.

    However, your grid and typography components area really a step above theirs. Their grid system is difficult to understand and requires lots of extra divs. I look forward to the future of this project.

  • Kel says:

    Looks good to me too - however, I’m not sure how this works with nesting content.

    Example - If I have 3 columns, and the far left and far right are secondary info, while the center column holds the bulk of the “real” content. The semantic structure/hiearchy is out of order. Help me out here. What did I miss? Thanks.

  • Phunky says:

    Interesting little idea although it does scare me, i mean a Framework for CSS :S just does not seem right!

  • Milos says:

    Cool, this seems to be very handy and easy to use!

    I recently discovered YAML, (an (X)HTML/CSS framework for creating modern and flexible floated layouts) and I bought a YAML-book. It will be interesting to compare these to frameworks although Blueprint seems to be much smaller.

  • David, biologeek says:

    Thanks for this work!

    Just curious, did you think about an em relative grid? Same question about typography.

  • Dan Brendstrup says:

    Damn you, I was just polishing off a blog design and now you’ve launched this and made me want to start all over again to test out Blueprint! :)

    This looks very cool indeed! I was waiting and hoping for someone to develop a framework that tied together all the cool grid-, baseline- and typography stuff going on right now. Very cool, and the built-in typography gives it a great advantage over YUI Grids.

    Although, as Jenny also mentioned, I’ll have to disagree with your critique of YUI. It might amount to 11 MB if you download absolutely everything, hook, line and sinker, but most of it is javascript and behavior stuff that your framework doesn’t even attempt (and shouldn’t).

    What you are competing with is Nate Koechley’s YUI Grids, Fonts and Reset which are only three css files, which also come in a single, compressed file that clocks in at some obscurely small Kb size. Which you can even use in a hosted version right off of Yahoo’s servers, saving you the bandwidth.

    But even with the newly added YUI Base.css your framework is still far ahead in terms of having nice typography out of the box. YUI is (only) about browser consistency while your framework seems to be (more) about stylishness :)

    And being able to use table-style column spanning seems like it will make it much easier to do complex grid layouts than with YUI Grids. Good work!

  • Olav says:

    Again, thanks for all the kind words. This launch is exceeding even my most ridiculous expectations.

    @Adam: You are of course completely right. It’s hard to do it any other way when dealing with a framework, though.

    @Jenny: Thanks for some great suggestions. I’ll cover these in my next blog post.

    @Phunky: I do see what you mean. However, this is such a small project that the description “framework” may be a bit over the top.

    @David: That’s something I’ll definately try do in a future release.

    @Dan: Thanks! I agree that my comments on YUI was a bit over the top. The point I was trying to make is that YUI may be a bit hard to grasp at first. This is my attempt to create something a bit easier to use. :)

  • Jeff Croft says:

    Hey guys…

    As one of the three original authors of the grids component (along with Nathan Borror and Christian Metts), I thought I’d pop in and address a few things (for the record, Olav made a few minor changes to what we did at The Lawrence Journal-World, but the framework is very, very similar. Olav is re-using it with permission and is giving credit where credit is due, so there’s no problem there).

    Re: Class naming convention. The visual nature of the span-x class names bothered all three of us a bit when we first put this together, but we quickly came to realize that the benefits greatly outweighed the downsides. As Olav said, there’s really no way to build a framework like this and not use visual naming, and the speed we gained in putting together layouts just made it worth it, in our minds. The three of us are all web standards fans, who stick to best practices as much as possible, but we’re also people working in the real world with real deadlines and we understood that, in the enviroment we were working in, getting real work done very quickly was the most important thing.

    Re: Relative font sizes. If Blueprint ever adds relative font sizes, I for on hope it will be optional (i.e. leave both the relative and absolute stylesheets, and let the end user choose which to include) – I much prefer absolute sizing, myself.

    Re: Alternate layout widths. One component of the original grids framework we built at the Journal-World that Olav (nor anyone outside LJWorld) has seen is a Python script that generates the grids.css file based on a specified unit width, gutter size, and number of columns. Christian wrote this for us, and it works great. Without that script, the grid framework is definitely less flexible. It’s not mine to release, but I may talk to Christian about making it public, now that so much of our other work related to it has been made public.

    Thanks for the interest, guys! And thanks for doing this, Olav. While I was surprised and a bit taken aback to see our work made public when I wasn’t expecting it, I’m glad it’s out there – we think it’s really good and we talked about releasing it ourselves – we just felt like we didn’t have the time to support it.

  • Luke says:

    Wow! This is fantastic. I was actually in the middle of writing a framework very similar to this after being inspired by an “a list apart” article about css frameworks. I think I will be borrowing heavily from your framework. I like eric meyer’s reset stylesheet much better than the one I’ve been using (yahoo’s). Thank you for releasing this!

  • Adam Rice says:

    I haven’t built anything with this yet, but I like the looks of it so far. Seems well thought-out.

    I think the next step (a next step) for this project is to have a web page where we can enter our own grid metrics and get back a customized CSS file that follows Blueprint’s conventions. For example, 80-pixel columns with 10-pixel gutters. Admittedly, it would not be hard to manually edit the existing Blueprint files to get the same effect.

  • Jeff Croft says:

    Adam – As I said in the previous comment, we had a script that did exactly that for us when we created the grids.css file. That’s the one thing missing from our original grid framework as it appears in Blueprint. It definitely makes the whole thing much more flexible having that.

  • Luke says:

    That is an interesting idea. I think I might have a go at writing something like that to go along with the framework I’m putting together, or maybe even this one if I have some time. Unless of course you can get Christian to release his, Jeff. By the way, it seems like you’re popping up everywhere recently. I recently started learning django, so I originally found your site that way, and then you were in the django irc the other day, then some other blog, now this one. :)

  • Eric Miraglia says:

    Olav,

    The YUI download is indeed 11 MB, but that includes 25 pages of PDF documentation, including some detailed images included as part of the documentation. It includes thousands of files that are used in support of the YUI examples and the API docs. You are citing the download size for the entire project, not for the items to which you’re trying to draw a comparison.

    YUI Reset, Fonts and Grids taken together, are 5170 bytes, and much less than that when served with gzip compression.

    Nate Koechley has done a phenomenal job keeping the YUI CSS Core lean and light. As exciting as your project is, I would hate for any of your readers to be confused by your implication that the YUI team is creating 11MB CSS files.

    Regards, Eric

  • amaltas says:

    I use Yahoo User Interface library, and reset-fonts-grid is just few kbs.

    I will try blueprintcss though.

  • Vinz says:

    Your framework is what I’m looking for: a simple set of css which can manage the dirty work of cross-browser compatibility for me.

    Good work, Olav.

  • ShaunM says:

    I have been using the YUI CSS components (Reset, Grid, Fonts, and Base) for a few months now - They have served me well.

    I have yet to try the “Blueprint CSS Framework”, it looks very promising tho from what I have read.

    I know you are in your early stages of release, but I think it would be good to get up an example area where you showcase different layouts and examples - more than just 1 or 2.. I know a lot of people have made examples and tutorials, but it would be good to see an “official” example/lab area where Blueprint can show its abilities.

    As I said, I look forward to trying it out :] Nice work.

  • Sherwin Techico says:

    Thanks for the hard work starting it up. I had the opportunity to try it for a couple of hours. Some things that I’m not yet sold are probably the following:

    1. SEO. That is having some markup like this won’t make BP play nicely with it:

    content

    > #content-primary > #content-secondary > #content-tertiary

    header

    footer

    1. Not utilizing clearfix (yet–I heard its coming)

    Anyways, can’t wait to see it grow and get optimized by the community. I just hope it doesn’t break come HTML5 =)

    GJ! Sherwin

  • Sherwin Techico says:

    Correction: For the #content block, the visual would be more were #content-primary is flanked by #content-secondary on its right (or left) and #content-tertiary on its left (or right). I hope that makes it a bit clearer.

  • Sherwin Techico says:

    Hmmm I hope the above reads ok. Let me see if I can put some type of test page some time soon… but yeah, keep up the great work =]

  • Sherwin Techico says:

    Pls. disregard #2 above–seems its now available in grid.css of 0.6 release. Let me grab the latest from google-code. Maybe I can answer #1 w/ it… Cool!

  • Sherwin Techico says:

    Just want to follow up regarding #1 just in case if there are new people joining us in the framework. It seems like other people have taken an interest in the idea above…

    http://code.google.com/p/blueprintcss/issues/detail?id=54

  • Alex Brola says:

    Garrr. I’ve been coding CSS for ages… but getting used to these frameworks is sort of a chore. There’s so much extra that just goes to waste.

  • 交通常用英语 says:

    I think it would be good to get up an example area where you showcase different layouts and examples

  • 抓姦 says:

    Hmmm I hope the above reads ok. Let me see if I can put some type of test page some time soon… but yeah, keep up the great work

  • Steve Bruner says:

    We just released a new WordPress theme built with BluePrint CSS. Would appreciate some feedback.

    You can check it out here: http://www.slipfire.com/sf-blueprint-wp-theme-52.htm

    Thanks Steve

  • Wierszyki says:

    I love work with css, thx for thic art

  • steven says:

    your gay

  • 鋼琴搬運 says:

    This site is interesting and very informative, nicely interface. Enjoyed browsing through the site.

  • steve says:

    the link to blueprint site can not be found… did it move?

  • parenting tips says:

    nice work! Also check out Nathan’s new 960 grid system.

  • BMW Jahreswagen says:

    use Yahoo User Interface library, and reset-fonts-grid is just few kbs.

  • Jahreswagen says:

    thx, nice article

  • BMW Motorrad says:

    i want more, pls,

  • Handy says:

    Great infos, thanx

  • Elwis says:

    Work with css i great :)

Add your comment

(anti-spam measure)

 (optional)

 (optional)

You can use Markdown for formatting (preview here) and Gravatar for avatars.