Twitter Bootstrap vs Zurb Foundation

Probably the two biggest responsive frameworks available today. But which is best?

 

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.

Syntax

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?

Winner: Twitter Bootstrap

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!?!"

Default Styling

So, which looks better by default and which are you going to have to spend hours on end banging out fresh design elements?

Winner: Twitter Bootstrap

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.

Components

Which framework provides the best 'batteries included' package?

Winner: Both

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.

Design Flexibility

Flexibility is extremely important if you don't want your site to look like everyone else's site.

Winner: Zurb Foundation

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

You don't know everything and you never will. In times of need, the online community will save you from your boss or client getting really really angry at you. That is, if there is a community for your framework.
 
Winner: Twitter Bootstrap

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.

Conclusion

I bet you want me to give you a strait answer. So here it is (sort of):

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.


Comments

Saurabh Bongale @ 28th Mar 2013

Wow... this is really a nice comparison.

mantis @ 12th Apr 2013

Syntax :

I prefer Foundation.

Button success > btn btn-success

And it's one little example.

Default Styling :

I prefer Foundation, because i'ts minimalist design, better for personalisation.


for the others (componets, flexibility and support) i think same u.

But the new version of Foundation with sass mixing is perfect. I love that. Never i back to bootstrap ;)

Michele @ 4th May 2013

Hi, compliments for the blog. I've a big question about these two frameworks. Which is the best for SEO? I've a bad experience for xajax framework. I would change my website but I couldn't wrong another time. In your opinion, which is seo ready?
Best

David @ 4th May 2013

@Michele Bootstrap and Foundation don't really have anything to do with SEO as they are more of an HTML5/CSS framework. Yes, they have some javascript, but its up to you on how you use them. They don't do ajax themselves.

boostbob @ 29th May 2013

good point, really nice comparison.

Thomas @ 22nd Aug 2013

hands down, Foundation is far superior than Bootstrap

eh @ 14th Oct 2013

Nice post.
Regarding easy customization of Foundation elements, how would you recommend customizing things that Foundation's mixins don't expose?
For example, if I need to create a button or input field which only has a border on one side, not all 4. The mixins supplied by Foundation don't expose those as arguments.
BTW, I'm trying to use Foundation 4.

Add a Comment

required
required, but not shared

© 2017 Supadupa Web Design