A Closer Look at CSS Frameworks
Note: Please read the entire post, the notes on the chart, and my responses to comments before asking questions about my criteria in this comparison.
If you are shopping around for a CSS framework to use on your projects, you will probably find that there are more than a few options on the web. In planning this article, I was able to think of six off the top of my head, and I found four more after a few quick searches, excluding a couple which are now defunct. I've been an advocate of CSS frameworks since before they were cool, and as a developer and community supporter for the Blueprint framework, I have a pretty good idea of what the landscape for them is like, and moreover, what users need to get the most out of them. While some frameworks like YUI are enormous, extending far beyond CSS and including a wealth of tools and articles put together by a very large team, there are many others that amount to nothing more than a handful of CSS files loosely joined by a catchy name and a README file. To the average developer, however, there are few ways to tell the difference, and trial-and-error are usually required before one can find what they really need.
In the interest of helping you or someone like you get a better handle on what's out there, I've decided to comb through as many frameworks as possible and rate them based on some important criteria, including source (open or closed), # of contributors, # of tutorials, availability of a discussion forum or bug tracker, and more. I've placed my findings in a table on my "lab," along with an explanation of my criteria for ratings. You can click on the following screenshot to be taken there:
In building this chart, I was a bit shocked at my findings (but not too shocked, as I knew some of the results beforehand). There are a number of CSS frameworks out there that lack any sort of discussion channels, bug tracker, wiki or tutorials. It's not too difficult to figure out a framework if you know CSS well, but for the majority of people who actually need a CSS framework, this stuff is essential. The mailing list on Blueprint gets a considerable amount of traffic each day, comparable even to many general-purpose mailing lists on web development. Furthermore, much of the improvements that have gone into Blueprint have been the result of community feedback and bug reports.
Some of my criteria in evaluating CSS frameworks is more my own taste than any sort of consensus. I value community projects over single-contributor ones, even when the code is inspired by the work of others. I also prefer open-source licenses over creative commons, since the former are more established and recognized in the programming world. That being said, a lot of it is important stuff, and I've only begun to compare the options. I haven't looked at browser support, or demos, or which media types & use cases each framework covers, or whether or not they include plugins or tools. All of these are grounds for more charts and comparisons, and I invite others to contribute. Furthermore, if there is anything on this list that is incorrect, please let me know immediately and I will amend it.
With all the disclaimers out of the way, it's time for me to present my cold-cut statements about my findings:
- It surprises me that well-known frameworks like 960gs, Tripoli, and others do not have discussion channels or bug trackers to accompany them… at least ones that I can find.
- Even if you are the only one writing code for your CSS framework, I think it's a given that you should upload it to a site like Github and make it public. Version control alone is a good enough reason, and easy-to-browse source along with one-click forking are good reasons too.
- It kills me that Blueprint is the only framework with an actively maintained wiki. Wikis are a great place for an entire community to post tips and resources in a central location, and the best part is that users don't need their own websites or blogs to contribute. Plus, it allows for community members to become authorities and help other users out, along with a discussion forum or mailing list. It's nice to know that the browser support wiki page for Blueprint was initially built entirely by a community member, and many questions on the mailing list don't need input from core project members to be answered.
- Many CSS frameworks are just a handful of files that one person has made available to the public. These are great contributions and anyone is going well out of their way by doing this, but these frameworks are not very helpful for people who are inexperienced in CSS. As a user, you should look at amount of tutorials as a measure of how approachable a CSS framework is.
Hopefully this will be useful to experts and beginners alike. If you have more ideas for criteria to compare, or you would like to see another CSS framework included in this list, please let me know in the comments.
2 Trackbacks/Pingbacks
- Pingback: ?????9?20090911 -- ???? on September 11, 2009
- Pingback: Some links for light reading (8/9/09) « Max Design on January 5, 2010
how can a css framework be "closed"?
How can a GPL or BSD 'anything' be closed source?
naum: I explained this somewhat in my post, but I'll try to clarify it more: even though you can see the code, and the license is open-source, that doesn't make it "open" as the open-source philosophy describes. If you can't contribute to the development of the project, or make derivative works easily, then it's not really "open" as open should be. Sure, it meets all the criteria for the license, but there isn't actually a spirit of community involvement in the project itself.
djn: See above.
Hi Christian. As a framework-delevoper I'm very interested in your findings. Thanks for your work. Though, I have some notes.
As asked before, how can CSS be "closed source"? There are many ways to contribute to a project and only one of them may be direct access to commit code. You look for forums, wikis, bug-trackers .. but not for a documentation, why?
YAML has a big and active community, so there's a lot of feedback, ideas and questions that influences the development of the project. Yes, I'm a single developer but contribution comes from many sources. Of course, this isn't visible from the website but isn't this a natural way of development for any "living" project?
Can I suggest some new CSS Framework to this list?
I build like 6 public CSS Frameworks here is the list:
Emastic,
Malo,
The Golden Grid,
Hartija,
Formy and
1 line CSS Grid Framework
Every of these 6 Frameworks has its own story and meaning, CSS Frameworks(Library's) are my passion I devoted almost two years to build them.
Can’t but: A few words on HTML/CSS frameworks.