I think that's an oversimplification. Either way, a quick look at the source shows that they are quite different now. In my opinion zurb has the more sophisticated grid system but doesn't support IE7, and the UI javascript is not nearly as polished as bootstrap's (some jQuery spaghetti in places). Bootstrap, while having more stable UI components, is visually opinionated and difficult to rebrand, where zurb is generic by design. If I had to pick one or the other to build a web application on, I would use the zurb grid system and write my own UI components with liberal borrowing from bootstrap's javascript. If you are hacking together a weekend project, use bootstrap.
As someone who just wants to get as much as possible out of the box, Bootstrap is the one that seems to have the momentum, which leads to more 'extras' and goodies, and more people making sure it works.
I commented on the post, but I wanted to add that bootstrap has a larger ecosystem. I think that is really what will carry it forward. My company makes tools for bootstrap (specifically Jetstrap), and I'm confident the ecosystem will solve some of the dangling problems like helping more people customize the default theme.
I would say, if you're looking for the kitchen sink, don't look at Foundation. It's explicitly not meant to be that kind of solution.
There are many different [responsive] frameworks and most seem to vary in what they're doing, how they're doing it and to what extent they're providing you a system.
Zurb has one thing going for it that really makes a big difference, SASS. From the minute I saw SASS, I became a convert. Also, it's much less all encompassing.
This was an easy decision for me a while back. As a non-designer, Bootstrap just gives me way more stuff out of the box. I wouldn't know where to start without it. Even if you use all of Foundation (2)'s add-ons, it still doesn't even compare with core Bootstrap, not counting Bootstrap's add-ons. With bootstrap's popularity, it's really easy to find an article explaining how to integrate it with your framework of choice. I feel for most non-designers this is the deciding factor.
Of course since f3 is almost the same as bootstrap now, I think it's more about personal taste.
As a non-designer that's not really an issue for me. There are so many cheap or FOSS design templates, snippets, icons, etc available these days that it's not a huge problem to put together a package of them for Foundation.
I use Bootstrap when
1. the default Bootstrap theme or a third party theme are sufficient
2. I don't need Foundation's better grid system
3. I'm using something other than Ruby (which for me is most of the time)
Foundation for:
1. There's a specific problem that their better grid system solves. I haven't come across this yet, but am aware of it for when/if I do.
2. Client wants a highly customized Ruby-based site with no hint of the Bootstrap look
As someone mentioned above, you can use Foundation and borrow design and/or javascript elements from Bootstrap and elsewhere if you need to go that route.
Not to pick on you—or anyone else here—but there's a funny idea going floating in the high in this submission and some of the comments.
If I have a large family, I wouldn't really reason with myself saying "You know, it was an easy decision to go with a van as a coupé just doesn't really have enough space." Somewhat different purposes though one can see the overlap, which there is.
As someone that deals with markup for the majority of their day I've been bouncing between all of these for the past year or so. I've been using Skeleton for awhile and loved the simplicity.
I tried Bootstrap but the semantics are so horrible I couldn't stand using it for more than one project. I love the tools it has but the semantics of the class names are abominable. I've since settled on Foundation as it had the best tools available while maintaining some level of sanity in the class names and semantics.
I'd have to go with Bootstrap because it just seems to offer more. I extensively use their buttons, warning styles, etc. and it's just better to have those already in the framework just in case.
Also on the Foundation website I can't seem to find examples of their typography, buttons and other UI elements.
Others have mentioned it, but for those looking for much less than Bootstrap/Foundation offer, there is always skeleton[0], which is a very lightweight grid and only a little more. There is also a SASS port[1], or my fork[2] which handles more like the original Skeleton.
Bootstrap's fluid grid implementation is weak and fails when you want to use their responsive styles. For some reason they decided it'd be a good idea to change fluid column widths based on media types, including screens >1200px. This means you end up with oddly resizing columns, especially on desktops. This is completely pointless for fluid grids since you should be modifying the container size and not the column size. It seems like they implemented fluid columns as if they're fixed width.
Bootstrap provides a UI design decision "out of the box". If you don't have a designer, want to BOOTSTRAP your project, you will want to use bootstrap. It's great.
Foundation to me is more of a base css framework. You don't have (m)any visual styles out of the box (though it does contain certain styles) which is great when you need to create HTML/CSS to match a concept provided to you.
I love foundation and bootstrap, but to me they both offer two very different things.
We've recently done a redesign for a site at $work, but it's not using any sort of framework like Bootstrap or Foundation. Is it possible to add in Bootstrap after the fact? I would kill to have all the various UI elements available to me, but throwing everything out and starting over after a month is not an option.
I'd try a couple pages and see how it goes. Adding in Bootstrap, Foundation, or Skeleton is typically just a matter of adding some HTML wrapper divs and CSS classes, assuming your starting point is a relatively simple DOM structure and CSS composition.
Foundation's mobile grid utility classes (class="nine mobile-three columns") and source ordering are really nice. And even though BS buttons are prettier, the gradients make a quick color change very challenging!
I've been playing with Foundation recently but I've found the lack of documentation for the Compass gem to be frustrating.
It's not clear what mixins you need to include to make a site responsive without trial and error.
There's also a few mixins missing that would be useful; for example moving a field label to the left you add the classes "right inline" but there's no mixin to do this so I have to litter my markup with styling class names.
a lot of people here praise bootstrap for giving more out of the box. frankly I'd rather the framework not decide for me about the look and feel, and IMHO it's easier to customize Zurb Foundation which is a bit more modest about the default looks, than get rid of that 'twitterific' crap Bootstrap gives out of the box. and sass > less (yeah I know there are ports). I went with Zurb. too bad these frameworks don't respect semantic html much.
I'm not a designer but I've been trying to learn more about design stuff and I'm still trying to get a grip on responsive design stuff.
Can you tell me a little bit about why you prefer Foundation's responsive grid system over Bootstrap's? I just started using Foundation 3 for a personal project, but I picked it basically because it's developed on Sass and I already know and am comfortable with Sass.
Also, I'd love to know if anyone has any experience using Susy grid system on Sass and how it compares to Foundation and Bootstrap grid systems. I found Susy a little more difficult to get started with because their documentation isn't very good and because I don't yet have a good grasp on how to design for a responsive grid.
The people I'm working for/with decided to use bootstrap as a foundation to speed up development. As someone who mainly does "front-end" programming, I don't see much benefit from these "frameworks", especially since we are pretty much redesigning every element. Also, since we are using CSS3/LESS, instead of slicing a PSD I have to recreate every design element from scratch. I hate "designers".
Also, they're mad at me because it is taking to long to develop the site. And because we're using bootstrap they're expecting it to be done quickly, because "I have all the components and just have to put them together."
I can go into specifics if you give an example of the dependency structure you're trying to define. But the basic case I suppose would just be to shim foundation.min.js to depend on jquery.
[+] [-] bwh2|13 years ago|reply
We built the same layout (a real client project) in each framework and compared notes. That process really helped us understand the differences.
[+] [-] mhd|13 years ago|reply
[+] [-] watterso|13 years ago|reply
[+] [-] johnx123-up|13 years ago|reply
In case if anyone missed, recent note from Zurb in HN: http://news.ycombinator.com/item?id=4588826
Edit: And, Mark's defense http://news.ycombinator.com/item?id=4590315
[+] [-] pault|13 years ago|reply
[+] [-] davidw|13 years ago|reply
[+] [-] yesimahuman|13 years ago|reply
[+] [-] dorian-graph|13 years ago|reply
There are many different [responsive] frameworks and most seem to vary in what they're doing, how they're doing it and to what extent they're providing you a system.
[+] [-] wheaties|13 years ago|reply
[+] [-] ubershmekel|13 years ago|reply
[+] [-] ville|13 years ago|reply
[+] [-] tnorthcutt|13 years ago|reply
[+] [-] aaronbrethorst|13 years ago|reply
[+] [-] tylerhowarth|13 years ago|reply
[+] [-] chaostheory|13 years ago|reply
Of course since f3 is almost the same as bootstrap now, I think it's more about personal taste.
[+] [-] SkyMarshal|13 years ago|reply
I use Bootstrap when
1. the default Bootstrap theme or a third party theme are sufficient
2. I don't need Foundation's better grid system
3. I'm using something other than Ruby (which for me is most of the time)
Foundation for:
1. There's a specific problem that their better grid system solves. I haven't come across this yet, but am aware of it for when/if I do.
2. Client wants a highly customized Ruby-based site with no hint of the Bootstrap look
As someone mentioned above, you can use Foundation and borrow design and/or javascript elements from Bootstrap and elsewhere if you need to go that route.
[+] [-] dorian-graph|13 years ago|reply
If I have a large family, I wouldn't really reason with myself saying "You know, it was an easy decision to go with a van as a coupé just doesn't really have enough space." Somewhat different purposes though one can see the overlap, which there is.
[+] [-] wonderyak|13 years ago|reply
I tried Bootstrap but the semantics are so horrible I couldn't stand using it for more than one project. I love the tools it has but the semantics of the class names are abominable. I've since settled on Foundation as it had the best tools available while maintaining some level of sanity in the class names and semantics.
[+] [-] nilliams|13 years ago|reply
[+] [-] sergiotapia|13 years ago|reply
Also on the Foundation website I can't seem to find examples of their typography, buttons and other UI elements.
[+] [-] ericcholis|13 years ago|reply
[+] [-] zheng|13 years ago|reply
---
[0] - http://www.getskeleton.com
[1] - https://github.com/rakelley/SCSSkeleton
[2] - https://github.com/brcooley/SCSSkeleton
[+] [-] driverdan|13 years ago|reply
[+] [-] thejosh|13 years ago|reply
Bootstrap provides a UI design decision "out of the box". If you don't have a designer, want to BOOTSTRAP your project, you will want to use bootstrap. It's great.
Foundation to me is more of a base css framework. You don't have (m)any visual styles out of the box (though it does contain certain styles) which is great when you need to create HTML/CSS to match a concept provided to you.
I love foundation and bootstrap, but to me they both offer two very different things.
[+] [-] ajtaylor|13 years ago|reply
[+] [-] bwh2|13 years ago|reply
[+] [-] mgcross|13 years ago|reply
[+] [-] ljoshua|13 years ago|reply
[+] [-] hackerboos|13 years ago|reply
It's not clear what mixins you need to include to make a site responsive without trial and error.
There's also a few mixins missing that would be useful; for example moving a field label to the left you add the classes "right inline" but there's no mixin to do this so I have to litter my markup with styling class names.
[+] [-] zalew|13 years ago|reply
[+] [-] jerryji|13 years ago|reply
BTW, I myself is a Foundation user, mainly because of its better responsive design.
[+] [-] bratsche|13 years ago|reply
Can you tell me a little bit about why you prefer Foundation's responsive grid system over Bootstrap's? I just started using Foundation 3 for a personal project, but I picked it basically because it's developed on Sass and I already know and am comfortable with Sass.
Also, I'd love to know if anyone has any experience using Susy grid system on Sass and how it compares to Foundation and Bootstrap grid systems. I found Susy a little more difficult to get started with because their documentation isn't very good and because I don't yet have a good grasp on how to design for a responsive grid.
[+] [-] dsego|13 years ago|reply
[+] [-] dsego|13 years ago|reply
[+] [-] antihero|13 years ago|reply
[+] [-] nilliams|13 years ago|reply
I can go into specifics if you give an example of the dependency structure you're trying to define. But the basic case I suppose would just be to shim foundation.min.js to depend on jquery.