Selecting CSS Framework-Twitter Bootstrap, Zurb Foundation or Semantic

Selecting CSS Framework-Twitter Bootstrap, Zurb Foundation or Semantic

So I have finally woken up from my slumber, with a post whose context & technology space is a bit unorthodox from my blog Smile. But that’s natural, given that for almost a year now, I  have involved in developing my eCommerce Platform smartStores – a scalable and robust eCommerce Platform that will be offered to customers in a SaaS model. As part of this exercise, I’ve has the opportunity to play around with several CSS frameworks that I could adopt for smartStores.

That said, back to the blog topic – CSS Frameworks are the basic building blocks that one should adopt web development and so did I. It not only offers cross browser compatibility, a Grid System, support for Responsive Web Design, but also simplifies and speeds up the development process. There are several CSS frameworks that are available in the market, but the ones that made it to my final shortlist include Semantic, Twitter Bootstrap and Zurb Foundation. This by no means implies that others are not as great; it’s just that these made it to my shortlist based on my specific requirements. 


You would typically use a CSS framework for one or a combination of the following reasons:

  • Responsive Web Design – today it is one of The most important reason why you would want to adopt a CSS Frameworks. Almost all CCS frameworks offer a gird system (fixed, fluid, or both) as well as support for responsive web development. That said, when you are primarily developing web sites and responsive web design is why you are looking at a CSS Framework, you should look at the lightweight frameworks like Semantic, unsemantic (successor for 960), Golden Grid System. These frameworks have a very small footprint making them quite lightweight and simple. On the other hand, more comprehensive framework like Twitter Bootstrap and Zurb Foundation can also be adopted, but you will need to trim them down of the all the unwanted features they offer – which means additional effort and complexity.
  • UI Components – as opposed to developing website, when you are developing web applications (involving extensive data based interactions) and you are looking to adopt a CSS framework to help you reduce your development cycle, the comprehensive CSS Frameworks should be looked at. Apart from the grid system and responsive web design, these frameworks offer a rich library of components like Navigation, Button, Tables, Forms, Typography that will reduce your development effort. Twitter Bootstrap and Zurb Foundation are by far the most popular frameworks of the lot; with Bootstrap leading the race with quite a margin when it comes to adoption rate and component library richness.
  • Cross browser compatibility – today while most browsers are moving towards supporting common standards, cross browser compatibility can still be tricky specially for those who are not HTML/CSS experts. If you are one of them, you can look at adopting any of the CSS frameworks – they all provide predefined browser compatibility so that you don’t have to worry about it.

Apart from there parameter, a very important criteria that your must keep it mind while selecting a CSS Framework (specially the more comprehensive ones) is the current state of  your web development – are you in the early staged of your web development or are you looking to adopt the framework for an existing web development project. This is important because if you have an existing application/site that has not been developed using one of the CSS framework, adopting one can get tricky but by no means challenging.

Mixin is your key to the problem. Mixin act as the decoupling layer between your application and the CSS framework – maps your CSS classes to the Framework’s CSS classes and generated appropriate CSS. This give you the ease to adopt as well as the flexibility to dropout on a framework at any point of time. Without Mixin, you will need to make significant changes to your application to adopt the framework; which means rework, code manageability complexities.

While most framework support Mixin, it is to a varied degree but by no means not always complete – we learnt this the hard way and had to drop out on one framework midway and adopt another. Between Twitter Bootstrap and Zurb Foundation, we found Foundation’s support for Mixin is a lot more comprehensive than its counterpart making the adoption process  easier and faster. While Bootstrap is lot more matured and feature rich than Foundation, it’s development team is reluctant in adopting Mixin; while Foundation offers Mixin for most of the it’s components.

As a last piece of advise, just like any other technology selection, having clarity on your requirements, evaluation criteria and your priorities is important. Do small proof of concepts and get your hands dirty; then give weightage to each criteria according to your priorities.

Leave a Reply

You have to agree to the comment policy.