Foundation is more flexible. Bootstrap is very opinionated.
Bootstrap is awesome for people who aren't comfortable with CSS and just want to put up something quick and don't mind if it looks like every other site out there.
Foundation lets you write better markup.
Also, If I remember correctly...
Bootstrap has caught up now, but in earlier versions, their grid wasn't nestable, which made it almost useless for sufficiently complex websites.
Bootstrap styles are deeply baked in. Changing the variables file isn't enough if you want a non-bootstrappy looking site. Foundation's styles are easier to override and to get the look you want.
Bootstrap's eco system is huge. If I had to use one, it would be Bootstrap. Since I can choose either, I use Bootstrap most of the time and Foundation when I need more control.
That's not certainly true. You can use Bootstrap at any level, even, skipping every of the baked modules and make a website who doesn't look like Bootstrap.
For the variable parts, thats another myth: you can override variables easily.
I have nothing against Foundation, but to me, all the frameworks claim silly things to gain developers and developers aren't that kind of stupid consumer.
That doesn't really affect the developer using it though. GP's argument that Foundation is more flexible and Bootstrap is more opinionated seems unrelated to the semicolon debate.
I disagree, I found the Bootstrap JS code hard to read and follow because of the lack of semicolons. For a framework that is supposed to help people 'bootstrap' it would seem to me that making their code understandable and accessible is something important.
I don't see how the lack of semicolons disturbed you, I actually noticed it earlier today for the first time. If you're having trouble with that you won't be able to read Python very efficiently.
In general Foundation is considered smaller and lighter than Bootstrap, many devs also prefer its use of SASS instead of LESS (which is the Bootstrap default css pre-processor).
There is also a smaller community around Foundation, which is good and bad: there isn't the massive third party ecosystem that Bootstrap has [1] but on the flip side many feel that Foundation sites don't look so 'Bootstrappy'.
I'm really invested in Bootstrap, but I'm stoked that more and more people are using front-end frameworks as they pretty much across the board improve developer productivity and make sites better/more usable.
Not looking bootstrappy sounds like a good reason to use it for some projects. Is there a 'stock foundation' looking site you can link to, I'm curious if I'd recognize it.
If you're not digging through the source you'd probably think it was a lightly styled Bootstrap site as many of the same tells are present (black top navbar, etc).
However, I think there is some massive confirmation bias at work. If a site customizes Bootstrap and it looks nice nobody credits it as a 'Bootstrap Looking' site, so as a result it is only when the defaults are used that people really pick up on it.
That coupled with the fact that there are many more Bootstrap sites kicking around out there I think has led to the misconception about "Bootstrap Looking" sites.
I don't think it's an unfair reputation. Looks and feeling of a website is heavily influenced by its button (I've read a great article somewhere analyzing the internet big guys' buttons). Bootstrap's buttons are not easily customizable, thus people feel like they're running into bootstrap-like websites a lot.
I've been using both of them a lot lately. I'll give you some answers:
Bootstrap is more like a theme to me, if you don't want to bother buying one and you don't mind having a "bootstrap" look go for it. I love doing quick mockup with it. But as soon as you have to design something, it's a trap, it makes you lazy and want to use their styles for everything.
Foundation has a better reset in my opinion (I like box-sizing:border-box). The rows act like a container (size depending of your configs) whereas you can play with row and row-fluid in bootstrap (which might not be a good idea on a project). Also Compass + Sass. Forms look better. Orbit looks better than Carousel...
These past weeks I've been using both since I can't really make up my mind on one. I'm going to dig into Foundation 4 to see if it's going to change the situation.
EDIT : I'm looking at it right now, it does look pretty awesome. It seems they're taking a very different direction from bootstrap:
- you now have to stylize elements through CSS (or SCSS) like it's supposed to be! They provide a long list of example, it seems like their stuff is entirely and easily customizable (which was always the shortcoming of Bootstrap).
- I taught a friend who didn't know HTML nor CSS how to make websites a few day ago. I taught him Bootstrap. He's loving it since then. Looking through Foundation 4 the idea that it would be way too difficult to teach him Foundation 4 has stroke me.
Zurb was built with the responsiveness from the beginning. That doesn't seem to have been the case with Bootstrap. I've found having a responsive site out of the box, without some of the headaches I've had trying to do the same with Bootstrap, is worth the costs of a smaller community. Plus, it doesn't look like every other Bootstrap site and is more easily customized.
Features and functionality wise they're pretty much at the same level. Foundation uses Sass instead of Less so that is a pro to some people.
Personally, my main reason for using Foundation over Bootstrap is that it's not Bootstrap, meaning for side projects and demo sites I can leave the default styles without people complaining about "another Bootstrap site".
Maybe you should play around with Bootstrap a bit more just so you can learn not to care when people snark about "another Bootstrap site", because nobody who's really ready to spend money to have a computer solve one of their problems cares (or likely even groks) what web framework you used.
Agreed. I'm not talking about startups or things I want money for. I'm talking about random 1-off side projects built for other tech-savvy people or open source projects.
For example, I launched http://toogl.es recently on Foundation and it gets a lot of developer or other technical users.
That was true for Foundation 3, but Foundation 4 is changing the game a bit. ZURB now seems to be focusing more on Mobile-First than Bootstrap: between media queries expanding the mobile site for desktops (rather than slimming the desktop site for mobiles) and switching to Zepto.js by default,which forgoes all Internet Explorer compatibility (though you can switch back to jQuery no problem), Foundation and Bootstrap seem to be diverging.
I have used both extensively on both personal and work-related projects. Both are great, but Foundation gets my vote as it is lighter and much easier to work with as a designer. With Bootstrap, you are pretty much stuck with that general look unless you want to do A LOT of work. You will end up looking like every other app out there using it.
With Foundation, it is much easier to override their styling and build something that is unique. You feel more like you are working WITH a framework, as opposed to working AGAINST one - which is how I feel using Bootstrap.
Either way, you can't go wrong, but if you value saving time by not overriding a million CSS rules when designing your site - go with Foundation.
There isn't one as far as I can tell. We picked Zurb for a site I was working on, and subsequently switched to Bootstrap, since that's where all the momentum (themes, plugins, etc...) seems to be. Zurb is high quality stuff, but Bootstrap is good too, with more weight behind it - for now, at least.
When I refreshed my resume [1] last year, I went with Bootstrap first. But I found it really difficult to modify the defaults that Bootstrap provided. The deal-breaker for me was that the responsive grid worked only when the container width was set to the default value. Changing the default width broke the responsive grid. In the end, I tried out Foundation and it was a breeze to customize it to my needs.
My take is that Bootstrap provides a lot of stuff out of the box (including a rich third-party ecosystem) but Foundation is better suited as a customizable, well, foundation for your site.
I currently like using Bootstrap for web apps and Foundation for designing web pages.
Apps using Bootstrap benefit from the larger community of 3rd party controls and libraries and, why not, from a consistent UI look that I don't have to mess with (no, I don't mind that my buttons look like everyone else's, I quite enjoy it actually).
Sites using Foundation benefit more from the mobile-first approach (Bootstrap is indeed catching up to this) and from easier customization (SCSS) and blander default styles, leading to a more distinctive look.
