22

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.

edsioufi
  • 8,297
  • 3
  • 36
  • 42
Henson
  • 5,563
  • 12
  • 46
  • 60
  • We are using F4 on a beta project that has a release date of 3 months from now. So far, the framework behaves just fine, no major headaches yet. Why would you use F4 on a non-responsive site? – von v. Mar 22 '13 at 07:31
  • Bootstrap was my go-to CSS framework, but the project I'm having is supposed to be responsive, and from the overview, it could use the mobile first approach. But as time goes by, requirements change and stuff, the design seems to be more desktop oriented and desktop-first approach. I've been starting the prototype using F4, but due to the changes, I'm wondering whether the F4 mobile first approach will hurt my progress cos the site now is clearly desktop-first. – Henson Mar 22 '13 at 14:36
  • IMO, I don't think it will. The beauty of being responsive is that if the site will be viewed on a desktop only, ever, then no need to worry about it. At least if someone tries to view it on their mobile, say just for fun, or by pure-luck-incident then you are covered. – von v. Mar 22 '13 at 14:41

5 Answers5

25

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.

Joe
  • 299
  • 2
  • 2
  • 4
    Nice. Could you elaborate on "More semantic classes" ? AFAIK, Foundation still uses CSS classes in the markup - or did you mean something else by "semantic" here? – Zabba Mar 29 '13 at 18:28
  • 3
    @Zabba Sorry for the delay in my response. I should probably rephrase this, but by more semantic I simply mean it is much easier to identify quickly by looking at the code what an element is. For example:
    It is pretty easy for anyone to tell; with minimal knowledge of the framework, what this is supposed to be.     – Joe Apr 02 '13 at 12:43
  • 1
    Sorry for the (very) late response. I ended up using Foundation 4 and it works well enough. One caveat though (and this is more SASS one), using mobile first approach meaning the desktop styles would be inside media queries. Logically, you will import your sprites at the top of your style, right? Apparently, SASS won't allow you to use the sprite mixin inside the media query without some hacky solutions. I ended up referencing the actual location of the image rather than using sprites. So all in all, F4 is great, but I think I prefer LESS to SASS. – Henson Apr 23 '13 at 10:54
  • 1
    I found this feature breakdown useful as well. [Bootstrap / Foundation / Skeleton](http://responsive.vermilion.com/compare.php). Also to note, I have found [Pure](http://purecss.io/) to be useful. – brian s Sep 18 '13 at 19:59
11

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.

Ben Snyder
  • 111
  • 1
  • 2
8

My below opinion is based on my extensive usage of Foundation in my projects & limited use of Bootstrap. When i saw the word 'Non-Mobile First' in your question, the immediate framework that came to my mind was Bootstrap. The major difference i have found in both these frameworks are

Foundation is a great framework for implementing Responsive grid systems..It gives great control on how you wish to show your page on Mobiles as well as Desktop. But at the same time i don’t find the UI Elements in Foundation to be very sleek enough as compared to Bootstrap.

Bootstrap has some awesome looking UI Elements, great Looks and do provide responsiveness grid but not that powerful as that of Foundation. But it has some great resources & additional plugins which can be very useful

So as per my opinion, if your project is not Mobile First then go with Bootstrap else Foundation is the best choice :)

P.S - The new Bootstrap 3 is mobile-first. So the line "When i saw the word 'Non-Mobile First' in your question, the immediate framework that came to my mind was Bootstrap" in my answer is no more valid. But the deduction is still same. If you want great level of control with grids you should go with Foundation. For UI/Plugins, Bootstrap is good choice :)

Jigar Jain
  • 1,447
  • 1
  • 15
  • 38
  • I agree. I like Bootstrap more than Foundation too personally, but as Bootstrap 3 will be mobile first as well anyway, I'm intrigued to dive into Foundation 4. The thing about the project is, based on the design, it's clearly desktop-first, while the mobile may be responsive by removing stuff here and there, but personally I'm still in dilemma because I think mobile first approach is the way to go, as there's no use having a responsive site that loads 2MB in desktop and 2MB as well in mobile. – Henson Mar 22 '13 at 14:43
5

F4 and Bootstrap are both powerful responsive frameworks that do the job very well. Foundation has more responsive hooks than Bootstrap which can be particularly useful in responsive projects. The fact that F4 doesn't support IE8 (by design) will deter some from using it now. Bootstrap 3 continues support for IE8 as far I know with a mobile first approach like F4.

soulglider
  • 161
  • 1
  • 4
-1

You could always setup your template (in either framework) to use fixed widths. Then later if you need support for other devices, like tablets, it's easy to add some CSS to handle those sizes and orientations.

saileron
  • 7
  • 4