Selecting a responsive CSS framework

Creating responsive design from scratch is usually a tedious task for beginners. If you are new to responsive design then selecting a appropriate framework is an essential step in your design process. The following post give some pros and cons for a few selected frameworks to help you decide on a responsive framework for your new project.

Bootstrap

bootstrap.logo
Unarguably the worlds most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Originally developed at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.

Pros:
Easy to setup with a range of extensions and themes. An active development community and a large number of examples available including some excellent collection of premium themes.

Cons:
The complete source code is relatively large in size which could impact page performance, although you can selectively customize which component you require. Also the framework is difficult to extent and modify to suit more advanced scenarios.

Zurb Foundation

foundation.logo
Pros:
Quick to setup and allows easy customization an extension to suit your project. I’d used it when it was initially released and was able to build a responsive site prototype within an hour. Foundation is also much more flexible. It provides some nifty grid manipulation which I don’t think Bootstrap does at the moment. If you are looking to customize the look of your project, Foundation will be easier to override the default styling.

One of the strong points of Foundation is the documentation, it is the best around compared to other CSS frameworks and was one of the reasons I’d selected it for one of my earlier projects, although other frameworks have now begum to catchup on the documentation front.

Cons:
The community is not as large as bootstrap. Some premium themes are available here and here. themplio however looks good and provides some free and premium foundation themes.

The framework has got complex over time and during the initial releases it often broke design elements between version transitions, specially between version 3.0 to 4.0 (I’d faced the problem).

Skeleton

skeleton.logo
Pros:
Extremely lightweight responsive framework suitable for building small projects. Skeleton only styles a handful of standard HTML elements and includes a grid, but that’s often enough to get started for small projects.

Cons:
Does not include any additional components like for example the Orbit image slider in Foundation, so you will need to include additional utilities to support your design beyound CSS.

Community is strongly lacking and there are not much themes available either, a few here is what I found.

Conclusion

1. Choose Bootstrap for the size of the community and the problems begin solved for most of the scenarios.

2. Choose Foundation if you need to have some pretty awesomely designed sites, don’t care too much about syntax and are ready to handle some complexity in code.

3. Choose skeleton if the site is small without much of bells and whistles and need to keep the design complexity lower.