Use Zurb Foundation 4 / Twitter Bootstrap 3 For Non Mobile First Projects

Question

Has anyone used Foundation 4 or Bootstrap 3 beta? As you know, both are re-written to make it mobile first.

I'm very excited with the mobile first approach, but in real life, sometimes circumstances don't let us do what we believe is the right way.

So I just want to ask, has anyone used F4 or BS3 for non mobile first (or even non responsive) projects? I haven't really dived into the codes and the documentation is quite lacking.

What I mean is, is there some hidden caveats in F4/BS3 that if I use one of them for non mobile first/responsive projects, somehow it's not gonna work as smoothly as both frameworks are meant to be mobile first frameworks? Or do you recommend using Foundation 3.5 or Bootstrap 2.3 for non mobile first projects?

Thanks, hope I'm being clear enough.

Answer 1

My company has just recently switched to exclusive F4 use. We are not at all against Bootstrap, but here are the reasons we made our decision:

• More semantic classes: this is of course a matter of opinion, but for us this can shave time off of a build.

• A golden standard: You can hand F4 to just about anyone with html and css knowledge and you will see VERY similar markup for the same site from nearly all. This means it becomes much easier to contract out help if need be, and ensure quality design.

• The UI: Yes Bootstrap wins this if you judge on it alone, but if you look at it as a whole really the UI of foundation is very close. Plus lets keep in mind that you can customize any of it with app.css

• Zepto: I am a fan. What can I say. SEO is part of our world, and fast loads mean something, and even leaving SEO out....fast loads = less bounce.

• SEO: Google has already come out and recommended responsive design for mobile SEO.

• Why not?: What site can I not recreate with the framework. It is still CSS. It does force us to rethink how we code, but isn't that why we love to code in the first place? Figuring out solutions to simplify design?

  Sorry for the novel. Just my take on it, and I know its not really 100% subject matter. In reality F4 vs Bootstrap 3 is really a moo point. If you are on-board with responsive you are making yourself marketable. If you are not then you are completely ignoring the direction that technology is heading and you should get out of the game.

Answer 2

I just finished putting together 3,200 words on which framework is better. The simple answer is: Foundation 4, and it's not all that close.

For the full article: http://abetteruserexperience.com/2013/08/twitter-bootstrap-3-vs-foundation-4-which-one-should-you-use/

The two frameworks have a lot in common, but there are some differences. The major benefits of Foundation 4 over Twitter Bootstrap 3 are:

• easy to remember class naming conventions
• images that are responsive by default
• containers that will go to the edge of the screen
• Block Grid
• adaptive images (Interchange)
• walk-throughs (Joyride)
• form validation (Abide)
• pricing tables
• flex video
• inline lists
• No Conflict mode that just works
• access to ZURB if you run across problems

To put it simply: Bootstrap feels like it's somebody's hobby, Foundation 4 feels like it's somebody's job.