Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Zurb Foundation vs. Twitter Bootstrap

designshack.net

Post reply on HN
Print view View original

31–40 of 51 posts

Re: Zurb Foundation vs. Twitter Bootstrap

#31

Post by dsego »

dsego wrote: post #29

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

Re: Zurb Foundation vs. Twitter Bootstrap

#32

Post by 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.

Re: Zurb Foundation vs. Twitter Bootstrap

#33

Post by nilliams »

wonderyak wrote: post #32

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…

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

Re: Zurb Foundation vs. Twitter Bootstrap

#34

Post by nilliams »

antihero wrote: post #25

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.

Re: Zurb Foundation vs. Twitter Bootstrap

#36

Post by wonderyak »

nilliams wrote: post #33
wonderyak wrote: post #32

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…

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.

Re: Zurb Foundation vs. Twitter Bootstrap

#37

Post by bravura »

bwh2 wrote: post #24
mhd wrote: post #23

Earlier quoted context omitted.

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.

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.

Re: Zurb Foundation vs. Twitter Bootstrap

#39

Post by bwh2 »

bravura wrote: post #37
bwh2 wrote: post #24

Earlier quoted context omitted.

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.

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.

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.

Re: Zurb Foundation vs. Twitter Bootstrap

#40

Post by sergiotapia »

ericcholis wrote: post #14
sergiotapia wrote: post #8

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.

You didn't try very hard: http://foundation.zurb.com/docs

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.
Post reply on HN