Blueprint: A CSS Framework | Hacker News Reader

Blueprint: A CSS Framework

blueprintcss.org

41 pointsteej17 comments

My only issue with blueprint and compass was that it seems overly complicated for what I'm trying to do so far. I'm not a CSS guru so maybe I'm missing the point but is there a good reason to use a CSS framework on medium sized projects?

Or, rather, is there something inherently nice about using grids for translating design to markup? It just seems like the framework adds a lot of code and styles that you're never going to need or use on small-to-medium sized projects. Thoughts?

> but is there a good reason to use a CSS framework on medium sized projects?

No, not really.

> is there something inherently nice about using grids for translating design to markup?

Only if you want your markup tightly coupled with page layout.

I like to use it for the simple fact that it automatically overrides all of the default styles. So no more Times New Roman, and all of the header tags look decent without much modification.

That way, I can usually use most of their defaults and can spend more time coding.

So it is really nice for me on small projects where I just want it to look decent without much effort.

This looks cool. Is anyone using this? Mind sharing your thoughts? I'm getting ready to do a site redesign and this might be right up my alley.

It's everything it claims to be, and really does make things easier. I can't recommend it enough.

But be carful: using blueprint as they recommend litters your markup with pseudo "inline style" classes. If you are a stickler for clean html/js, there are tools that compile blueprint into your custom css classes and ids. Compass is a great one for rails. I think blueprint also has built in tools for this now as well.

We use it where I work and the designers like it a lot. It works very well to build cross-browser layouts in a very quick and simple manner and has drastically reduced the amount of time it takes them to cut PSDs into raw XHTML/CSS.

One downside you will quickly notice is your markup becomes much less semantic and a lot more cluttered with CSS classes. This is simply by virtue of how all "grid" CSS frameworks like this work - they set up a ton of generic styles that are impossible to be symanticized. With blueprint you start to see a lot of classes that look like "span-XX last" or "push-XX" or "pull-XX".

There are a number of ways to get around this, however. The first is a tool that comes with blueprint that lets you set up a yml configuration which maps semantic ids to these generic CSS classes. For instance you can say "#footer => span-24 last". This will then generate the CSS in a semantic manner so you can continue using id references in your XHTML.

The second way, and this is the approach that I would highly recommend, is to go ahead and use some sort of CSS metalanguage/compilation tool such as SASS (Syntactically Awesome Stylesheets - http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html). Chris Eppstein has done a fantastic job with the Compass CSS Framework (http://wiki.github.com/chriseppstein/compass) which builds on top of SASS, which allows you to do really amazing things with CSS.

The compass framework he has built allows you to do things like define CSS constants (colors, font sizes, etc), perform unit arithmetic, as well as define abstract classes or groups of properties called "mixins" which allow you to abstract out a lot of your repetitive CSS properties. It is also a whitespace sensitive DML which makes the highly nested nature of CSS selectors a breeze to work with. It also already comes with modules for blueprint and other grid frameworks!

I would check out his talk about it here if this sounds interesting to you:

http://pivotallabs.com/talks

HTH!

While I like what I see in SASS and Compass. I'm afraid I won't be able to partake in the excitement as I code in PHP for my day job. And hack in Python during my spare time. Is there any equivalent out there?

Although SASS is built with Ruby, there is nothing strictly tied to Ruby or Rails. You can use sass as a stand-alone tool for pre-processing your CSS for any other web platform. Haml, however, is tightly bound to Ruby.

Maybe it is besides the point, but I use YUI grid. Not tried Blue Print CSS, but it took me less than a couple of hours to get hang of YUI. Never looked back.

I used it here:

http://www.squeezedbooks.com

and here:

http://www.welton.it/davidw

I'm pretty happy with it. I regularly tried to do my own CSS, coming up with something I thought didn't look half bad, and people would tell me it looked awful, so I figured it was best to just use something out of the box that looks 'ok' to most people.

Not surprisingly, these look just like the default Blueprint styles. Most CSS frameworks are awful because it takes less time to start from scratch than it does to overwrite all of the framework's defaults.

I used to use Blueprint all the time, but found it had many inconsistencies and corner cases -- primarily its vertical pacing of type, but also in its grid. Then, when I'd go to fix these issues manually, I'd always end up befuddled and foiled by its implementation overriding me.

My rules for judging CSS frameworks are: "They should pick something, do it perfectly, stay clear of everything else," because fixing just an aspect of someone else's CSS is such a punishing experience. Blueprint fails all three of these requirements, bundling grid, typesetting, form, print, and templates libraries together, not implementing them all perfectly (well, duh), and not staying out of my way when I don't need one or more of these features.

My current favorite grid implementation (and attendant design philosophy) is OOCSS. I highly recommend everyone check it out and absorb the knowledge presented there: http://wiki.github.com/stubbornella/oocss

I've been using a related framework called BlueTrip CSS (http://bluetrip.org/) that combines elements of Blueprint, 960 and Hartija print css. It's a very good framework for rapid website prototyping.

When I last looked at Blueprint, it looked pretty good for brochureware websites. But when I tried to use it for something else, I quickly ran into lots of limitations. I ended up coding my own CSS.

What do others think?

We really need a programmer-friendly abstraction layer over the mess that is CSS.

I like blueprint a lot ... but I'm also really liking 960.gs ... I think it might have a slight edge over blueprint.

I like the relative simplicity of 960.gs. It does a reset and then has a fairly simple set of glasses for actually do the grid. It also comes w/ a basic typography class that I'll overwrite w/ my own base preferences.

I find that it saves me A LOT of time when doing sites that fit the grid style, which are most. It's out of the box functionality really shines when you realize you don't need to play around with floats, margins, and other CSS "tricks" to get your CSS layouts working across browsers.

The biggest issue I see with 960 vs. Blueprint is that I believe Blueprint will allow you any width you'd like. Resizing 960 probably isn't a huge ordeal but it's not as simple as in Blueprint.

When I use Blueprint, I like to add a "colborder-left" and "border-left" class (which isn't hard).

Reply on news.ycombinator.com