
Zurb Launches Foundation 4 - forrestkoba
http://zurb.com/article/1173/foundation-4-the-smartest-foundation-yet
======
mokash
I don't understand the whole mobile first thing? Isn't Foundation already
responsive? Don't most websites built with Foundation's grid system
automatically fit nicely on mobile devices? Am I missing something?

~~~
masklinn
> Isn't Foundation already responsive?

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.

------
FilterJoe
I couldn't find any examples on the site of using "the magic of Scss, you can
now remove almost all of the presentational classes from your markup." Could
someone provide an example, or provide a pointer to an example of html markup
which removes all presentational classes?

I did look at their templates site:

<http://foundation.zurb.com/templates.php>

and I still see presentational markup.

EDIT: I'd also like to see a sample SCSS mixin which attaches the style to the
HTML. Something as simple as styling a few "Hello world" phrases arranged in a
grid would be great.

~~~
harlanlewis
Agreed, the templates are not exhibiting how to avoid presentational classes.
This may be a case where small-scope examples are poorly suited to real-world
implementation, but I'll take a quick stab at moving to more descriptive (dare
I say semantic) class names.

\------

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.

~~~
pault
The quick answer is (feel free to disagree!), this is a great way to style a
blog or microsite, but quickly gets out of hand. Using presentational classes
bloats your markup but the size of your CSS assets will remain relatively
constant, while using semantic class names requires writing new CSS for each
new piece of content. The return you get on sacrificing some legibility in
your markup increases with the size of your site. Large applications (or
multiple applications that share the same CSS codebase) can also quickly run
into the 4095 selector limit in (older versions of?) internet explorer. Using
presentational classes has the added benefit of not requiring back end
developers to write CSS (nobody likes writing CSS). It's mostly a matter of
taste, but I can tell you from personal experience that CSS bloat in a large
web application is easy to avoid and a nightmare to fix.

~~~
maerek
Paul - any tips for avoiding stylesheet bloat? A project I'm currently working
on has a rapidly expanding style sheet, and I'd like to invest in some ways to
cut down on the cruft.

------
thedangler
Docs page doesn't seem to be loading properly for me... It's as if the CSS
file isn't loading. I've tried it in 3 browsers.

~~~
jeffpersonified
You're not the only one.

~~~
ebtalley
I tried both the downloaded version and the master version from github. both
seem to have issues. the release is missing a bunch of dependent js files.

------
throwaway420
I love Foundation 4 so far, but I still find the top-bar nearly useless. Maybe
my opinion or experience is atypical, but that's the one aspect of the
framework that I usually find myself replacing when using Foundation. Most of
the rest of it is logically designed and useful right out of the box.

------
aioprisan
<http://foundation.zurb.com/docs/> is broken

~~~
zerosanity
Looks fixed now.

------
alwillis
The Zurb guys just pushed out version 4.0.3 with a bunch of bug fixes and
documentation updates:
<https://twitter.com/foundationzurb/status/307647218951811072>

------
elclanrs
I understand why people praise these frameworks but in my case The Semantic
Grid [1] + HTML5 Boilerplate [2] + Nib [3] is all I need to get started with
any web project. I first prototype in vector and once I have the general
wireframes I start mocking up the layout in HTML+CSS manually. Once the layout
is done, I style the UI elements from scratch as well. Am I the only one tired
of Bootstrap looking sites?

[1] <http://semantic.gs/>

[2] <http://html5boilerplate.com/>

[3] <http://visionmedia.github.com/nib/>

------
mamcx
"Not tested in 4" for add-ons <http://foundation.zurb.com/icon-fonts.php>.

Thats unexpected. With bootstrap the whole package is ready-to-go in each
release...

~~~
jbail
That's a fair point, but I can appreciate getting a new version of the main
framework out and giving a nod that the add-ons haven't been tested yet. Ship
sooner, right?

------
leoalves
One of the authors of bootstrap also released, today, a version of the
Bootstrap framework (with another name since he left twitter) using mixins and
mobile first. But built with less and not sass.

<http://markdotto.com/2013/02/28/reintroducing-preboot/>

------
baby
<http://foundation.zurb.com/sass.html> is broken

~~~
mos2
<http://foundation.zurb.com/docs/sass.html> is working

------
eCa
The "Clone now" link on <http://foundation.zurb.com/> is a little boring on
Windows. (It's currently pointing to github-
mac://openRepo/<https://github.com/zurb/foundation>)

------
iaskwhy
Broken link at <http://foundation.zurb.com/prototyping.php> UI Docs links to
<http://foundation.zurb.com/docs/elements.php> which returns a 404.

~~~
Cigano
OMDog.

------
matteodepalo
My experience with Foundation has been great. The only thing I really didn't
like was the markup full of classes a la bootstrap, and now they've fixed it!
There has never been a better time for the semantic web.

------
pacomerh
seems kinda of a problem that "The Grid, Layout/UI and JS", aren't compatible
with IE8 and bellow no?.

<http://foundation.zurb.com/docs/support.html>

~~~
kreas73
In my opinion, no. But I've been known to be wrong.

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

------
joeblau
Wow this looks amazing. The off-canvas layouts for mobile look great. I think
I'm going to migrate my Github page from Bootstrap to this.

Does anyone know if Foundation has any CDN's?

~~~
JCraig
Take a look at cdnjs.com. They haven't updated to 4 yet, but I wouldn't be
surprised if they did soon. They have many more libraries than Google's or
Microsoft's CDNs.

------
jeffpersonified
To me, the most interesting part of this is the switch to Zepto. Can people
weigh in on its performance over jQuery, and the overall tradeoffs?

~~~
WickyNilliams
Zepto is great. It's a subset of jQuery, with a compatible API. Out of the box
it provides the most common parts of the jQuery API surface, probably catering
to 80% of uses. It has (very discrete) plugins to cover say another 10% of
cases, and if you need anything beyond that you can just switch zepto to
jQuery and everything will just work :)

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>

------
funkyboy
I reaaaaly prefer Foundation to Twitter bootstrap.

------
yefim323
Is there a list of changes anywhere?

~~~
walls
Yeah, you would think they would at least provide a changelog. I'm curious if
there are changes incompatible with v3.

~~~
ericcholis
They linked to a migration guide in the linked article. Here it is in case you
missed it:

<http://foundation.zurb.com/migration.php>

~~~
walls
Totally missed it, thanks!

------
wildchild
Is there something like wrapbootstrap.com for Foundation?

~~~
rbol
I don't think so. Any designers interested in collaborating on something like
this? Email me!

------
gummydude
there might some minor glitch on Ipad, main banner on zurb's website doesn't
fit properly into viewport.

------
wilfra
What's the advantage of using Foundation over Bootstrap?

~~~
mcrittenden
Features and functionality wise they're pretty much at the same level.
Foundation uses Sass instead of Less so that is a pro to some people.

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

~~~
tptacek
Maybe you should play around with Bootstrap a bit more just so you can learn
not to care when people snark about "another Bootstrap site", because nobody
who's really ready to spend money to have a computer solve one of their
problems cares (or likely even groks) what web framework you used.

~~~
mcrittenden
Agreed. I'm not talking about startups or things I want money for. I'm talking
about random 1-off side projects built for other tech-savvy people or open
source projects.

For example, I launched <http://toogl.es> recently on Foundation and it gets a
lot of developer or other technical users.

~~~
wilfra
is toogl.es pretty much what a stock foundation site looks like?

~~~
BaconJuice
Yes,this site is using the default css with no modifications as far as I can
tell.

