Responsive CSS frameworks from Bootstrap, Foundation, Purecss, Cardinal, Kube, Ink
As an exercise to test some of the latest CSS frameworks, we've created a set of similar looking templates using those frameworks. The template is a home page design consisting of a top menu bar, a carousel hero section followed by a three image showcase section and then finally an alternating image features section. To keep the consistency, we've used the Owl Carousel within all the templates.
| Framework | Version | Website | Github |
|---|---|---|---|
| Bootstrap | 3.2.0 | http://getbootstrap.com/ | https://github.com/twbs/bootstrap |
| Foundation | 5.4.5 | http://foundation.zurb.com/ | https://github.com/zurb/foundation |
| Purecss | 0.5.0 | http://purecss.io/ | https://github.com/yahoo/pure/ |
| Cardinal | 2.4.4 | http://cardinalcss.com/ | https://github.com/cbracco/cardinal |
| Kube | 4.0.2 | http://imperavi.com/kube/ | https://github.com/imperavi/kube |
| Ink | 3.1.1 | http://ink.sapo.pt/ | https://github.com/sapo/Ink/ |
| Framework | CSS Payload * | Example | Try |
|---|---|---|---|
| Bootstrap | 107kb | View | Use Template |
| Foundation | 143kb | View | Use Template |
| Purecss | 28.1kb | View | Use Template |
| Cardinal | 16.6kb | View | Use Template |
| Kube | 55.6kb | View | Use Template |
| Ink | 126kb | View | Use Template |
* CSS Payload measured using Chrome developer tool for minified version of default file. Some of the frameworks has option to select smaller version based on requirement.
Bootstrap has a great selection of components, good documentation and a vast array of examples, snippets and themes. Being by far the most established CSS framework, its popularity brings with it a huge amount of third party tutorials and components that can be easily found by searching around the net. However, this popularity also has a small downside, sites that stick with default themes may end up looking very similar to a number of others.
Foundation is backed by a very extensive website, everything you need to get going can be found there. There is a commercial organization behind it zurb.com, who lists many large scale design projects on their site. We were able get going quickly with this framework, there are many similarities to Bootstrap.
Based around Yahoo YUI, there is good extensive documentation with many examples on the website. Not quite as easy to get the exact style you want as some of the other frameworks. Relies on YUI components rather than jquery for functionality which may be an issue for those who uses jquery extensively.
Minimalistic and very much mobile focused, there are a limited number of components. It just gives the basics to help consistency between different platforms. This one gave us the most issues and took us the longest to get the template up and running - however, this could be due to its different approach rather than any inherent flaws.
Kube is fairly simple, has some good default styling on components and has most of the components you will need, documentation is moderately good but not a great deal of variation in the examples.
Simple and elegant, default components has beautiful styling and there is a full range of components to satisfy most requirements. There is also good documentation and examples. We were pleasantly surprised by this relatively unknown framework, we found it very logical and simple to pick up and we were able to quickly put together the example template using this framework.
All the frameworks we tested were well thought out and can all be used to jump start the build of a user interface or website. However, as the "de-facto" standard, with by far the most amount of third party documentation, help, examples and components, for putting together something quickly, Bootstrap is hard to beat.
For front-end novices and also back-end devs who just need a simple interface, it is hard to make a case for not using Bootstrap. For more experienced CSS people, the other frameworks do offer alternative ways of doing things which are definitely worth exploring, and for those looking for a minimal grid based approach and happy to hand crank their own components then something like Cardinal offers a good starting point.
In our simple exercise, we took a Bootstrap example and tried to build it using the other frameworks - therefore we may be trying to hack them using an approach that is not appropriate for the framework. If anyone has more experience with the other frameworks, we welcome their input.
bootzee.com beta