Responsive design is all the rage today and it seems to be the way forward for creating a web site that works well on any device. Seeing how you are reading this article, you have probably already come to the same conclusion but you are stuck at a similar crossroad that I was at a couple of months ago. Zurb Foundation and Twitter Bootstrap seem to be the two frameworks which provide the best "all round" framework. Of course, there are other 'frameworks', which probably cater to those who like to make their job more difficult or are anal about 3rd party frameworks. For those individuals: GET OVER YOURSELF! I once had the same frame of mind. Once you realise that these frameworks are supported by 1000s of other web developers and thus tested on countless platforms, you will opt for a massively supported framework. Dare I coin the acronym: MSF?
Enough talk, lets get to the duel. Which is better and why? Let the games begin.
Why take my word?
Good question. You don't have to take my word. But consider that I have been creating websites since 1996 and I have seen frameworks of all types come and ago. I was building websites in the days when 800x600 on Windows 98SE was the most popular platform and when mobiles where primarily for phoning people (and pagers existed). I've seen a lot. And recently I have experienced a lot of hurdles in regards to mobile support on both the custom built code front and the 3rd party CMS front. I have a good all round opinion when it comes to this stuff.
If you develop sites, syntax is a big deal. Which makes more since? Which is quicker to implement? Which won't fail you if you decide to drop it?
Why: It just feels like the way I code already. The css classes make sense and have short names. When working with Bootstrap I often think "god, why didn't I think of that already!?!"
So, which looks better by default and which are you going to have to spend hours on end banging out fresh design elements?
Why: It feels more "now". Foundation is nice, but feels much more technical in its design. While bootstrap looks like the way I want my sites to look already.
Which framework provides the best 'batteries included' package?
Why: It really depends on what you are looking for. They both cover 99.9% of the components you are going to use everyday. So it's down to the specific elements you need. It depends on the project. Therefore, I can't really decide.
Flexibility is extremely important if you don't want your site to look like everyone else's site.
Why: Foundation is much more stripped back in it's design styling and therefore is much more flexible. It also provides some nifty grid manipulation which I don't think Bootstrap does at the moment. If you are looking to customise the look of your project extremely, Foundation will be easier to override the default styling.
Support & Community
Why: When it comes to deadline hour and you are still trying to fix that bug, support and community matter. Hands down, Bootstrap appears to either been adopted by more users or has more people expressing problems and solutions for it. Therefore, It wins this. Its quicker to find solutions to common problems with bootstrap, which foundation seems a bit of a miss on alot of problems.
1. Choose Bootstrap if you like the way it looks, code the way it does and find yourself relying on QA sites and forums to fix problems.
2. Choose Foundation if you have some pretty awesomely designed sites, don’t care too much about syntax and are a "know it all".
I've used both. It generally has come down to the web design at the end of the day for me. On some projects, the boostrap style is 'bang on', while on other projects I need the design flexibility of Foundation. But thats just my experience.