CSS Design with Blueprint

12 comments | Posted: 13 August 07 in Code, by Andy Knight

Are you sitting down? Good. This will make your CSS page layout so much easier. If you find yourself recalculating columns and grids every time you begin a new page layout, then you might want to consider designing with Blueprint. Blueprint is a CSS framework recently developed by Olav Bjorkoy that allows you to quickly layout a multi-columned design.

Olav’s work is already making a splash in the web design community, and I can understand why. The CSS is straightforward, simple to implement, and based on a smart grid system. It seems to contain everything you need and nothing you don’t.

I can definitely see me using this on every new page layout project I tackle.

Discuss This Topic

  1. 1 Deborah

    I’ve been reading a lot about Blueprint in the last few weeks. Jeff Croft had some comments about it too, and overall, it looks like a great tool and wonderful time saver. Just downloaded it to test it out.

     
  2. 2 Andy Knight

    Yes Deborah, I should have mentioned that Olav’s Blueprint combines the work of several others, and Jeff Croft is one of them.

     
  3. 3 Troy

    Ever since I read about Blueprint a couple of weeks, I’ve been wanting to try it out. I’m beginning a project that would be perfect for Blueprint, so I’m excited about the results.

    I was excited about the YUI CSS Framework, but to me, seems to be a lot of overhead. Blueprint is what CSS is about- clean and valid.

    Can’t wait to try it!

     
  4. 4 Olav Bjørkøy

    Thanks for the plug, Andy!

    There’s a lot of improvements and additions coming in BP 0.5 (great form support, for one), so stay tuned for that.

    I’m also going to make a better sample page, as I don’t think the current one gives the framework much justice.

    If you have any ideas or suggestion, please tell, here or by mail. :)

     
  5. 5 Michael Montgomery

    Yes, I’ve also been interested, testing, trying to contribute, and getting excited.

    Main objection seems to be source order, though I think that can be overcome.

     
  6. 6 Larry

    Only gripe I have is that it’s not very semantical, but that’s a given since it’s a framework. Props to Olav!

     
  7. 7 Andy Knight

    Larry: That’s been a little bit of a concern with others, but Jeff Croft one of the contributors had an interesting post about this called The myth of content and presentation separation. In the article he says:

    But after some thought and playing with the framework, we realized a few things:

    1. Non-semantic class names hurt nothing.
    2 .The productivity and efficiency boost we got by all designers using a consistent framework that already accommodated for browser issues was enormous.
    3 .We were never, ever going to redesign our sites without changing the (X)HTML. It’s a nice thought, but it’s also a total pipe dream.

    So, if we’re always going to revisit the (X)HTML at redesign time, use of visual class names doesn’t negatively impact our work, and we can create good, solid layouts in very little time — what’s not to love about (the framework that became) Blueprint?

    He goes on to say that we need to use web standards not because Zeldman tells us to, but because of their great benefits.

     
  8. 8 Larry

    I see. Well, I never read any of what Zeldman says… or Croft, or many of those other internet rockstars :) I would just think that using good, semantic names in the first place would lessen the amount of work needed to be done in the XHTML. I always believed point #3 was always a given and much more realistic, no matter how lovely an idea it was to just change around the CSS. Oh well.

     
  9. 9 Dan

    Someone posted something about Blueprint in the forums somewhat recently.

    I’m sorry but I still don’t really see how this is a huge time-saver or help in designing web sites. Every web site is different and I don’t see how having a library can make things go that much faster, when the CSS is going to change every project.

    Don’t get me wrong, I think it’s really cool that a group has actually taken the time to build a CSS framework, but I think when it comes to designing web sites, at least for me, I’d be better off starting from scratch. It’s not quite the same as implementing a JS framework for functionality. If everyone starts using Blueprint, are all of our sites going to start looking the same?

     
  10. 10 Joshua Parker

    “If everyone starts using Blueprint, are all of our sites going to start looking the same?” Dan, I have to confess that I was wondering the same thing, but the more I thought about it the more I reconsidered my position. For me I see the Blueprint for just the way it is, a ‘blueprint.’ Using the Blueprint can be a good idea because of the grids. The grids can help with positioning so that you can check to see if you have calculated your margins, padding, and other spacing. Also, if you use the box model as well as the Blueprint, it can definitely give you a bird’s eye view of how your website will look when you remove your colored boxes and all the Blueprint markup and grid. Just as the box model is a guide, Blueprint is also a guide. A good designer will think outside the ‘box’ sort of speak as well as rename all the classes so that the code can be understandable. Now I am not saying that we should jump on the train because everyone is doing it, but what I am saying is that maybe Blueprint may end up being a help especially to those who are just starting out designing with CSS.

     
  11. 11 Mark Priestap

    Blueprint is really nice – I’m using it for a project right now and do enjoy it. It did speed up my dev time considerably.

    I agree that semantic class names probably aren’t a huge deal – basically I installed the framework and started building my site based on my PSD… much of the framework ended up getting deleted, but it was a great starting point. I plan to use it again.

    I’ve stayed away from CSS frameworks in the past because I enjoy the building process and wanted to know how things were put together in case there was a problem. With Blueprint I don’t have that fear – it’s pretty easy to understand what’s going on. I probably won’t use it for every single project, but it’s a great thing to have in your back pocket.

     
  12. 12 Nathan Smith

    I think a CSS framework is a good idea, for working on an internal team. What the guys at Lawrence have done is standardized their practices cross-the-board for their own company. This is a smart move, especially for companies which have the same general look and feel across multiple pages and mini-sites (Fortune 500 companies, etc). I’m sure this is the reason the YUI grids came about, out of necessity to maintain consistency.

    That being said, I think that trying to shoe-horn a unique project into an off-the-shelf CSS framework would be a grave mistake. You’d spend more time re-writing code than actually getting work done.

    For what it’s worth, Blueprint is very well thought out. If I ever need to put together a news oriented website on a 14 column grid, it’d be a great stating point. However, I’d rather let the overall requirements of a project dictate whether or not a framework is used, as opposed to forcing a square-peg / round-hole scenario.

     

Comments closed after 2 weeks.