In a comparison of 2 popular website building frameworks, Twitter Bootstrap squares off with Foundation from Zurb. With much focus on responsive design these days, both of these frameworks are ranked at the top. Bootstrap is currently up to version 3.2 where Foundation is now on release 5.3. Among the many reviews, there doesn’t seem to be a clear winner, per se.
Conclusions basically depend on what purpose the final product is to serve and the level of expertise of the developer. I decided to find out for myself.
Instead of using the native versions of these platforms, for the sake of time and simplicity, I am working from the WordPress versions of each, so my point of view is from a WordPress administrator’s aspect.
I break down the comparison into the following categories:
-
True Responsive Design
Foundation uses the precept of mobile first, whereas, Bootstrap starts with desktop based design then adds mobile adaptability.
Both use the “grid” layout system, though Foundation specifies width in percentages as opposed to Bootstrap which relies on static widths that can be modified to be fluid.
Foundation uses root relative em (rem) size specifics which alleviates the problem of cascading em sizes where Bootstrap uses pixels (px), needing to be specified explicitly by element and are not inheritable.
Given its intrinsic mobile first philosophy, Foundation seems to me to be the “true” responsive platform.
-
Flexibility
Bootstrap offers more user interfaces (UI) and makes quick work of putting up a nice looking page. Foundation is more of a bare-bones framework with lots of room to customize – a true developer’s paradise.
-
Sass vs Less
Both platforms have the modern capability of CSS preprocessors, a dynamic method of administering styles. Syntactically Awesome Stylesheets (Sass), a Ruby based server-side preprocessor, is used by Foundation while Leaner CSS (Less), a client-side JavaScript library, is the Bootstrap alternative.
Both are good and share many of the same features but have their unique strengths, so there really is no winner in this category.
-
Comraderie
Bootstrap was bourne of Twitter and has been around a bit longer, resulting in a larger community of those working with it. Foundation, on the other hand, is more of the new kid on the block with more to prove. With the need for collaboration amongst its code wrangling users, Foundation will be a great deal tougher to share ideas for than those relying on the Bootstrap support system. This category goes to Bootstrap.
-
Future Prospects
It is probably worth mentioning that Foundation does not support IE less than IE9, which is often a show stopper for enterprise wide consideration. Bootstrap, on the other hand, supports IE8 which is still widely in use. For this very reason, I believe the future belongs to Foundation, as they appear to focus their vision to further down the road.
-
Look & Feel
Out of the box, Bootstrap provides a more refined visual appeal and as I mentioned in the second point above, Foundation seems to be geared towards customization – a little bland but perhaps that is the beauty of it.
Conclusions:
-
The 2 are very similar in many ways and both would be excellent choices, however, I tend to view Bootstrap as a trendy gimmick based on technology from Twitter’s technology team (ever-changing), with its popularity waning even though the responsive design concept is here to stay for a while. Foundation is a complete enterprise development platform complete with Zurb tools and methodologies.
-
If a quick, nice looking product with a short life-span is in order, Bootstrap would be my recommendation, but if you are a wrangler (like me) who likes to dabble in customization (as I do), Foundation would be the preference.
-
The next revision of my own site will most likely be built on Foundation 5 and I can’t wait to begin!
