What is the best CSS Framework and are they worth the effort?

Question

Reading on another forum I've came across the world of CSS Frameworks. The one I've been specifically looking at is BluePrint. I was wondering if anyone else had come across CSS frameworks, suggest which is the best and if they are worth the effort?

Answer 1

CSS 'frameworks' are completely missing the point.

CSS is not like JavaScript, where you can include a base library/framework and then call functions and objects from it to do higher-level work. All a CSS framework can give you is declarative rules: some default browser-rule-reset stuff, some class styles to be forced to author your page to, and layout rules using 'float' and 'clear'. You can write that in a few lines of CSS yourself rather than pulling in the bloat of a hundred framework rules.

The 'grid layout' stuff in particular goes back to the bad old days of mixing your presentation into your markup. 'div class="span-24"' is no better than a table, you'll have to go back in there and change the markup to affect the layout. And all the frameworks I've seen are based around fixed-pixel floated boxes, making it impossible to create a liquid layout accessible on a wide range of window sizes.

It's backwards authoring, of use only for someone too scared to write a CSS rule.

Answer 2

So, nobody's responded to this question yet (although I've seen a few upvotes), so I am going to at least attempt to tackle the second question in this prompt.

CSS Frameworks are great; like any other framework, they reduce development time and let you get working immediately on site-specific design and CSS. They think about hard decisions so you don't have to.

Unfortunately, there are two downsides to using a framework (in general):

1. The framework dictates the overall structure and mechanics of your CSS code. Now, I'm not talking about a CSS reset (these are useful in their own right, but they are not true frameworks); I'm talking about an honest to good framework, that has already made the decisions about what semantic tags you are going to be using in your document, etc. As such, you are made dependent on the framework, and when there is a bug in the framework, you will most commonly have to fix it yourself.

2. Frameworks are not an excuse for being oblivious to cross-browser/advanced CSS issues. You will invariably run into them, just as you would working with a PHP or JavaScript framework. And you need to know how to deal with them. There is a common saying that you should write your own framework first, before using someone else's.

Taking a quick peek at Blueprint, I would not really call it a framework; maybe a reset with a few extra goodies on top.

Answer 3

I've looked at BluePrint and a few others and the only CSS 'framework' I'd recommend is YUI Grids

Pros:

• Written by one of the best frontend engineers out there (IMO) (Nate Koechley)
• Very small. 4KB
• Very flexible (1000 different layouts)
• Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number.
• Supports easy customization of the width for fixed-width layouts.
• Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).
• Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
• Layouts less than 100% are automatically centered.
• Somewhat semantic classnames (better than top, left, right, etc)

Cons:

• Lots of extra markup compared to hand-written HTML and CSS
• Takes some learning to figure out how to do complex layouts

As other have posted, there are no real 'frameworks' for CSS. Reset stylesheets help a lot with layout too. I usually stick with a reset stylesheet and go from there. But if you don't have a lot of CSS experience YUI Grids could save you some time.

Answer 4

Matt Raible of AppFuse fame had a CSS Framework contest a while back to develop CSS Frameworks for AppFuse. The results are published here. There are a few variations and I have used some myself because I use AppFuse and find them very good.

I should add that these CSS Frameworks work well because they are used in themed applications. That is, if you stick to the rules then switching from one to the next is as simple as changing one value in a properties file.

Answer 5

I actually spent a good portion of the last 24 hours investigating this on my own, heh. My conclusion was that a nice reset (I used YUI Reset), and maybe something else to set baseline stuff (YUI fonts was worthwhile in my case; maybe the "extra goodies" of BluePrint would be in yours) is a good idea. But, a "framework"---which is generally something like YUI grids---is too restrictive, forcing you to use their class names, ids, etc. and rarely fitting into your site like hand-made CSS would.

So in short: resets seem pretty nice; it's good to eliminate all the variation in e.g. margin-vs-padding for lists, or paragraph spacing, or whatever. But that's as far as I would take it.

Answer 6

I believe CSS is about simplicity. The goal is to have one or two places to check when you're referencing between the HTML and your stylesheet. Adding more lines, and especially lines that you did not write and are probably not that familiar with, will exponentially increase the complexity thereby volatility of the CSS code.

I would suggest your layouts as you write them and develop a generic template system from that. While I love making CSS more modular, often and depending on the design, your CSS may be very case-specific and not modular at all.

Answer 7

I've used Blueprint on a few one-off sites and it definitely saved time, primarily in cross-browser testing.

It definitely sucks adding presentation code to your markup, although on the bright side it's readable. While I love the concept of "you can redesign without touching the markup", if you're producing a site where that really isn't going to happen anyways and you just need it done yesterday, Blueprint is something to look at.

There are also tradeoffs in what types of layouts it can feasibly create though. If you wireframe the site from the start on a strict grid, it will be much easier to transpose into the framework with a minimum of fuss.

Answer 8

I have used BluePrint with much success on a site (I could mention the site here but I am sure the post would be marked as spam!). I am not sure if I will use it in the future though because one of the ideas of CSS i thought was to not have layout logic hard coded. You shouldn't have css elements called span-24 and span-12 to define the layout but something like searchBox and mainContent. At least thats how I see it.

Answer 9

