comparison.md

CSS Frameworks Comparison

TL;DR

If I should pick only one framework for all my projects, both prototyping and production, I would go with either Bootstrap or Foundation and then improve them depending on my needs, eventually by using nice ideas from other frameworks. Since I'm a LESS user, I will probably go with Bootstrap, but if Foundation would have been build with LESS too, I would have been in deep s****.

Players

• Bootstrap: http://twitter.github.com/bootstrap (in version 3.0)
• Foundation: http://foundation.zurb.com
• GroundWorkCSS: http://groundwork.sidereel.com
• Ink: http://ink.sapo.pt
• Gumby: http://gumbyframework.com
• Maxmertkit: http://www.maxmert.com
• Responsive Grid System: http://www.responsivegridsystem.com
• Base: http://matthewhartman.github.com/base

Introduction

I remember... back in my days... when people were writing their CSS from scratch, selector after selector, without any pre-processor, without any mixins, trying their best to support IE6... Good old time.

But let's get serious. Nowadays, if you want to be really productive, you will probably need a CSS pre-processor like LESS, SCSS/SASS or Stylus because it will give you so awesome tools that you will never see plain CSS as before. You are not forced to use a CSS framework of course, just like you are not forced to use jQuery (or whatever similar) to manipulate the DOM. But guess what, it will ease your life and put safe and strong foundations to your site.

I'm using CSS frameworks for two main purposes: prototyping and production. Yep, I'm using them in production because they are safe and provide high quality code, frequently updated. Of course, depending on my use case, I will not use exactly the same features. So here is a short list.

Both

• Reset: I always need a good rest of CSS rules to ensure a better cross-browser compatibility

• Responsive grid: that's the main tool of all CSS frameworks, it provides a grid (most of the time with 12 columns) which will adapt its structure (mostly column widths) depending on the width of the window.

• Basic components: I don't want to assemble dozen of small libraries to do "easy" stuff like modal, tab, dropdown, alert, pagination, button, ...

• Forms: same as before, having nice forms out of the box is a nice feature.

• Namespaced: here is a complex point to judge. I don't want JavaScript events or CSS selectors of a framework to mess with my own code (seriously, putting a margin-bottom to the form selector is far to generic IMO). But in the same time, I don't want my CSS classes to become uber-verbose, as for example:

  Click

That's too much... Thanks God, the current version of Bootstrap is way better:

<button class="btn btn-primary disabled">Click</button>

So maybe the good balance is having namespaced JavaScript events but plain CSS classes...

Prototyping

• Nice UI: I don't care for production since I will probably redo it from scratch according to client design requirement, but for a quick prototyping, I need to have a nice and professional UI out of the box since I don't want to spend any time on it but still will show it to people.
• Advanced JavaScript: by that, I mean more complex components using JavaScript because I don't want to search for jQuery plugins or JavaScript libraries during a rapid prototyping. As an example, there is the "Typeahead" of Boostrap: works fine so it can be used for a prototype but it doesn't have enough features to be used on a complex production environment.

Production

• Extensible: there is high chances that the framework doesn't exactly match my needs, so I want an easy way to customize and extend it. Using variables and mixins with a pre-processor is a good starting point.
• Activity: I can't bet production projects on a framework which isn't active enough, correcting bugs and updating to new standards frequently.
• Community: since I'm only looking on open-source projects, and even if I don't judge a tool depending on its popularity, having a strong community is really positive because it means the framework is heavily tested, higher chances to have issues and pull requests, open-source extensions of the framework, etc...

Summary Grid

You can take a look at this Google spreadsheet to have a global overview of some features of all frameworks. It's a totally personal notation of these tools.

Legend:

• Y (green) / N (red): indicates if the framework supports or not a feature
• 1 (red) / 2 (orange) / 3 (green): indicates how good I consider the framework on a specific field (the higher, the better)

Old champions VS young rookies

While I was reading all those framework documentations, testing them a bit, taking a look at their ecosystem, I started dividing them in two categories: old champions for those existing for quite some time, with a huge community, a lot of components and features, and young rookies for those which appeared recently, with far less horse power but some really innovative ideas and new approaches.

Old champion

Pros

• stable
• heavily tested
• huge community
• lots of components

Cons

• less innovative
• less cutting-edge features

Young rookie

Pros

• dynamic
• innovative, new nice features
• easier to contribute

Cons

• missing components/features
• no community effort yet

For me, the old champs are Bootstrap and Foundation, all others are rookies (some really young, some a bit older).

I swear, I want to punch the screen sometimes. You forgot about LESSHat. And here's a nice bigass list of CSS things, new stuff all the time. You failed to mention Skeleton (Mind you, I do like this one - in fact Base is built on it.)
One Percent Grid, anyone?. Or is Square Grid more your thing....?