Zurb Launches Foundation 4 (opens in new tab)

Yes.

> Don't most websites built with Foundation's grid system automatically fit nicely on mobile devices?

Yes, but responsive designs always means tradeoffs, and those tradeoffs will be different depending whether you're "desktop first" and scaling down or "mobile first" and scaling up. And of course, the framework can set a course on what to check and where to start from.

Luke Wroblewski is a big advocate of tackling responsive design from the bottom ("Mobile First"): http://www.lukew.com/ff/entry.asp?933 http://www.abookapart.com/products/mobile-first and he apparently pushed for Foundation 4 to much better support this design style.

I think it's a matter of orientation. Rather than creating a Desktop site and then scaling it down, you're creating a Mobile site and scaling it up.

I haven't really put much thought into it, but this may actually make more sense, since you're creating the minimum viable product first, and then adding to it, rather than creating a full project and then trying to figure out what to hack away.

Doing mobile first forces you to distil your app to just exactly the right components you need to achieve your product goal because there's so little real estate. It prevents you from adding non essential bullshit that you could easily throw into your design if you started with web.

------

EXAMPLE: http://foundation.zurb.com/page-templates4/blog.html

Line 45: <div class="large-9 columns">

CSS: .row .large-9 { position: relative; width: 75%; } .row .columns { position: relative; padding-left: 0.9375em; padding-right: 0.9375em; float: left; }

------

With 'the magic of Scss', you could replace multiple presentational classes with a single class that refers to the element's content or purpose, and then use @extend for the above-defined grid classes.

So our new HTML would look like:

<div class="article-content">

And the Scss:

.article-content { @extend .large-9; @extend .columns; }

------

Edit: formatting, also: there are plenty of debates to be had about writing classes this way. The subject merits its own lengthy discussion and (I think) the answer changes depending on what you're trying to do, so I ain't touchin it.

I'd personally stick with the presentation classes for most cases though. The templates likely do it this way so you can just throw the Foundation CSS on and it's ready to go.

EDIT: Thinking more about it, I think a huge advantage is that if you had an already-structured HTML file, you could write up a few @extend rules and apply a grid without having to add classes to everything. (You could use this technique to quickly throw up a grid for something like http://csszengarden.com/)

The idea is to get something like this :

  @mixin three-column {
    .container { @include container;  }
    .header,
    .footer    { @include column(24); }
    .sidebar   { @include column(6);  }
    article    { @include column(10); }
    .rightbar  { @include column(8);  }
  }

  body#article,
  body#snippet,
  body#blog-post { @include three-column; }

Just scroll down to the "Build with Mixins" section.

IE8 is the newest browser available for Windows XP which still makes up a vast number of business computers.

If it gets the mobile style then that's not so bad. If it all goes a bit Picasso then that's a problem.

Of course this means zepto is a lot smaller than jQuery. Zepto is 47k unminified [1], jQuery is 78k [2]

[1] http://zeptojs.com/#download [2] http://code.jquery.com/jquery-1.9.1.js

http://foundation.zurb.com/docs/changelog.php

However, it's not working at the moment.

Bootstrap is awesome for people who aren't comfortable with CSS and just want to put up something quick and don't mind if it looks like every other site out there.

Foundation lets you write better markup.

Also, If I remember correctly... Bootstrap has caught up now, but in earlier versions, their grid wasn't nestable, which made it almost useless for sufficiently complex websites.

There is also a smaller community around Foundation, which is good and bad: there isn't the massive third party ecosystem that Bootstrap has [1] but on the flip side many feel that Foundation sites don't look so 'Bootstrappy'.

I'm really invested in Bootstrap, but I'm stoked that more and more people are using front-end frameworks as they pretty much across the board improve developer productivity and make sites better/more usable.

1 - http://www.bootstraphero.com/the-big-badass-list-of-twitter-...

Bootstrap is more like a theme to me, if you don't want to bother buying one and you don't mind having a "bootstrap" look go for it. I love doing quick mockup with it. But as soon as you have to design something, it's a trap, it makes you lazy and want to use their styles for everything.

Foundation has a better reset in my opinion (I like box-sizing:border-box). The rows act like a container (size depending of your configs) whereas you can play with row and row-fluid in bootstrap (which might not be a good idea on a project). Also Compass + Sass. Forms look better. Orbit looks better than Carousel...

These past weeks I've been using both since I can't really make up my mind on one. I'm going to dig into Foundation 4 to see if it's going to change the situation.

EDIT : I'm looking at it right now, it does look pretty awesome. It seems they're taking a very different direction from bootstrap: - you now have to stylize elements through CSS (or SCSS) like it's supposed to be! They provide a long list of example, it seems like their stuff is entirely and easily customizable (which was always the shortcoming of Bootstrap). - I taught a friend who didn't know HTML nor CSS how to make websites a few day ago. I taught him Bootstrap. He's loving it since then. Looking through Foundation 4 the idea that it would be way too difficult to teach him Foundation 4 has stroke me.

Personally, my main reason for using Foundation over Bootstrap is that it's not Bootstrap, meaning for side projects and demo sites I can leave the default styles without people complaining about "another Bootstrap site".

With Foundation, it is much easier to override their styling and build something that is unique. You feel more like you are working WITH a framework, as opposed to working AGAINST one - which is how I feel using Bootstrap.

Either way, you can't go wrong, but if you value saving time by not overriding a million CSS rules when designing your site - go with Foundation.

My take is that Bootstrap provides a lot of stuff out of the box (including a rich third-party ecosystem) but Foundation is better suited as a customizable, well, foundation for your site.

[1] http://antrix.net/resume/

Apps using Bootstrap benefit from the larger community of 3rd party controls and libraries and, why not, from a consistent UI look that I don't have to mess with (no, I don't mind that my buttons look like everyone else's, I quite enjoy it actually).

Sites using Foundation benefit more from the mobile-first approach (Bootstrap is indeed catching up to this) and from easier customization (SCSS) and blander default styles, leading to a more distinctive look.