I tried to use foundation on two separate occasions. Each time, basic features were broken (or completely missing!) out of the box, and when I tried to investigate, the code was so tangled and awkward that I either abandoned foundation, or implemented the feature from scratch myself.
Bootstrap is pleasant to work with and extend. Each of the javascript components are simple, isolated, and well thought out.
For me it is about documentation. While Bootstrap was documented thoroughly (with the one exception of not having a transition guide for the changed grid system between 2.x and 3.0), I felt that this wasn't the point for Foundation. E.g. it was never clear for me wether off-canvas navigation was an experimental feature or not. Also scrolling the documentation doesn't feel smooth on my MBP / Chrome.
I really don't like Foundation because of the way it looks out of the box. Everything is way to square and brightly colored. Bootstrap just looks quite good from the start. After a quick look at the markup however, I really think Foundation is winning there.
Foundation used to have a better grid system, better css defaults (border-box) and the "advantage" of using Sass over Less. Bootstrap just looked better since it had a theme embarked and also a nice documentation. Now Bootstrap has caught up, I haven't used Foundation in 2 years but I would think they're still relevant.
The reason I use Bootstrap over Foundation is that there is a lot more community support for it. It's much easier to find solutions to problems. Additionally, the huge number of available themes for Bootstrap make it a very compelling choice for the average dev who has terrible design skills.
I think Bootstrap had the benefit of being called Twitter Bootstrap during the early part of its life. That alone brought a ton of initial interest and it just continued to build from there.
They're basically at parity now IMHO, but Bootstrap has the network effect advantage. It's got a huge community of people developing plugins, creating themes, and doing debugging on it. I've used them both in the past, but prefer Bootstrap for this reason.
- Foundation ceases to be an option since they drop IE8 support in Foundation 3, far too soon IMHO
- Various jQuery UI-based frameworks out there (e.g. Kendo UI) has good Bootstrap theme support
When Bootstrap first came out, it looked way better than Foundation out of the box -- had better typography. I think that's mainly why. I think it's possible Foundation has caught up.
I can't imagine that's a real deterrent is it? Using LESS with Foundation is fairly straightforward. Create an empty .less file and @import 'foundation.css'. Also, LESS and SASS have very similar syntax. There's very little learning curve if you're going from one to the other...