Take the time to study and understand (really understand!) a few css frameworks such as BluePrint and YUI, and css resets like Eric Meyer's. Then, take the time to put together your own reset and/or framework based on your work methods and the kind of sites you build.

Personally, I use most of the Eric Meyer reset with some classes and resets of my own, plus a few ideas from BluePrint and YUI.

I recently watched Eric Meyer give a presentation on CSS Frameworks in which he asked the question: "so which one is the right one for me?" He then answered the question by showing a blank slide. His point was, that there are certainly some useful concepts built into most resets and frameworks, but the one that will suit you the best is the one that you write for yourself (it's worth the effort).

Answer 10

I have used BluePrint and YUI but I always get frustrated with some of the names they give their id and classes.

To each their own, but I prefer doing things from scratch, but after a while you develop a process in which you will use your previous work and apply it to new projects and just make some tweaks to make the web site look the way you would like it to.

Be sure to use a good naming convention, just in case someone else down the road comes in to edit the css, then they will have a good idea what each style name is referring to.

Answer 11

i haven't used it yes, but i think emastic may be a good alternative worth a check. it it is similar to blueprint in scope, but also supports elastic layouts (hence the name) and you can specify values in px, em or %, and even mix them.

Answer 12

Compass is an actual CSS framework in the sense that it gives you not only templates (both YUI and blueprint), but also reusable constructs and higher-level declarations while still giving you familiar CSS syntax.

Answer 13

bobince got it right.

"CSS 'frameworks' are completely missing the point."

http://unobtrusivecss.com/ - takes piss out of CSS Frameworks.

Answer 14

Good link I found : Top 12 CSS Frameworks and How to Understand Them

Answer 15

Here is my blog post about CSS Frameworks When to use CSS framework?

Answer 16

Why use css 'frameworks'?

• If you are pressured for time.

• If you do not know css, and don't know someone who can write it for you.

• If you are not overly precious about standards etc.

I know programmers who have been really happy to use blueprint or 960, as it allows them to put together a layout on their own, without turning to a front-end developer. This is ideal for personal projects, or startups with limited resources.

If you have decent knowledge of CSS already, then presumably you have a decent library of stock layouts already, so you clearly won't need a framework.

However, if you're a beginner and just need to get something up and running, then you might turn to a framework, as it makes basic layout much simpler, and tackling browser compatibility also.

Having said all that, many frameworks out of the box do make use of some horrible class names etc. I know of some websites that have taken a framework as a starting point and then customised it with their own class and id tags. But clearly there's a bit of work involved in that rewrite too. Using something like Compass, as mentioned above, does help to get around that.

So, CSS frameworks - they can save you time, at the cost of semantics. They might also hurt your knowledge of CSS, but that is more up to how much you invest in learning the subject in general. Whether you make use of them is up to you.

Answer 17

The only way I know of to use a CSS framework and retain semantic markup is to use a higher-level abstraction. At the moment, Compass is the only one I'm aware of that's mature enough to use, but Nicole Sullivan seems to be doing some interesting stuff with her "Object-Oriented CSS" project.

I find Compass' clever use of Sass mixins to be brilliant, and a big step toward the Holy Grail of maintainable semantic markup. I don't think I'd want to use a framework like Blueprint or YUI without an abstraction such as Compass to keep presentation classes out of the markup.

BTW, there's a nice-looking CSS framework called Elastic that looks good enough that I'm considering adding it to Compass.

Answer 18

Compass I think is amazing. Make sure you see the screencast.

I am using 960.gs for a few websites and find it very simple and easy and worth the effort. Saves me a lot of work on layout. Make sure to check the custom CSS generator which goes away with the fixed width of 960 pixels.

Answer 19

You'd have to ask yourself how effective the available frameworks are at solving your problems. Do they meet your requirements?

By using a framework, you can set some rules or details at the pixel level and devote the rest of your time to implementing and producing. It's a massive productivity boost. If you find yourself spending time adjusting things by a few pixels late in the project (micro managing the design), it's a sign that a framework can be useful.

Tip #17 in The Pragmatic Programmer says: "Program close to the problem domain". Using a layer of abstraction can get you closer to solving the real problems of layout. For example: you might be able to concentrate of enhancing the user experience with the extra time you have rather than minor adjustments of pixels.

This is not to say you must sacrifice quality for quantity. It's about efficiency.

On a recent project, I made my own framework because we had very limited resources and the popular frameworks didn't do what I wanted. Then, I set up the design team's PSDs to snap to the same grid I deployed.

A framework doesn't have to be any particular implementation of CSS. It doesn't have to be something bloated you downloaded from the interweb or something implementing outdated ideas. It's just a technique for getting a job done. I wouldn't be surprised if some coders already have their own frameworks and don't even know it.

I would like to take this opportunity to say to those passionate about CSS and make statements like "only for someone too scared to write a CSS rule": Anyone can read up about the latest idea such as The Semantic Web or whatever. Anyone can find some other developer's CSS and find fault with it. Just because you can write half decent CSS doesn't make you some kind of rock star. So shut the fuck up. I'm sick of listening to you whingey pimple assed coders rant about tables, semantics or whatever is the current topic for flame wars. Think up your own fucken ideas and learn something new. It's just a markup language for fuck sake.

Answer 20

I think that this video presentation by Site Point CEO Kevin Yank will answer your question. I really recommend to watch it.