I've been looking at different CSS frameworks. The two major players seem to be 960.gs and Blueprint.
My question is simple: what are the pros and cons to each, and which do you recommend? And are there other frameworks that I should consider instead?
Putting my question into context, I'm the designer on a site that's similar to StackOverflow, but with a general audience focus, rather than a specific technical one.
I use 960.gs for my site (rpmware.com) but I'm thinking about switching to blueprint. Main reason being this ...
With 960 you're stuck with either 12 columns or 16. 12 is easily divisible (1, 2, 3, 4, 6) but sometimes I want a small column and can't get it out of the box. 16 has smaller columns but isn't as easily divisible (1, 2, 4, 8).
Blueprint is 24 columns giving the best of both worlds. I haven't done enough work to actually make the switch yet, but I am in the opening stages of researching.
You can easily customize Blueprint to use whatever number of columns and pixels suits your design, with the Blueprint Grid CSS Generator. Huge plus.
I recently came across the Compass CSS Framework, and thought it would be interesting to use on my next project where I have to start from scratch. You can use Blueprint or 960.gs behind it (probably others, too).
It's sort of like aspect oriented CSS...
And are there other frameworks that I should consider instead?
You should certainly consider not using a framework.
What is it you're trying to do? What features of a framework are you looking to use?
If all you want is a couple of columns side-by-side, you can do that easily in two or three CSS rules, no particular need to drag in hundreds of framework rules you're not actually going to be using.
I looked at the Compass video. "Coma" is the first word that came to mind. If people are to take any interest in this product, someone needs to plan and then re-do the video.
Secondly, at first glance (I didn't get very far per my instant comatosed state of mind), I thought "why would I want to learn a new language, "SASS", that is slightly different from one I know, "CSS", only to have Compass convert it back?????
I apologize if there is something I missed. Hopefully this feedback will be helpful however.
I am very happy with 960.gs since they added a custom CSS generator which lets you generate as much grids as you like.
Bonus content: The 960 bookmarklet (look at 960.gs) lets you place an overlay dynamically via JavaScript, so checking your layout is just a click away.
There are more flexible solutions for an overlay. http://www.puidokas.com/portfolio/gridfox/ is an awesome customizable grid overlay.
Assuming you are using firefox during development, that is. :o) Most developers do. I think.
960gs in my opinion is more semantically correct. There is no learning curve to it at all, in-fact you've pretty much learnt the entire framework in less than 10 minutes. There are no differences between Blueprint and 960gs any more, there once was though. But 960gs now comes with 12, 16 and 24 grid templates as part of the latest package.
You can use the online generator to create any size grid you want as well though.
I use 960 CSS framework because it's easy. Just take some time to learn it. You may wanna google for "960 problem" or "blueprint framework problem" to see if there's any potential problems you wanna avoid.
You should be familiar and comfortable with CSS. Use a CSS framework may be difficult initially, but when you come to master it well, you will thank the creator of the CSS framework. It helps you to ease your pain in layoutin', so to let you have more time to focus on the internal design and content.
i have been using YUI 2.0 reset-fonts-grids and base for years as the foundation of my web sites css and I am fairly well-versed in it. I found this question and evaluated blueprint, and it is fantastic, very easy to understand and implement. that said, i would stick to yui reset-fonts-grids and base as my css starting point because I have spent time learning it, and i already have several sites, including my own designed around it. In terms of being able to achieve a layout, I would be able to it faster in YUI right now. A person who knows blueprint would be similarly be able to achieve complex layouts too. Which means, pick one framework and invest time in learning it. There is no difference in the rendered page.
Using frameworks of any kind is advantageous for newbies as well as for experienced people. Frameworks reflect years of experience and get you on a running start. In the particular case of CSS, learning a framework would be far simpler than learning CSS itself, with all the quirks and browser compatibility things. I disagree with bobince on that count. I would prefer to drag 100s of rules written by people who know CSS, and verified by hundreds of others, for just getting 3 columns, than risk writing 3 css rules which make all the mistakes a newbie could make.
960 css framework is better choose for designers and much lite beginners. it's being more popularity speed vs blueprint framework. recently the twitter use this framework as Twitter Media Blog :-)
it's now going to great challenge of css prototyping frameworks.
I think you may need to consider using both systems depending on your needs.
The columns issue is important. In which case you'll get more options with Blueprint. However, the fluid layout grid with 960 looks promising - http://www.designinfluences.com/fluid960gs.