I’ve been spending a lot of time lately with Twitter Bootstrap 3 – the new mobile-first version, and Foundation 4. It all started when I decided to check out Twitter Bootstrap. At that time it was still at version 2.3.2, the prior version to the current Twitter Bootstrap 3 RC1. I used it and liked it until I had a need to exert more control over how my site would look on mobile devices. When I ran into that issue, I hightailed it for Foundation 4. What I found blew Bootstrap 2.3.2 out of the water.
Now that Twitter Bootstrap 3 RC1 is out, I thought it would be worth comparing the two again to see if Bootstrap has gained ground, or ever surpassed Foundation 4 with their newest release.
The Tale of the Tape – Bootstrap 3 vs Foundation 4
Before we get into how well these frameworks work, let’s look at what each has to offer.
Each framework consists of grids, CSS components, and javascript widgets/actions. The devil is in the details so lets look closer:
Features |
Twitter Bootstrap 3 RC1 |
ZURB Foundation 4 |
|---|---|---|
| Grid System | 960 non-responsive/ multi-break responsive (phone <768px, tablet >768px, pc >992px and >1200 px) | single-break responsive (768px)* *Foundation 4.3 came out on 7/18/13 and includes a new experimental medium grid that’s also available via LESS. It will be fully implemented in Foundation 5. |
| CSS Components | Same or similar: Small and large grid, navigation, breadcrumbs, typography, code, tables, forms, buttons, visibility classes, pagination, alerts, progress bars, thumbnails Different: images, badges, list groups |
Same or similar: Small and large grid, navigation, breadcrumbs, typography, code, tables, forms, buttons, visibility classes, pagination, alerts, progress bars, thumbnails Different: Block grid, flex video, inline lists, pricing tables |
| Javascript | jQuery | Zepto / jQuery |
| Javascript Components | Same or similar: Modal windows, drop downs, pop-overs, scrollspy, sections/tabs/accordion, tool tips, a responsive lightbox (swipe enabled – ??? doesn’t say) Different: n/a |
Same or similar: Modal windows, drop downs, pop overs, scrollspy, sections/tabs/accordion, tool tips, a responsive, swipe-enabled lightbox Different: Adaptive images, site tour, form validation |
| jQuery No Conflict | Doable but must be somewhat knowledgable to implement. And even then, it may not always work according to their documentation. | Not listed in their documentation but easily implemented. |
| Browser Support | Decent IE 8 Support (except for CSS3 properties but it will degrade nicely). | No IE 8 Support (The basic components work well but the grid fails miserably. If you must, there’s a workaround.) |
| Community | Large community but very little that’s production ready when you want to incorporate it into your projects. You might get lucky, but you could just waste a bunch of time looking for what you need. | Small community but plays well with other ZURB products. Also, ZURB makes production quality stuff. |
| Documentation | Fairly decent but could be confusing for n00bs. Could do with some more explanation in a lot of places. Uses weird, non-obvious examples at times. | Really good the overwhelming majority of the time. A few things could use better elaboration but the documentation is definitely a few notches above Twitter Bootstrap. |
Let’s dig into this feature list a bit more to see what’s really going on.
Documentation
Let’s start by talking about documentation. After all, how can we learn to use the stuff unless we read the docs? I’ve scoured both sets of documents both for writing articles about them and in actually using them. Personally, I found Foundation’s documentation to be just about exactly what I need every time. Bootstrap’s docs aren’t bad but pretty regularly I think they could have been more explanatory. The result is that it’s harder to understand how to use Bootstrap, just going on the docs. If you’re comfortable working with LESS, SASS, or coding javascript, this may be less of an issue. But if you’re looking for these frameworks to solve problems for you and make it easy to implement, the edge goes to Foundation 4.
Winner: Foundation 4
Grid System
The grid system is the single biggest upgrade between Bootstrap 2.3.2 and Bootstrap 3. The biggest difference is the addition of a small grid, much like Foundation 4. The documentation for Foundation 4 does a great job of explaining how to use the small and large grid, and how to use them in combination. The naming conventions are clear and the math is always obvious: just make the total number of columns in a row add up to 12.
There’s also one incredibly useful class that Foundation 4 uses that, frankly, I don’t know how you do it in Bootstrap without coding it yourself. It’s called a block grid. What it does is span a certain number of columns with any number of list items. Think of it like this: Let’s say you wanted to have five logos span the entire width of the page (12 columns total). The block grid class will do all the heavy lifting of spacing those logos out equally. It would work just as well if they had to span 6 columns (half the page) or if there were any other number of total items, say, 8 or 3 instead of 5. To me, it seems like you’d have the occasion to use this class on every website since credibility icons and logos are all the rage these days. It’s incredibly helpful.
By comparison, I find Bootstrap 3 to be just a little weird. First, there’s the documentation. They go out of their way to tell you that there are four breakpoints but mention the fact that they’re using two grids pretty casually. I can see how having the additional breakpoints could be handy but it comes with a personal annoyance: the max div-width is less than 100%.
This means that you aren’t going to be spanning the entire page with an image. There will always be a gutter. I pretty much hate this aspect of Bootstrap.
Also, for what its worth, the Medium Desktop size (992px) was added from 2.3.2 to 3 RC1. Now we don’t have to suffer the 2.3.2 problem of having your only desktop size pegged at 1170px.
The best thing about the Twitter Bootstrap grid system is that unlike Foundation 4, it’s backwards compatible to IE8. If IE8 is a concern for you (it still maintains 10% share worldwide) and you want to use Foundation 4, they’ve got some code you can add to your site that will help.
Winner: Foundation 4. A bit of a toss up, but I’m giving the edge to Foundation 4. The block grid is something Bootstrap should implement themselves. The multiple break points aren’t really better than how Foundation 4 does it, and it’s possible to get your site to look decent in IE 8 using either framework. The docs are a little better for Foundation 4 and their class names make more intuitive sense. If you choose Bootstrap, you’re not going to suffer much by comparison, so in that sense it’s a toss up, but as it stands, Foundation 4 is still 5-10% better at the moment.
CSS Components
I could spend a fair amount of time explaining what each of the CSS components that these frameworks has in common do but it’s mostly self-explanatory (forms, buttons, natch) and besides, this page in the Twitter Bootstrap docs and this page in the Foundation 4 docs do a much better job of showing you what’s included.
Instead, I want to talk about their differences. This is what’s likely going to push you towards one framework or the other.
Twitter Bootstrap 3 CSS Components
Twitter Bootstrap 3 has three unique CSS components: images, badges, and list groups.
Images – With a few classes, images can be rendered as a circle, rounded square, or a thumbnail.
Badges – If it turns out that you need some stinkin’ badges, Bootstrap is for you. And by badges they mean the gray or white circle with the number in it.
List Groups – List groups are interesting because they can build a good looking, complex vertical navigation menu with just a few classes. Add links to your list items and you get something that looks like this:
Foundation 4 CSS Components
Foundation 4 has three unique CSS components: block grid, flex video, and inline lists.
Block grid – We’ve already covered this in the previous section but it’s worth pointing out again. A block grid allows you to equally space out any number of list items across a given number of columns. The result is something like this:
What you see are 5 logos equally spaced across 12 columns. While you could do this manually, adding or removing an icon would be a hassle. But with a block grid, all you have to do is add one more <li> and Foundation 4 does the rest for you.
Flex video – Riddle me this Batman, how do you expect your embedded videos from YouTube or Vimeo to look in your responsive design? If you use Foundation 4 and their Flex Video class, that answer is just fine. It adds a ratio that makes sure your video scales correctly to whatever size you need. If you use Bootstrap, you just have to hope for the best.
Inline Lists – This is what it sounds like. Foundation 4 makes making and inline list (great for menus and the like) super easy.
Pricing Tables – This is another common thing, and another thing that Bootstrap should copy. It’s not that we can’t design this kind of thing on our own, it’s just that having this already available makes creating pricing tables so much easier. To do the same thing in Bootstrap, you’ll have to go to the community. You can find a code snippet for Bootstrap on Bootsnip. Here’s how it looks in Foundation 4:
Winner: Foundation 4. No question. To me, what Bootstrap offers here isn’t very significant. The image classes don’t do much for me. The badges bit isn’t something I’m personally likely to use soon, and the list groups look neat but I can’t think off the top of my head of how I’d use them in any project I’m working on. On the contrary, the bits that Foundation 4 includes are all very useful. Block grid? Yes please. Inline lists and pricing tables? Absolutely. And Flex Video? I didn’t even realize that was going to be a problem until I saw that ZURB had created a solution. So yeah, I think I’ll be using that too.
Plus, Bootstrap has this really annoying feature of needing you to declare that your images are responsive. If you forget, then the image you forgot to make responsive, isn’t. Foundation 4, by comparison makes all images responsive out of the gate. This is clearly the better way to do things.
Javascript Stuff in Bootstrap 3 and Foundation 4
When I reviewed Bootstrap 2.3.2 and Foundation 4, I made a bit of a deal about jQuery vs. Zepto. Zepto is a lightweight version of jQuery that’s meant to be small and fast for mobile devices. It’s roughly 25% the size of jQuery. But, since we’re talking about 9k versus 36k, it’s not exactly a big deal – especially if you’re not going to the trouble to serve the right size image via Adaptive Images or Interchange.
In cases where Zepto fails, Foundation is designed to default back to jQuery. I say let’s just believe that both frameworks are built with jQuery at their core.
This presents one issue – and it’s an issue you wouldn’t know to look for unless you ran into the problem yourself – and that is, javascript compatibility. Jquery, as it turns out, isn’t compatible with all other javascript libraries. It has to do with the way the dollar symbol ($) is used in naming variables. Without getting into it, the point is, sometimes when you want to add additional functionality to your website (say, with a WordPress plugin), doing so breaks all of your Bootstrap or Foundation jQuery.
No Conflict Mode
The way around this is to put jQuery into something called No Conflict mode.
Twitter Bootstrap 3 deals with this issue head on in their documentation. The documentation is a little vague (ugh) and ends with a warning:
To me, this means that if you build a theme for a CMS (WordPress, Joomla, Drupal, etc.) using Twitter Bootstrap 3, you could have plugin problems somewhere down the road. The NextGen Gallery, for example, is the most popular image gallery plugin for WordPress with 7+ million downloads. It uses prototype.js and will break the ever loving crap out of your jQuery components unless you put Bootstrap 3/Foundation 4 into no conflict mode. So this is a real concern. If you plan to use Bootstrap with a CMS, just know this could be an issue.
I ran into this exact problem with Foundation 4 on a recent web design. I reached out to ZURB and within 24 hours one of their guys had created this Gist explaining in detail how to set Foundation 4 to No Conflict mode. He makes no mention of the fact that it might not work under some circumstances. Both frameworks might work just as solidly when jQuery is put into No Conflict mode, but that warning makes me think that if I had to choose one, Foundation 4 is a safer bet.
But What About the Actual Javascript Components?
When it comes to the actual javascript components, the two frameworks share more in common than what they have different. The main difference is in implementation. For example, both frameworks have pop-overs/dropdowns. Bootstrap separates the two ideas while Foundation rolls both into a universal dropdown plugin. Modal windows, scrollspy, a responsive lightbox and more are all included with both frameworks. But Foundation 4 includes three more useful bits: Interchange, Joyride, and Abide.
Interchange – Interchange solves the one huge remaining problem for responsive design – how can I serve different images based on screen size? This is a big deal when you think about it. Let’s say you have a big hero image for a site that’s 1000px across. That image could easily be 200k. When viewed on a mobile phone, the site will still look right because it scales the image correctly, but the user still had to download a 200k image just to see it.
Ideally, what we’d rather do is serve a small image to the mobile phone that’s sized appropriately. Now the image might be only 20k, a size-savings of 90%. The result is a faster download and a better mobile experience.
Interchange makes this possible by allowing you to define different images for different screen sizes/media queries.
If you’re using Twitter Bootstrap, you either have to use Interchange too (lol) or something like Adaptive Images to accomplish the same task.
Joyride – Joyride is a lot like WalkMe but without all of the overhead that WalkMe provides with the Firefox plugin to create your walk-throughs. What Joyride does is make it easy to create a walk-through of your website using simple overlays. You’ve seen something similar on Facebook or YouTube before when they’ve updated their designs. It’s an easy way to teach your user how to use your site. It looks neat too.
Abide – Abide is a form validation library. If you’re at the point to where you’re writing your own forms and error-checking them, then this is where you want to be. Twitter Bootstrap 3 doesn’t have anything like this.
Winner: Foundation 4. Twitter Bootstrap 3 doesn’t have a way to serve the right sized image based on screen size. This makes it hard to take seriously as a “mobile-first” platform. Maybe asking for that out of a framework is more than one should, except for the fact that Foundation 4 has it. This, along with Joyride and Abide make Foundation 4 the clear winner here.
Browser Support
When we look at browser support for these frameworks, it really comes down to one question: do you need IE 8 support? If you do, Twitter Bootstrap 3 has you covered much better out of the gate. It won’t look spectacular, but it at least degrades into something reasonable. By comparison, Foundation 4’s grid is written with CSS3 attributes, which aren’t supported by IE 8. The result is a totally jacked up site when viewed in IE 8.
However, as I’ve learned is the case with all things ZURB, they’ve got a workaround. To be clear, the problem with Foundation 4 lies in how its grid is constructed. The other elements work just fine. Once the workaround is in place, your site should also degrade nicely for IE 8.
Winner: Twitter Bootstrap 3. IE 8 “support” is included. It’s possible with Foundation 4, but it’s not really a native part of the package.
The Community
When it comes to the community, you have to ask yourself this question: What do I want from it?
I say that because a cursory glance will show you that the Twitter Bootstrap community is huge in comparison to the Foundation 4 community. Here’s a list of 319 different Bootstrap resources. On the other hand, with Foundation 4, you get the backing of an actual company – ZURB. If you have a question about Foundation 4, you can go directly to them.
This is why, I suspect, that Foundation 4 doesn’t have the community that Bootstrap has – they’ve got ZURB, which in my view, is better.
I’ve had the opportunity to spend some time in the Bootstrap community reviewing the available resources and I’ve also badly needed an answer to a Foundation 4 question (the whole No Conflict issue above). I’ve spent hours mucking around with things the community has done in Bootstrap, of which almost nothing made it into a final design. I’ve also had the experience of wondering if ZURB had a fix for my problem to routinely find out again and again that yes, they do. (Interchange, for example.)
This is why I say that you have to ask what you hope to get out of the community. In my experience, looking at what the community is doing is like taking a look at everybody’s toys. It’s neat and stuff but you’re not going to turn around and use it in your next project immediately. It’s going to be an example that helps you get further down the road on building something yourself. But with ZURB – the answers are there. Block grid is a real thing. So is Orbit. So is Interchange. And the hits just keep on coming.
Winner: Foundation 4. Your mileage may vary with this one but I’ll take ZURB over the Bootstrap community just about any day. Those guys are geniuses.
Conclusions
In the battle of the mobile-first frameworks, which one – Twitter Bootstrap 3 or Foundation 4 comes out on top?
If IE 8 is a primary concern OR if you need a non-responsive grid, Twitter Bootstrap is your winner. It’s clear that Twitter Bootstrap 3 has made significant strides towards being a reliable mobile-first framework since Bootstrap 2.3.2. However, in just about all the ways that matter, Foundation 4 still has the edge.
You’re not going to be messing up, or really even hurting yourself too bad, by going with Twitter Bootstrap 3. You just won’t be doing yourself any favors.
With Foundation 4, you get a few things you can’t get from Bootstrap, and for my taste it makes all the difference. You get:
- easy to remember class naming conventions
- images that are responsive by default
- containers that will go to the edge of the screen
- Block Grid
- adaptive images
- walk-throughs
- form validation
- pricing tables
- flex video
- inline lists
- No Conflict mode that just works
- ZURB
If you use Twitter Bootstrap 3, you’re going to have to find alternatives to everything in that list. Now, is that truly something you want to do? Or would you rather download and start playing around with the clear winner: Foundation 4.
For the comments: If you’re a Twitter Bootstrap 3 believer, hit up the comments and tell me why. Is there something I’m missing that you love?
Pingback: Twitter Bootstrap vs Foundation 4 - Which One Is Right For You?
This is pretty heavily biased toward Foundation 4, so as a comparison, I can’t say it holds much weight.
A key indicator to me about a project is it’s popularity and level of activity and also it’s commitment to supporting a wide range of web browsers. That’s probably a close race, but bootstrap has the edge.
Browser support – for commercial developers, having to support older version of internet explorer is an unfortunate necessity – and foundations decision to drop support for ie8 is a deal breaker.
This should’ve been flagged up as a key consideration when choosing a framework.
Industry standards – like it or not, bootstrap is currently the leader for css frameworks and as such, has a healthy community generating themes, add-ons etc. for it.
The javascript components, such as Abide and Joyride are fantastic, but at what point does a framework start to lose it’s simplicity and become bloated?
Regarding the CSS components, I mean really, citing a ‘pricing table’ as a feature is ridiculous. That’s something you build up out of other components, it’s just not generic enough to even be warranted in a framework! – and for that, you say foundation has the edge?
If you approach either of these two projects as your be-and-end-all for your project, that’s great, but where both of them shine is the ability to cherry-pick and modify.
Am I biased toward bootstrap? In as much as I’ve used it extensively, yes. I keep going back to look at foundation – and heck, I’ve lifted the nifty block grid out of it – which incidentally, is a piece of cake to code yourself anyway. What always drives me off, is the issue of ie8.
I’m not sure where you got your stats of 1% from, as ie8 is till close to 10% of market share – and a great deal of that is in business.
If your building commercial websites, ignore that market at your peril!
I’ve used both frameworks and Foundation does support IE8, it’s IE8 that doesn’t support responsive grids and CSS3/ HTML5 features. You can add the IE8 polyfill to make IE8 grid fixed. Foundation is a responsive framework and doesn’t need to be backward compatible.
If I was you I would charge more for IE8 and superseded browsers. you should sell modern solutions to your clients not let them dictate features such as compatibility without knowing the facts and costs.
Well, apparently you do not live in DC or work with government clients. IE6 was still on government computer about 3 years ago …
I’ve worked with hospitals before that are full of IE6 and IE7. If that’s a need for you, you’re going to be unable to use any modern framework. Those older browsers can’t handle the modern web.
Very biased towards Foundation 🙁
But biased with a reason. I’ve used both and definitely can tell you that Foundation 4 is a better product. If that’s bias, it’s informed bias, which is totally acceptable. If you’d rather just have the deets, I did that in a comparison between F4 and Bootstrap 2.3.2. http://abetteruserexperience.com/2013/05/twitter-bootstrap-vs-foundation-4-which-one-is-right-for-you/ The thing is, it’s not close. Foundation 4 is a better product.
Agree. Even though both frameworks have their pros and cons, Foundation is a far superior product. I have done extensive testing with both tools and Foundations is just a better suited solution. It is true the initial barrier may be higher with Foundation, it is just a matter of learning a couple extra things that really pay off. Additionally, Sass is MUCH better than LESS. LESS becomes limited when dealing with real logic handling. That right there is enough of a good reason to go with Foundation.
If Sass is paramount for you, It is possible to use Bootstrap with Sass, just make a little search in Google and you’ll find it.
Your point of Zurb being a company versus Bootstrap being a community is technically true. Although Bootstrap was born out of Twitter, and I’ll take the clout of Twitter over Zurb.
I don’t share the same perspective that Foundation’s documentation is better. I think they are both on par with one another (in terms of documentation), each with their own strength’s and weaknesses.
In terms of UI presentation elements I personally feel that Bootstrap brings a greater level of polish than Foundation does.
In the end I think it comes down to research (articles like this one) and personal evaluation. I evaluated Bootstrap vs Foundation and choose Bootstrap. It works great for my needs, I’m very happy with it and looking forward to when version 3 if officially released. Even after reading this article and taking another look at Foundation, I’m still a fan of Bootstrap.
Just a note, the guy behind Bootstrap was originally employed at Zurb and took shared code and ran with it at Twitter. Bootstrap “polish” as you call it, is better “out of the box”. The more customization in style you wish to achieve, i have found Foundation to be easier to update. I have also experienced less “responsive design” issues with Foundation when being used on a phone.
I didn’t know that story. Interesting.
Yeah there was a debate the two had (Mark vs Zurb) going around about how he moved on with the ideas etc and who was right etc etc
Mark Otto is a designer living and working in San Francisco. Originally from Wisconsin, he freelanced his way through high school and college before dropping out and moving to California to work at a design firm, ZURB, in 2007. There he designed and developed dozens of projects with clients large and small, including a website for Britney Spears. In early 2010, after a two-and-a-half year stint at ZURB, he left to become a product designer at Twitter.
It was difficult to stay with this article after you gave the “Documentation” to Foundation. While Foundation’s documentation might be a bit better than Bootstrap’s, the community around Bootstrap has produced 100s of articles that supplement any issues the core docs may have. You even point this out later in your article (where you give Foundation the win for “Community” because they have corporate backing, which isn’t a community).
I would love to think that the rest of this article is fair and balanced, but those two sections are so obviously biased that I must assume that the same holds true throughout.
He’s been honest and open about this, and even words his bias :
Also the fact that a Community had to “produce 100s of articles that supplement any issues the core docs may have” is a sure sign about the quality of those docs.
It also indicates that there is much more variety in the level of competence between Bootstrap users, than there is with Foundation users.
Apparently there is a large group of Bootstrap users which just “doesn’t get it”. They must be clueless/baffled by this framework.
N.B. Foundation is definitely not flawless. But apparently there is no need for extensive write ups to supplement the F3/F4 documentation.
About Foundation not having Community. You and all the other nay sayers are completely wrong. There is : https://groups.google.com/forum/?fromgroups=#!forum/foundation-framework-
Going to a company isn’t called community. It is called support.
This article reads like a paid ad.
And he explicitly makes that distinction. Again, comparative stats seem to be lost on the madding crowd.
actually I’m using foundation 4 now in my new personal project because I found its components more and better and the css naming more easy to remember and adding some customization style on it .. and their website and documentation are really great.
One thing I was hoping to see compared. Size and load time. Make two identical single page sites. Tell me which one will load faster/be smaller size. Thanks
I’ve also been interested in size and load time. I built my first real-world mobile application using jQuery Mobile. It works, but the biggest complaint I hear about it is that it is so slow! I’m looking for something that has a much smaller footprint and faster response.
Yes, the response time is very very important, especially for mobile sites. A more comprehensive comparison is much appreciated.
This is not a good review. You highly favored Foundation. I suggest looking at another review which is fair not biast.
I honestly don’t understand the charge of bias. It’s a comparative review. I prefer Foundation 4. And more than that, my reasoning is totally explained. So crying ‘bias’ isn’t helpful here because nothing is hidden.
I’ve used Foundation 3 & 4, and Bootstrap 2 & 3. I’m with you 100%. Foundation is the best here, even if you need IE8. There are plenty of info about makink Foundation working in IE8.
Then maybe you didn’t read the article. Take this bit:
Bootstrap
Large community but very little that’s production ready when you want to incorporate it into your projects. You might get lucky, but you could just waste a bunch of time looking for what you need.
Foundation
Small community but plays well with other ZURB products. Also, ZURB makes production quality stuff.
So Bootstrap’s large, thriving community is a bad thing, and Foundation’s small community is no big deal because it plays well with other ZURB products? You can’t get much more biased than that.
By way of example, StackOverflow has 14x more questions about Bootstrap than they do about Foundation.
Agreed. I much prefer hearing other developers opinions. Much more than there ability to copy and paste specs. Cheers.
@meir bootstrap has 14x times more questions because bootstrap has way more users.
Awesome work, thanks.
I think the reason people are claiming that this is a bias “review” is because it feels like every time you mention a shortcoming of Foundation, you seem to dismiss it as a shortcoming but if it’s a short coming of Bootstrap, it’s the end of the world.
Yes my wording may be slightly exaggerated, but I also felt like this was a “Why you should choose Foundation” article not a “Which one it right for you”.
This is just my 2 cents, but it’s worth more than that 😉
You just missed one more thing. Even where bootstrap was the obvious winner, he managed to make it lose.
Ben, I really appreciate your series of articles on Bootstrap/Foundation.
Quick question: What’s your source that IE8 is less that 1% of browsers. On my company’s site, unless I’m reading my Google Analytics dash wrong, we have about 9% of visits on IE8. Looking at the info that W3Schools publishes (which is based on their own logs) shows that IE8 is about 5%. What are your thoughts?
Anyway, as I’m about to dive into a new project, I’m torn. I like what you’ve been saying about Foundation. Love that it uses SASS. But leaving IE8 users behind and messing with Zepto worries me a little.
Good question on that citation. The site I got that info from was this one: http://theie8countdown.com
The only problem is, I quoted it wrong. Worldwide usage is at 10%, not 1%. I’ll make the proper adjustments to the article.
It’s funny, I’ve been beating the ZURB guys up recently on this IE 8 issue. My feeling is, if the hack is available, why not include a version of it by default. Because there IS a hack: http://zurb.com/article/1204/getting-foundation-and-ie8-to-play-nice
As for Zepto, I hear ya. ZURB uses Zepto instead of jQuery (by default) for size issues. If you’re less concerned with size (jQuery is around 20k larger than Zepto) than your desire/ability to hack away at it, you can use jQuery instead, since it’s automatically called for older browsers (including, incidentally, IE 8).
I’d say give it a shot. The IE 8 hack is a real issue, but if you can get beyond that, there’s a lot to like.
Nice write up ben. We have been using Foundation for a while after switching over from bootstrap a couple of years ago. It’s awesome. for me the major differences are:
sass.
i prefer the js components (they seem less buggy and there are more of them)
blockgrid.
If you need to support ie8, foundation is the least of your troubles. The patch works great.
Zepto is a non issue, especially with F5 dropping it.
I realize that you asked Ben specifically, but here is another resource : http://gs.statcounter.com/
Below the graph, at the bottom left, at the Stat: Browser dropdown, you can also select Browser Version.
The page is linked from this web page : http://www.internetworldstats.com/stats.htm
Crossing my fingers this comment doesn’t get flagged as maps because of the links.
Opinion is bias regardless of whether or not positive or negative. “I can’t think off the top of my head of how I’d use them in any project I’m working on.” That is not a comparison, that is an opinion, and to make matters worse one that assumes to know how another developer is going to be using a framework rather than taking the merit of it’s existence.
I don’t personally like Bootstrap 3’s new grid as it doesn’t do what I want easily and relies too heavily on responsive design, but when my first taste of Foundation 4 is something as opinionated / fanboy-ish as this it taints my view of Foundation’s community.
This is so far the best and most honest write up of the two.
Alas you forgot about RTL support. For grid, typography,etc.
BS3 no, F4 yes.
For me it’s F4 all the way, even though it has some perpetual buggy components (e.g. top-bar).
Reason: I tried both extensively. Started with BS2 and F3 over a year ago. The weird thing is that with BS2/BS3 I always have to re-think how to do certain things, or look up how to do them. And with F3/F4 it just comes naturally. Once you’ve been through the docs and played with the samples after a major release, or new addition. You just use the F4 framework without thinking.
I wish though that Zurb would spend more time on fixing/stabilizing components, instead of adding more and more. A feature freeze on F4 would be really nice now. And more important 1 or 2 final bug fix releases for F3. Still important because of older browser support, for some, but not me. Or when you still have clients with F3 based websites.
But hey, I can;t complain too much for real free stuff.
After finding Bootstrap ver2.3.2 to be an annoying nuissance to work with, I checked out Foundation 4 and started using it. The problem with Foundation 4 vs Foundation 3 is that the documention for Foundation 4 is very incomplete. Often the links on the foundation website under the ver 4 documentation will take you to ver 3 docs, which dont apply. Do some research on using tabs for example. This becomes immediately frustrating.
Also, things that were simple in Foundation 3 are now more complicated in Foundation 4. I like the idea of using sections instead of tabs, accordions etc. But the documentation is so vague there were obligated to look at everything from a Foundation 3 perspective, unless it doesn’t actually apply, which is most of the time.
My suggestion to Zurb: figure out how to do simple things like adding tabs to dropdowns, making pill style nav “sections” actually tabbable, and add that wisdom to the foundation 4 documentation. Not getting around to it? They why did you release ver 4 to begin with?
Here’s the issue: I can make it all work on my own, coding around it. But the whole point of wanting to use Foundation 4 to begin with was to have sites working on all devices. Its a waste of my time to hack Foundation 4 to get simple functionality that should have been documented well to begin with. Upgrade the documentation in Foundation 4 to make it complete, or forget it.
Thanks!
From what I’ve heard in v5, the documentation is being completely redone.
I should recant a bit from my initial post above (ie) the documentation for F4 is actually not too shabby. The bummer for me was how much I liked the idea of using Sections yet they could use better (more complete) examples there showing *exactly* how the base markup should be structured for consistent responsiveness. Of course I got tabs in content dropdowns to work, although it seems like a hack to me, yet I only used their native CSS to do it.
The compass Sass download is confusing (ie) the documentation mentions an /scss dir but the dir that comes down is labelled /sass and none of the directory architecture looked consistent either. My site is working fine, sass is compiling fine, but I’m suspicious that something is not quite right because the documentation doesn’t match. Still scratching me head on that. I need to call them or send them an email.
My .02 on where the win is:
Frameworks are great for saving time, but not when devs have to hack up the base code to get things to work, which is what I absolutely cannot stand about Bootstrap. That, and the fact that I found all sorts of really sloppy CSS in their downloads, including misspelled class names and un-terminated class definitions, on top of really wild behavior when merely taking some very minimal styling away. It was like playing a game of Jinga while developing a complex website.
Somewhere on the Bootstrap site, possibly in their github or on a support forum I read a post from one of their devs claiming they don’t support Breadcrumbs well in v2.3.2. Whats the big deal? I built out a customized breadcrumb menu integrated with a complex dropdown in about a day using jquery and their base classes. I’m still wondering what the great mystery is there, and granted my solution is awesome, but instead of just assuming something cant be done, why not just figure it out?
Toward the end of my experience with Bootstrap I had amassed so many overrides I couldn’t help but laugh at how ridiculous it was. Here’s the ultimate kicker though: I have rebuilt half of the site on Foundation 4 in the past several days and I have had to write – not joking – only 10 CSS classes. Amazed.
Zurb #1!
I don’t understand all of the accusations of this article being biased. It is simply the author providing his opinion based in his (fairly thorough) observations.
The one point I don’t quite agree with is the documentation, because I quite like Bootstrap 3’s.
I haven’t used Bootstrap 3 in a serious project, but I can tell you that after using Bootstrap 2 for over a year and switching to Foundation 3, there is no contest. The conventions, the code, the support… Zurb does everything right. Hell, they even sent me some Foundation stickers when I sent than an email praising their work. Does it mean I am biased because I feel that Foundation is in (almost every way) a superior framework?
I’m not sure why people argued that the review is biased? But I think you made the point that you are biased with reasons and I think those reasons make sense. I’m a Bootstrap 2 fan. The point that Bootstrap changed all “span” classes to “col-*” classes made me feel like they are hiring Zurb guys. All the logic are the same. What I really DON’T like is the grid with “box-sizing: border-box” logic. Why? Because it doesn’t use the normal behavior of CSS. And now Bootstrap 3 follows the same logic…Before I read the review, I thought that the community benefits to Bootstrap but I changed my thought because of the review you write. I’m kind of agreeing with the author. On the other hand, I think putting Bootstrap skill in your resume made it cooler than putting Foundation 4 as I feel like Bootstrap is more popular than Foundation 4. However, if you interview with a senior front-end guy, I think you will be OK by putting Foundation 4 instead of Bootstrap 3.
If you ask me, I think Foundation 4 provides more features comparing to Bootstrap, it depends on you are going to use those features or not. The only thing that I feel Bootstrap has advantage over Foundation 4 is the documentation. I’m a front end guy so I have no problem with both documents but I asked a couple of middle-tier developers, they say Bootstrap documentation is better…
Those are my 2 cents. 🙂
I’ve just recently gotten into using Foundation 4 and 3 and with some considerable effort reading contradictory accounts was able to get F4 to render in IE 8 and was able to get NivoSlider 3 (which is Responsive) to work in place of the horrible Orbit slider that is part of F4/3.
What I don’t like is having to “de-style” some of the elements. The default CSS comes with some visual style declarations beyond layout needs and it’s frustrating to deconstruct what these are to make each project more modular in terms of the look rather than the layout.
Is Bootstrap 3’s default CSS similarly laden?
Yep. Both have default styles.
I’d love to know how you got the Nivo slider to work with F4. I’ve been struggling with that very issue.
It was very difficult and frankly I’ve obliterated it and went with Bootstrap 3 as I find the fixed footer and fixed top navigation dead easy to get working across browsers (though Mac versions may have an issue with footer) and bxSlider working. I’m sure Nivo would be fine too.
All I remember is getting rid of Foundation 4’s Zepto and struggling huge to get it to work. I found it so unsatisfactory and troublesome I ditched it completely.
Hey Ben, quick question:
What about tabs in F4? In F3 there were numerous ways to implement tabs, nested tabs, etc. With Section (which as a concept is great!) it looks like nesting is not supported? And why no pill tabs? The documentation is skant in this area, and the resources I have found online (github) show it to be an unfixed bug / unimplemented functionality? Whoah nellie… this is not ok.
If that is the case than Foundation 4 provides limited out of the box functionality for tabs compared to the “less than amazing” Bootstrap. I fixed the nesting tabs bug on my own here on my side, but whatever they did at Zurb when they designed the F4 Sub Nav (formerly known as Pill Tabs) appears to have locked pill navigation down.
Can anyone get pill tabs (specifically: nested within a top level nav content tab) to work? If so I’d like to see how it was done, jsfiddle etc.
The quick answer is to just restyle a regular set of tabs, etc. But I have a long day here and I really dont want to do that. I shouldn’t have to with Foundation 4. Why cant we have something that seems like basic functionality working out of the box in F4? I’m not following the absence of logic, did I miss something obvious implementing Section with Sub Nav for tab use?
Lmao… couldn’t resist it.
Ok lads, the question regarding “Pill Tabs in Foundation 4” haunts the internet so without being cheeky I’ll go ahead and save kind Mr Ben some time:
So… after finally looking at this for a minute this morning (if I have this correct):
It appears that in Foundation 4 the concept around tabs is that dev’s will be restyling them anyway, so whether its a regular looking tab, a pill tab or just a link bar, it doesn’t matter. Just use Section and restyle as needed. There is no documentation that I have been able to find on the Zurb site that spells this out clearly however, so this will be confusing for folks coming from the Bootstrap camp.
*I’m assuming I’ve got that ^ correct.*
Sub Nav (seemingly the direct descendant of Pill Tabs – hence the confusion) appears to be meant for, well, being a sub nav and not a tab system, thus just links only. I personally code a lot of things “outside the norm” and would like to see greater flexibility in this area. Why not? Again, no explanation found so we’ll choose not to abuse definition lists to make tabs… lol.
But if you really really want to, this may be the link for you (not my code):
http://jsfiddle.net/ademaro/WwrsX/
Thanks again for the great article. I think there are probably a few areas where Bootstrap appears to excel, but overall Zurb still feels like the better choice.
I think trying to compare Foundation and Bootstrap in general is a bad idea. They aren’t meant to do the same thing. They are both web design frameworks, but they share nothing more.
Foundation is meant for a professional designer looking to create a (for the most part) unique web site with their own styling. It’s great for that. Bootstrap, however, is meant for developers who don’t want to design their own front-end while they quickly throw together an app.
I’m seeing a lot of people say they haven’t used Bootstrap in a “serious project”, but that’s kind of the point: it’s meant to be a framework that does everything for you. Foundation is meant to be a framework that changes for you.
Basically, neither framework is better than the other, and never will be, because they solve different problems.
You couldn’t be more wrong. They are both made to be pre-built libraries for HTML/CSS development, with some convenient Javascript plugins as well.
You can’t characterize Foundation as being for “designers looking to create a unique website”. That’s YOUR subjective opinion on the user base. The fact is, any designer can use BS to create a unique styling as easy as Foundation. However, Foundation is more unique out-of-the-box simply because it’s less popular and therefore less common. If 80% of people used Foundation and 20% used BS, the situation would be reversed and BS would be more ‘unique’.
You also can’t generalize and say that BS is for devs who want to “quickly throw together an app”. I’ve built large SaaS apps projects that have taken more than a year with BS. It has nothing to do with speed. Foundation can also be used to “quickly throw together an app”. The fact that you see a lot of quickie websites using out-of-the-box BS styling is due to BS’s popularity, nothing more.
Another way to compare the two is to compare the actual files they consist of. BS gives you a CSS file and a JS file which includes a selection of plugins for use on any website. Foundation offers you… exactly the same.
Are you married to Foundation 4?
No, we just blow each other from time to time.
Pingback: Twitter Bootstrap 3 vs Foundation 4 | IT Media Connect
Hmmm, this site uses Foundation. Hahaha…just sayin. Anyway, I started with Bootstrap 2.3 ish and thought it was really cool for the sheer convenience of it. Then I tried to customize certain aspects and it was a real headache. Those old school gradients looked like shit. That led me over to Foundation 3. I immediately liked the commonsense class names for the grid as well as the simplicity in customizing a simple button. I thought some of the javascript components were cool too. Next I started using Foundation 4. There were some upgrades but nothing too crazy. Meanwhile, virtually every design and code marketplace, development product, etc were talking about Bootstrap and Bootstrap Themes. I ignored them and continued to use F4. Next, Microsoft announced that Bootstrap would be included in several templates in Visual Studio 2013 (my IDE of choice) and I was a little bit pissed off. What about Foundation? Now, I am ready to start a series of coding projects and decided to take another look at Bootstrap. This time we are looking at Bootstrap 3. I must say that I will be leaving F4 (Although I may snatch up a couple of components on the way out) for Bootstrap 3. B3 has grown by leaps and bounds and is very polished now. The class names are better and the performance is impeccable. Many of the B3 features just make sense and are VERY useful for real world projects. Unfortunately, Bootstrap 3 may be the demise of Foundation 4, or not. I am still there are those who are diehard ZURB fans.
I am currently in a .NET Project to improve the look and feel. I was looking at B3 but haven’t found an example about a complex form. Only simple forms with a couple of labels and textboxes and in a single row every label and every textbox like this: http://getbootstrap.com/css/#forms
I was looking for complex form samples and landed at F4 where I found the ideal example I was looking for: http://www.w3resource.com/zurb-foundation3/forms.php
Now I hear from you that Microsoft has announced to include Bootstrap, maybe that will be a reason to lead me back to B3. Do you or anybody else know where I can find samples for complex forms using B3?
Thanks
Not sure. But you may be able to mix and match some elements from F4. Its really just a matter of experimenting a little bit.
I can easily achieve all those styles using BS3
I had a similar experience but haven’t bothered to look at B3. The documentation for F3 appears to be more complete than for F4, at least it seems so on the surface, until one realizes there is an intuitive logic there (ie) if its not documented just put it together on your own. I think in general the bar is held higher for Foundation dev’s regarding their skill level and experience. Bootstrap is the opposite: anyone can get started with Bootstrap. To me it belongs in the realm of WordPress-ish / Dreamweaver / mouse-clickity / wsiwyg web design. Meh. Like many others have said, people use Bootstrap for sites they don’t care about. Also, Bootstrap borrowed a lot from Foundation for their ver 3 release. My view of Bootstrap is that without Foundation it would still be a mind-suck to use, just more than it does now.
Why did Microsoft pair with Bootstrap for VS 2013 templates? Easy: historically Microsoft always builds alliances with the bigger companies, in this case Twitter. The technology or quality of the technology is irrelevant.
The quality of the code in Foundation 4 is miles beyond what Twitter has been offering. Just look at their js files and compare them sometime – B2.3.2 was a rats nest of really cludgy looking code that appeared to have been tossed together haphazardly. And beyond that, trying to do anything rationally sane with Bootstrap CSS was like playing a continual game of web Jinga. It was beyond annoying and also a sign of poorly thought out design.
One suggestion to dev’s out there looking at Foundation 4 (especially if using Windows): if you want to get the most out of Foundation one should be using it with Zend. It’s a great combo.
The component TOP BAR / MENU in Responsive Mode is great, allows navigation Horizontal and that is not possible with B3 (and will not be in this version)
ThankYou the Review is great !
would be interesting to know which of the two is more accessible (W3C)
I just want to respond on one issue that you are comparing… jQuery No Conflict mode support. I find your advice on this issue specious at best and dangerously ignorant at worst. I say ignorant because you clearly don’t understand how No Conflict mode works and I say dangerous because you’re giving professional advice on the subject despite this ignorance. That’s irresponsible.
First of all, jQuery conflicts have nothing to do with how variables are named. It has to do with how functions are named. Most libraries (jQuery included) have a primary function which is used to encapsulate all their functionality. In jQuery, this function is assigned the name $() by default. Conflicts occur if you’re mixing in jQuery on the same page with another library that also defines a function with the name $().
jQuery No Conflict mode works by not assigning the main jQuery function to $(). By default, jQUery also claims the name jQuery() for that function, so the functionality is still available as jQuery(), or you can assign the function to another name of your choosing. The Gist that you posted uses this jQuery method ‘jQuery.noConflict();’ to achieve this. This is the EXACT SAME WAY you would do it in Bootstrap. Let me reiterate. THERE IS ABSOLUTELY NO DIFFERENCE in how Bootstrap handles No Conflict mode compared to Foundation.
So why do the Bootstrap devs warn of possible problems with third-party plugins? It’s because there are many improperly written jQuery plugins out there. A properly written plugin would never use the convenience-named function $() but rather the safer name of jQuery(). Or, if they chose to use $(), they would assign jQuery() to that name within a closure, which is a 100% safe method of avoiding namespace collisions. This is what jQuery recommends in their plugin guidelines but people are people and can be lazy or incompetent.
It’s important to note here that if a plugin does not safely use jQuery(), then any $() conflicts would not be resolved in No Conflict mode. But that applies 100% equally to Bootstrap as well as Foundation. So what is the significance of the Bootstrap devs warning of possible compatibility problems? It just means that they are more honest about what can go wrong, nothing more. If you email the ZURB devs for clarification of this, they will confirm what I have said.
p.s. A plugin which doesn’t properly use the jQuery() function name can be easily fixed with two lines of code. Just wrap the entire plugin code in these two lines:
(function($) {
… plugin code here
})(jQuery);
Thanks for putting this into words. I cringed at the author’s disingenuity (or ignorance, hard to tell) in claiming that Foundation somehow handles noConflict better than Bootstrap, when it is a jQuery feature that works exactly the same regardless of what frameworks you build on top of it.
Thanks for the write-up! (Just thought I’d drop some kind words into the internet). Honestly, though, I appreciate the detailed article. I just discovered Foundation and now I’m actually considering using it.
I much prefer bootstrap 3 over foundation 4 as a systems developer. I don’t have time to waste on Foundation to make it look pretty when a boss/client wants to see something. BS3’s base styling, typography, and styling make it head and shoulders above foundation in my opinion for that very reason. If the designers want to play with something else, that’s fine, but that’s beneath me at this point in my career.
If you set out with a clear winner already in your mind, and then find a bunch of supporting reasons, then its called being biased. I’ve also used both frameworks extensively and your reasons for foundation just show what you set out to prove. This would not help anyone looking for clarity
Actually, I used Bootstrap initially and didn’t even know about Foundation. Built a whole site in it and liked it. I found Foundation, built a website in that and now have an insight into both frameworks. This article was written trying to get across that insight. If that’s bias, then it’s the best kind. But the truth of the matter is, Foundation is superior to Bootstrap in ways that matter. But, still, I readily concede that there are situations where you might prefer Bootstrap.
I’ve found Foundation the better framework (I use both depending on client needs IE8 etc) because it has more responsive hooks which gives you better control over various viewing regions (viewports).
Pingback: Twitter Bootstrap 3 vs Foundation 4 | Didier Grand - Webdesigner
Hi All,
I’ve been looking into them both and like them both. I do think that any time somebody says “you should just upgrade your browser” it shows a real lack of understanding of large corporations, government and military or financial institutions. Easy to say for a developer that purchases and maintains their own equipment, not so easy for large organizations who may have their own custom software that was developed to run in ie8 when it was ahead of the game instead of behind it.
My real reason for posting though is that I was focusing on Foundation initially because I prefer sass, but I noticed when reading their documentation which is a huge scrolling page, that on a first gen ipad, it was very very slow. Unacceptably slow… like scrolling didn’t work very well at all. Now this is just a big huge page and that’s not a use case that I’d focus on anyway, but I thought I’d try Bootstraps documentation which turned out also to be a big honking page and it ran like lightning.
This is a first gen Ipad so this is probably a worst case scenario, but so then I tried the same thing my nexus 7. Not quite as bad, but similar. It seems like the mouse events are getting lost when just trying to scroll a big honking page, or it will start scrolling and stop with a jerk as if some cpu calculation is keeping the browser from updating.
Not a dealbreaker. I think Foundation looks really nice and I don’t anticipating using big honking pages anyway. But since I didn’t notice any discussion at all on performance I thought I would bring this up and ask if anybody has done any more thorough examinations of their performance differences on various devices.
Thanks for any thoughts and thanks for your articles on this.
One difference that I noticed
To all the commenters who found this article too biased, can any of you post a link to a less biased comparison? I’m undecided so additional reading would be helpful.
It’s so biased, I couldn’t carry on reading. I’m not the only one to say so
Community and CSS are just two things that glaringly belong in BS 3’s camp that most (if not all) other comparisons on sites note
Poor article at best
I don’t know much about these two but I trying to decide which one for to use (for a big project) and even I think this is not a comparison. This is more “use F4 cause I like it better”.
It’s a little hard taking this as an actual comparison when u set F4 as a winner in community when BS has a much bigger community? If I want todo a thing that somebody have done before it will be much easier to find this via google.
This is like saying a Volvo is faster than a ferrari if u just push the gas pedal down quicker….yeah, I know, it doesn’t make any sense. Sure maybe F4 is better if u ask Zurb but that is not a community…ehh…error?!
Also feels like things BS are bad at are worse that things F4 is bad at..
Just my oppinion on this.
/jquery-zf-php-ninja
I have used Bootstrap 2/3 and Foundation 4 extensively. I now stick with Foundation 4. One of the main pro’s I hear Bootstrap users say is that the BS3 UI components are nicer and more polished, and I would tend to agree. However, I find that argument to be a almost a moot point. 99% of the time we are designing our own buttons, forms, and other UI components, unless we are rapid prototyping a site, I would not want my site to look like a ‘Bootstrap’ site. You can actually see which sites are built with Bootstrap because they all use the same looking components, which will lead to a more uniform looking web. Although now there are downloadable themes for both Bootstrap and Foundation if you look around.
The bottom line is – use what you are most comfortable with!
My team kinda works with both, and I have to say I really prefer Foundation, specially because of SASS. I know you can have SASS with Bootstrap but I haven’t found any of the available solutions reliable.
However, it is easier to find community based solutions and packages for Bootstrap and that is the reason we used it to create a backoffice for our CMS.
Analyze and scope of the project and choose the one most suitable for you. Two frameworks are easy to work with.
For example: In the company I work I use the bootstrap 3 because we need the site to run seamlessly on Internet explorer. Already in my freelancers usually use 4 Foundation whenever possible.
I love the Foundatiion because of swipe native menu. In bootstrap 3 is a bit tricky to create the swipe menu. The html markup ends up getting quite polluted.
I use both Foundation 3/4 and Bootstrap 2/3 often and I have to say that which one is best? It depends. I don’t know that their is a clear winner for every situation. There is plenty of this that has been written about on SO et. al. if you really want to get into the details. There are lots of ways to accomplish very similar things in both packages. I can also really appreciate the responsiveness of Zurb on their twitter (do those guys ever sleep?) but I can understand the reluctance to an open source project being driven by a commercial entity. Given the extremely permissive MIT license, it seems likely that things will continue even if Zurb choses not no support it in the future.
Having said that, there is one clear difference that I really appreciate about Zurb Foundation. The culture of the company and the product. There is nothing wrong with Bootstrap. They have this very clean and corporate way of presenting themselves. In fact, I think if a lot of your clients are this way, I’m looking at you governments, hospitals and the like, I think it is a much better project to pitch. In fact, I think those types might think you are crazy for pitching Zurb.
If you are wanting to do something that is edgy, quirky or fun, that is where I think Zurb really shines. Their documentation is loaded with jokes, memes and pop culture references. Their mascot is a huge teal yeti. Not just that he has hip glases and does a bit of a jaunt. I think if you are working with clients who are more hip, creative and don’t mind the quickyness of zurb this can be a great way to go. They are also pretty well known in the valley and with startup culture. So is twitter, but I don’t think twitter is known for exactly the same things.
ie8 = 10% of users
enough said, as long as my customers can not forget about these 10%, I won’t do the step and use Foundation.
And hell, yeah, 10% ain’t nothin!
Well, to be true, I like the Foundation philosophy, and the framework is great s***, but until IE8 get fully dead, Imma use Bootstrap.
how about speed load comparison betwee foundation vs boitstrap?