Zurb Foundation vs. Twitter Bootstrap(designshack.net)
designshack.net
Zurb Foundation vs. Twitter Bootstrap
http://designshack.net/articles/css/framework-fight-zurb-foundation-vs-twitter-bootstrap/
50 comments
What was your conclusion? (Looking at the source code of the page, foundation?)
A few conclusions:
* Foundation has the best responsive grid support
* Bootstrap is the most expansive UI. For internal tools, that's great. For client sites, we end up fighting to override Bootstrap.
* Skeleton is really light. If you're prototyping with Skeleton, you'll probably need to pair it with jQuery UI or something similar.
FWIW, we're using both Bootstrap and Foundation for current projects.
* Foundation has the best responsive grid support
* Bootstrap is the most expansive UI. For internal tools, that's great. For client sites, we end up fighting to override Bootstrap.
* Skeleton is really light. If you're prototyping with Skeleton, you'll probably need to pair it with jQuery UI or something similar.
FWIW, we're using both Bootstrap and Foundation for current projects.
Thanks for doing the comparison. Admittedly, those are exactly the results I would've expected and goes along with each of the respective group's plans. Is Skeleton still in active dev?
Skeleton was updated in late June, so it's still being developed as far as I can tell.
We didn't know what to expect, in part because we hadn't previously researched the history of each framework. But you're right, the results are inline with each plan.
We didn't know what to expect, in part because we hadn't previously researched the history of each framework. But you're right, the results are inline with each plan.
For client sites, we end up fighting to override Bootstrap.
Could you describe this more? I didn't really see much about it in your blog post.
Could you describe this more? I didn't really see much about it in your blog post.
We're working on a follow-up blog post soon with more detail.
Bootstrap has a lot of great UI components - form styles, tabs, dropdowns, etc. It looks good, it's consistent, and easy to prototype. But our client work involves highly customized design. In those cases, we don't want the Bootstrap styles, just the functionality.
But overriding Bootstrap styles can be painful. Let's take a form input field. You start by overriding the base style. But you forgot about hover and focus states, so tack those overrides on too. Then add any media query specific overrides. Do the same for any Bootstrap component you used. Finally, make sure your overrides work cross browser.
Building multiple sites with Bootstrap (and likewise Foundation) has definitely made us more aware of costs associated with customizing styles.
Bootstrap has a lot of great UI components - form styles, tabs, dropdowns, etc. It looks good, it's consistent, and easy to prototype. But our client work involves highly customized design. In those cases, we don't want the Bootstrap styles, just the functionality.
But overriding Bootstrap styles can be painful. Let's take a form input field. You start by overriding the base style. But you forgot about hover and focus states, so tack those overrides on too. Then add any media query specific overrides. Do the same for any Bootstrap component you used. Finally, make sure your overrides work cross browser.
Building multiple sites with Bootstrap (and likewise Foundation) has definitely made us more aware of costs associated with customizing styles.
awesome comparison, thanks!
Zurb's developer Mark went Twitter and used the Foundation codebase for Bootstrap... and now claiming to be the creator of Bootstrap.
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
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
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.
That's been my view of the two. I prefer Zurb because I know enough CSS now to extend and leverage the framework more and I find Foundation is lighter weight and more flexible and extensible than Bootstrap is. Bootstrap feel more "opinionated" but the javascript components are really, really well written though those are arguably completely portable.
I've got a pull request open to Foundation right now to add some vertical rhythm to their typography if anyone is interested.
https://github.com/zurb/foundation/pull/954
I've got a pull request open to Foundation right now to add some vertical rhythm to their typography if anyone is interested.
https://github.com/zurb/foundation/pull/954
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.
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.
Read through http://sass-lang.com/ because of your comment and just wow. Awesome.
What are the advantages of SCSS over LESS that Bootstrap uses?
FWIW, there are SASS ports of bootstrap.
I use the Bootstrap-Sass gem in all of my projects: https://github.com/thomas-mcdonald/bootstrap-sass
This article might be a bit dated. Written in May 2012, but Foundation 3.0 came out on June 29, 2012.
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.
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.
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.
Could be just preference or even skills (my front end skills aren't that great), but I find many generic design templates to be not that great visually or a lot of work to adapt to a css framework like foundation. Time is expensive.
I like stuff with batteries included. Given bootstrap's momentum, it even has a plethora of design templates as well so you won't have a generic bootstrap looking site.
I like stuff with batteries included. Given bootstrap's momentum, it even has a plethora of design templates as well so you won't have a generic bootstrap looking site.
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.
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.
I'm not sure if your analogy is fair.
1) Comparing two similar CSS frameworks is different from comparing two very different classes of automobiles that are visually different enough to figure out in less than a second.
2) Not many non-designers look at, let alone even experiment, with enough CSS frameworks for this to be a simple and trivial choice.
1) Comparing two similar CSS frameworks is different from comparing two very different classes of automobiles that are visually different enough to figure out in less than a second.
2) Not many non-designers look at, let alone even experiment, with enough CSS frameworks for this to be a simple and trivial choice.
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 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.
Hmm, could you give some examples of these 'abominable class names'?
The thing that really turned me off first were the classnames for the grid (one column example):
Foundation: .one.column Skeleton: .one.column Bootstrap: .span1
Then there are various other non-semantic classes: .btn, .pull-left, etc. It seems to me very much a toolkit built with a developer's mind ... in mind.
I like crafting my css by hand, making it easy to read and understand and above all - easy for me to remember so I don't have to crawl through documentation trying to remember if this element is .span4 .span-4 .span_4 or some other permutation I can't remember. I can easily remember .one.column. Its a column and its one.
Foundation: .one.column Skeleton: .one.column Bootstrap: .span1
Then there are various other non-semantic classes: .btn, .pull-left, etc. It seems to me very much a toolkit built with a developer's mind ... in mind.
I like crafting my css by hand, making it easy to read and understand and above all - easy for me to remember so I don't have to crawl through documentation trying to remember if this element is .span4 .span-4 .span_4 or some other permutation I can't remember. I can easily remember .one.column. Its a column and its one.
See I have the complete opposite opinion. I love the spanX semantics and .pull-left etc etc make complete sense to me so I think you might be on the ball with it being made for a developer moreso than a designer.
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.
Also on the Foundation website I can't seem to find examples of their typography, buttons and other UI elements.
You didn't try very hard: http://foundation.zurb.com/docs
Actually I'll agree the docs are awkwardly placed on the landing page. They should be front and center. Bootstrap also does do more. Though that's good or bad depending on your point of view.
Personally I would lean to bootstrap if I wanted everything and the kitchen sink and didn't plan on modifying much about it. For more serious work Foundation provides just that, a good foundation for building on top of. It's far less full featured but much easier to extend and modify (imo).
Personally I would lean to bootstrap if I wanted everything and the kitchen sink and didn't plan on modifying much about it. For more serious work Foundation provides just that, a good foundation for building on top of. It's far less full featured but much easier to extend and modify (imo).
Woops! I could have sworn I clicked that link as well. I must have visited the Features page. Thanks for helping out. I'll take a look.
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.
---
[0] - http://www.getskeleton.com
[1] - https://github.com/rakelley/SCSSkeleton
[2] - https://github.com/brcooley/SCSSkeleton
---
[0] - http://www.getskeleton.com
[1] - https://github.com/rakelley/SCSSkeleton
[2] - https://github.com/brcooley/SCSSkeleton
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.
IMHO..
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.
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!
+1 for Foundation for the SASS and excellent responsive design.
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.
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.
A 5 for the article, and a 7 for the comments.
BTW, I myself is a Foundation user, mainly because of its better responsive design.
BTW, I myself is a Foundation user, mainly because of its better responsive design.
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.
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."
if you were just 'putting them together' you'd be done. as much as I'm a bootstrap fan, this is not the use case for it - redesigning the look/feel of every element? you'd be better off not using any framework and building from scratch if you're not getting any value from the defaults of a framework, and instead insist on overriding/modifying everything a framework gives you.
You probably already know this, just thought I'd share your vent.
You probably already know this, just thought I'd share your vent.
I was a bit frustrated at the time of writing that comment. And, to be fair, the js components (e.g. modal box) and the grid system turned out to be of good use. Although, bootstrap's LESS code leaves a lot to be desired. There's no system to it. Some styles are defined as mixins, others are hard-coded, variables are not used consistently, and so on.
Has anyone got a decent solution for combining Foundation and RequireJS?
I would guess the same as any other library. If it doesn't support AMD, shim it?
http://requirejs.org/docs/api.html#config-shim
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.
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.
We built the same layout (a real client project) in each framework and compared notes. That process really helped us understand the differences.