

Zurb Foundation vs. Twitter Bootstrap - andreiursan
http://designshack.net/articles/css/framework-fight-zurb-foundation-vs-twitter-bootstrap/

======
bwh2
My team compared Bootstrap, Foundation, and Skeleton in detail:
<http://responsive.vermilion.com/compare.php>

We built the same layout (a real client project) in each framework and
compared notes. That process really helped us understand the differences.

~~~
mhd
What was your conclusion? (Looking at the source code of the page,
foundation?)

~~~
bwh2
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.

~~~
dorian-graph
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?

~~~
bwh2
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.

------
johnx123-up
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>

~~~
pault
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.

~~~
lucisferre
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>

------
davidw
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.

~~~
yesimahuman
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.

------
wheaties
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.

~~~
ubershmekel
Read through <http://sass-lang.com/> because of your comment and just wow.
Awesome.

------
tylerhowarth
This article might be a bit dated. Written in May 2012, but Foundation 3.0
came out on June 29, 2012.

------
chaostheory
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.

~~~
SkyMarshal
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.

~~~
chaostheory
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.

------
wonderyak
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.

~~~
nilliams
Hmm, could you give some examples of these 'abominable class names'?

~~~
wonderyak
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.

~~~
indiecore
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.

------
sergiotapia
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.

~~~
ericcholis
You didn't try very hard: <http://foundation.zurb.com/docs>

~~~
lucisferre
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).

------
zheng
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>

------
driverdan
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.

------
thejosh
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.

------
ajtaylor
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.

~~~
bwh2
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.

------
mgcross
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!

------
ljoshua
+1 for Foundation for the SASS and excellent responsive design.

------
hackerboos
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.

------
zalew
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.

------
jerryji
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.

~~~
bratsche
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.

------
dsego
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".

~~~
dsego
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."

~~~
mgkimsal
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.

~~~
dsego
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.

------
antihero
Has anyone got a decent solution for combining Foundation and RequireJS?

~~~
nilliams
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.

