
Zurb Foundation 5 Released - mos2
http://foundation.zurb.com/learn/features.html
======
pwenzel
Changes of note:

"Interchange uses media queries to dynamically load responsive content that is
appropriate for different users' browsers.”

[http://foundation.zurb.com/docs/components/interchange.html](http://foundation.zurb.com/docs/components/interchange.html)

Offcanvas Javascript (Originally bolt-on, not bundled)

[http://foundation.zurb.com/docs/components/offcanvas.html](http://foundation.zurb.com/docs/components/offcanvas.html)

"Abide is an HTML5 form validation library that supports the native API by
using patterns and required attributes."

[http://foundation.zurb.com/docs/components/abide.html](http://foundation.zurb.com/docs/components/abide.html)

Zepto support has been removed from Foundation 5.

Docs are continuing to look better, and they still have docs back to
Foundation v2.

Thanks Zurb!

~~~
bmelton
I've been looking through this, trying to remember why I recently switched to
Bootstrap. Was it a widget that was missing? Maybe a date-picker? Foundation
doesn't really have date-pickers and such.

Hrm. Oh, right. It was angular-ui, which uses Bootstrap.

Angular integration for any of these projects is a BIG win. Because of that,
I'm eagerly awaiting an RC for Angular-Semantic[1], so that I can cut over to
Semantic-UI, which is, I think, best of breed as far as these frontend
aesthetics go.

[1] - [https://github.com/caitp/angular-
semantic](https://github.com/caitp/angular-semantic).

~~~
Bahamut
Angular UI Bootstrap is CSS agnostic - you can use it with Foundation just
fine

~~~
bmelton
I'm aware of that, but there are styling differences between Foundation and
Bootstrap.

The Angular-UI implementation, while self-contained, is going to have a
different .modal() implementation than Foundation's, so there's always going
to be relics in the implementation.

Implementing twice the framework for the same functionality seems a sure fire
way to induce headaches.

Your advice isn't wrong, and worked great for a good number of months, but
requires ignoring the JS components of Foundation altogether, which somewhat
negates the benefits of having a big ol' framework in the first place (IMHO).

~~~
Bahamut
I find ignoring the JS component to work great for me - I override the UI
Bootstrap templates and adapt it to work how I want.

------
chrismorgan
I'm puzzled about the switch from camelCase to snake_case for JS as shown in
[http://foundation.zurb.com/docs/upgrading.html#javascript-
va...](http://foundation.zurb.com/docs/upgrading.html#javascript-variable-
changes). The clear convention in JavaScript is camelCase, why switch _away_
from it? (I say this as someone who in normal life using Python and Rust uses
and prefers snake_case but who uses camelCase when writing JavaScript.)

~~~
Segmentation
> _The clear convention in JavaScript is camelCase, why switch away from it?_

Citation?

~~~
jessedhillon
How would you even expect this to be cited?

Seriously, does someone need to crawl every Javascript project on Github and
compile statistics on naming styles before they can make an obviously true
statement like this? The fact that camelCase is the norm in the language and
browser environment is obvious to anyone who has written even a modest amount
of JS.

    
    
       notQuantified != false

~~~
cstigler
notQuantified !== false

to avoid type coercion here

~~~
mendelk
S/he was using CoffeeScript, obviously! :)

------
baby
Wow, that was fast !

I love Foundation, but I had to switch to Boostrap because I found it... ugly.
And Bootstrap is great to quickly create "pretty" prototypes. But I've always
found Foundation having better... foundations. I've used both on numerous
projects and here's my take :

* The grid system now looks like bootstrap, and I don't like that. You have to choose the type of column you want to use (and I don't want to be bothered by that). so no .six anymore, it's .medium-6 or .large-6 or .small-6... They should call the .small-6 just .six so we know its the default one.

* It does look a bit better, although they removed styling of the radiobox in forms? Why?

* Overall I still prefer bootstrap's theme, I wish Foundation would offer an optional theme like bootstrap 3 does.

* OffCanvas menu is great ! I can already see plenty of applications (but for mobile only)

* The CLI is a nice thing to have but I'm gonna stay away from it. I like the easiness of copypasting files to quickly begin a small project.

* Documentation is hard to go through, doesn't allow to glance at what it offers. It's a huge improvement from F4 or F3 though.

* I use sublime text snippets all the time and this might be a huge addition!

* I like the JS that verifies forms. I usually always use this on my projects so it's nice to have it by default.

Overall I don't really know if I should switch back to Foundation. But I'll
definitely use it for my next project to see how good it is.

~~~
ollysb
> I love Foundation, but I had to switch to Boostrap because I found it...
> ugly.

I consider this is a strength, the styling is thinner so it's easier to
customise. Bootstrap can feel like a bit of a battle if you want to customise
it a lot. I think bootstrap is perfect for admin pages but for something a bit
more custom I think foundation strikes a good balance.

~~~
baby
yup, if I want to start a big project from scratch I'll tend towards
Foundation.

But if I need to prototype something quickly, make a beautiful admin etc...
I'll use Bootstrap. And I'm so used to use bootstrap that I use it for big
projects as well now.

Also Bootstrap 3 is a lot easier to customize.

------
chrisblackwell
This framework is so much further along than Bootstrap is, and the team at
Zurb seems to iterate much faster then the Bootstrap team.

~~~
at-fates-hands
I started to notice that and have since moved over to it now. The feature
updates and add-ons are coming much faster with Foundation than Bootstrap IMO.

~~~
khalilravanna
One thing to note is that while both frameworks are open source, Foundation is
backed by a company (Zurb).

------
tnorthcutt
I looked at the project on Github [1] and the latest tagged release is 4.3.2.
It seems odd that they'd release 5.0 for download on their website before
tagging it on Github; is there a particular reason for that?

1: [https://github.com/zurb/foundation](https://github.com/zurb/foundation)

~~~
peterjmit
Yep, I thought it was weird. The foundation gem is using this repository
[https://github.com/zurb/bower-foundation](https://github.com/zurb/bower-
foundation) though (not tagged, but 5.0 nonetheless)

------
kderbe
Can you explain the benefit of defining media queries with em's rather than
pixels? It seems like an unnecessary layer of mental translation for
developers, given that you deem it necessary to list px-equivalents in the CSS
comments. [1]

Also, the medium/large screen sizes in Interchange don't align with the media
query sizes. Interchange says 1024px wide is large, [2] but the media query
says 1024px wide is medium. Or is it just a documentation error?

[1] [http://foundation.zurb.com/docs/media-
queries.html](http://foundation.zurb.com/docs/media-queries.html)

[2]
[http://foundation.zurb.com/docs/components/interchange.html#...](http://foundation.zurb.com/docs/components/interchange.html#named-
queries)

~~~
Flenser
This explains the benefits:

[http://blog.cloudfour.com/the-ems-have-it-proportional-
media...](http://blog.cloudfour.com/the-ems-have-it-proportional-media-
queries-ftw/)

Here's some boilerplate code:

[https://github.com/johannaruiz/propotional-
mqs](https://github.com/johannaruiz/propotional-mqs)

Make sure you set the viewport correctly:

[http://blog.javierusobiaga.com/stop-using-the-viewport-
tag-u...](http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-
you-know-ho)

as an incorrect viewport can cause issues with some mobile browsers:

[http://www.quirksmode.org/blog/archives/2013/11/a_day_in_the...](http://www.quirksmode.org/blog/archives/2013/11/a_day_in_the_li.html)

------
spitfire
So for the HTML deficient are there any template sites for foundation yet?
These exist for bootstrap, and for someone who doesn't have even a single bone
of design talent in his body they're a godsend.

~~~
bluejaythemes
Hi. Our company, Blue Jay Themes, specializes in making good-looking
Foundation themes. Please follow us on Twitter and we’ll let you know when we
launch in just a couple of weeks. Another great way to stay updated is by
subscribing to our newsletter, which can be found on our website. Thanks.

[http://www.bluejaythemes.com/](http://www.bluejaythemes.com/)
[http://www.twitter.com/bluejaythemes](http://www.twitter.com/bluejaythemes)

~~~
alok-g
Do you really need to verify email addresses on the newsletter-signup form?
Are you seeing abuse where a bad person signs up someone else?

~~~
vcherubini
Verifying email addresses is vitally important for building a high quality
list. Otherwise, you can easily sign up other people for the list, they get
essentially a spam email, report it as spam, and all of a sudden your list is
crap because they didn't have double opt-in.

Keep double opt-in, it's necessary (and I think required in Mailchimp's case
unless you use the API directly).

~~~
bluejaythemes
Thanks for this comment. Double opt-in makes a lot more sense now. We’re
definitely gonna stick with it.

------
frakkingcylons
I just finished the redesign of my entire site to use Foundation 4 instead of
Bootstrap last night. I'm laughing tears right now...

~~~
lowboy
Hopefully by v5 they'll have kept the changes non-breaking.

edit: Apparently it's mostly js fixes for migration:
[https://news.ycombinator.com/item?id=6776912](https://news.ycombinator.com/item?id=6776912)

------
masklinn
Damn, it's gone completely broken on old firefox engines
[http://i.imgur.com/HAR8Rjz.png](http://i.imgur.com/HAR8Rjz.png) (yeah I'm
still using Camino when I can get away with it)

~~~
nawariata
I get same result with Opera 12.16.

~~~
caiob
I guess that's a good thing. They're pushing the web forward.

~~~
caiob
I would love to know why I got doubled-down with this answer.

------
ultrasandwich
Looks like it dropped support for IE8, which unfortunately eliminates this as
an option for a lot of client work. Seems like a solid go-to for more forward-
thinking projects though.

~~~
ericcholis
Year to date 27% of our IE users are on 8 or less, which oddly enough accounts
for 27% of our revenue from visitors using IE. IE 8 or less is 10% of our site
revenue. I simply cannot exclude 10% of our revenue.

With that being said, traffic from IE 8 or less is down 58% from last year.
Windows XP isn't going to die fast enough for me to begin supporting
Foundation 4+.

I could push Firefox or Chrome aggressively, but that's an unfriendly half-
measure.

------
te_chris
I'm more curious about this which is mentioned on the page:
[https://github.com/hcatlin/libsass/](https://github.com/hcatlin/libsass/) has
anyone got it working with rails? Faster SASS compilation would make life much
better (especially when bootstrap or compass are involved).

~~~
vincentmac
Just took a closer look at this. Yes they are using libsass. They are using it
with grunt and grunt-sass ([https://github.com/sindresorhus/grunt-
sass](https://github.com/sindresorhus/grunt-sass)), which uses node-sass
([https://github.com/andrew/node-sass](https://github.com/andrew/node-sass)).

There are other implementations available:
[https://github.com/hcatlin/libsass/wiki/Implementations](https://github.com/hcatlin/libsass/wiki/Implementations)

------
fideloper
I think it's worth noting that Bootstrap and Foundation may not be comparing
apples to apples.

Bootstrap has more styles so you can...bootstrap. Foundation is meant to be a
foundation to build on.

That being said, of course their functionality is very close, but be aware of
the core differences in outlook between the 2.

------
vcherubini
Foundation is without a doubt the nicest CSS framework I have ever used. It
really, really helps me, as a programmer, create amazing interfaces without
much effort at all. Combined with SASS and it's a winning combination.

Can't wait to start playing with version 5.

~~~
rhizome
What would you say the tradeoffs are for that ease of implementation?

------
antihero
One thing that seems utterly absurd is that now you need to have _two_
ecosystems to build _one_ project - both node and and ruby. Seeing as it is
uses libsass to build now, why not ditch the ruby cli and port it to node?

------
kclay
The Interchange plugin saved my butt on a recent project. Client wanted to
have 5 different images for different sizes, it was a breeze to setup even
when having to integrate it with the supersized slider.

------
silviogutierrez
Is Foundation better than Bootstrap? I'm genuinely curious, as they seem
functionality equivalent.

Of course, one uses SASS and one uses LESS. I knew LESS, so I picked
Bootstrap.

But I'm more than willing to switch.

~~~
fein
The only thing you get with bootstrap at this point is an insane amount of
plugins (datepickers, etc). In general, you just have to pick the vanilla
jquery plugins and theme them up to use foundation's syntax. I just recently
did this with xeditable and poshytip.

I'll take the semantics of foundation any day. Love this framework.

~~~
thatthatis
You could also argue than a plugin that ships with hard-wired skin for only
one CSS framework is a signal of bad underlying engineering, i.e. no
separation of concerns

~~~
fein
I fully agree with this. It's one of the things I love about datatables.js.
The library comes with the ability to edit the sdom and templating for just
about everything that library produces. The only funky shit is getting
foundation to properly apply it's js to ajaxed content.

------
ds_
Can anyone tell me how to make a split button / dropdown that goes upwards
(dropup)? This is one thing bootstrap has which I've been missing in
foundation.

~~~
jaredmcateer
This seems a good place to start:

[http://stackoverflow.com/questions/18648307/make-zurb-
founda...](http://stackoverflow.com/questions/18648307/make-zurb-foundation-
dropdown-go-upwards)

[https://github.com/jlong/sass-
bootstrap/blob/master/lib/_dro...](https://github.com/jlong/sass-
bootstrap/blob/master/lib/_dropdowns.scss#L157)

~~~
ds_
Thanks, I was hoping I wouldn't have to make changes to the js which makes
upgrading a headache. I'm probably better off writing my own angular
directive.

------
Jgrubb
On the one hand it's never been a better time to be a front end dev, and on
the other it's absolutely crazy how fast front end technology is progressing
the last couple years. I just caught on to Foundation 4 in the last 4 months
or so, and now here's a new release that's way more evolved. Amazing.

Thanks to the Zurb team! I'll definitely be ripping off lots of ideas for my
company's tortoise-speed Drupal sites.

~~~
dodyg
Faster iteration isn't necessarily better actually especially if people don't
care forward compatibility. Maybe it's just different culture.

For example bootstrap 3 is a breaking upgrade and suddenly your just finished
bootstrap 2 is using 'unsupported' framework.

~~~
amirmc
It may have been breaking but they did well to state that it _would_ be
breaking and was in development long enough (with RCs) that no-one should be
caught by surprise.

I say this as someone who launched a site based on 2.3 as 3.0 entered RC
status.

------
sergiotapia
I've tried to use Foundation before and it's responsive grid was ghastly. This
was the first time I tried anything responsive mind you. So I jumped towards
Bootstrap 3 and it's grid was phenomal to use.

Predictable, simple and quick to iterate - everything I wanted.

I'm going to give this release a try. The interchangable items based on device
widths looks fantastic! I'm really excited to give Zurb a try. :)

~~~
arkitaip
I've had the same experience. Debugging Foundation's responsive grid turned
out to be a nightmare. Just migrated the project to the latest Bootstrap and
it's much more intuitive to work with. Also, Foundation has more styling of
form elements which gets really annoying really fast.

------
mixmastamyk
What's the recommended way to use this with a python dev environment?

I'd rather not have to install ruby too just to rebuild the css. When one of
these is announced I usually find myself navigating the various poorly-
maintained python modules that process the source files, get lost, give up,
and go back to plain css.

Perhaps I could just add a bit of css to a static build instead? Are there any
shortcomings to that?

~~~
jon-wood
One of the features Foundation 5 is advertising is support for libsass, which
is the C implementation by the original author of Sass, so you should be good
without having to install Ruby.

------
minimaxir
When I was choosing a framework for a redesign for my blog (switching from
Bootstrap since it was getting cumbersome), I decided to try out UIkit, since
I ended up not needing any of the JavaScript plugins or super-fancy CSS
effects.

However, after taking a look at Foundation 5's plugins, I will definitely try
using the framework if I need to undertake a website with more ambitious
functionality.

------
afriend4lyfe
I'm new to web design and have been experimenting with a few other development
environments. Reading through these comments I became excited to learn more
about foundation. I went to their site and looked at their site examples. Many
of them were broken and didn't seem to work as intended, nor were they very
beautiful to the uninitiated. This was on a desktop using chrome. I didn't
bother to check with my mobile.

My main platform so far has been extremely buggy too and is not even primarily
made to create websites. I've been using Google Web Designer. Take my advice
with a grain of salt as I represent hobbyist developers who thought "hey, i'd
like to build a site. what tool should I start with?" I would not invest $200
to enroll in your intro course for something that gave me an initial first
impression of being flimsy. However, it is equally likely that I am unable to
realize the full potential of your product with my limited understanding of
web development at first glance.

I'm excited about seeing how Macaw works and am going to begin a new project
with Bootstrap soon. While my main focus has been purely static web design I
plan to incorporate dynamic applications within my approach very soon.

~~~
actionscripted
When you get into those dynamic applications I think you'll find the likes of
Foundation much more appealing. This is not a WYSIWYG-style tool, this is for
developers building sites by hand and the example styles aren't often used in
production.

------
hanifvirani
I would just like to say that I love Foundation! Kudos to the team and
congrats on the new release. I look forward to exploring the new version. That
being said, I am not really digging the new documentation page. The sample
code containers should have a non-white background or at least some kind of a
border.

~~~
smileyj68
Hmm, they should, have a light grey background. Maybe too light?

~~~
hanifvirani
I could see it after fiddling with my contrast setting. I am not sure how bad
it is for other people.

~~~
smileyj68
We'll see if we can amp it up a bit.

------
xwowsersx
I don't know why (maybe I'm just not good with css and html in general), but
I'm always confused when looking at these grid systems. Trying to use zurb in
a project now and I'm kinda lost. Any good resources other than their docs for
sort of showing how to use zurb in a full project?

~~~
bluejaythemes
Webdesigntuts+ has a thorough series covering Foundation 4 you might be
interested in. If your a Lynda subscriber, they’ve got a couple of courses on
Foundation 4, as well. There’s not a whole lot of difference between the grid
in Foundation 4 and Foundation 5. Foundation 5 does add a new medium
breakpoint which is great for tablets.

[http://www.webdesign.tutsplus.com/tutorials/htmlcss-
tutorial...](http://www.webdesign.tutsplus.com/tutorials/htmlcss-
tutorials/foundation-for-beginners-getting-started/)

[http://www.lynda.com/Foundation-training-
tutorials/1628-0.ht...](http://www.lynda.com/Foundation-training-
tutorials/1628-0.html)

~~~
xwowsersx
Man, the quality of the videos on Lynda.com always impresses me. But I don't
wanna pay $25 when that's the only series I want. Wish I could just do a la
carte.

------
mtarnovan
Congrats ! Looks like a big release.

Some pain points from using Foundation (4) in our latest project: * topbar
sucks * custom forms are horrible (they seem to have been removed from 5, or
maybe justs the docs are missing)

Also, using under_score instead of camelCase in javascript is a questionable
choice with no real benefits.

------
qhoc
I switched from Foundation 4 to Flatstrap (a version of Bootstrap) instead
because I like the flat UI. v4 had many problems with JS and especially topbar
was never good enough. I ended up creating my own topbar which is not ideal.
Also the lack of fixed cols is a big issue for desktop design.

------
applecore
How does this compare to Bootstrap 3?

------
nej
Is clicking on Learn suppose to drop the page like this
[http://imgur.com/yH9OKB3](http://imgur.com/yH9OKB3)? Happens on both Chrome
and Firefox.

~~~
smileyj68
Definitely not supposed to, we're pushing a fix for that. Bit of a rush on the
marketing site for launch...

------
jeffpersonified
How is their inclusion of a medium break point not at the top of this thread?
This is the most significant and noticeable addition to the Framework IMO.

------
nettletea
Chrome zoomed in at 125% is enough to break the layout on the getting started
page, which is a little worrying.

~~~
ChristianBundy
Screenshot? I'm not seeing what you're seeing.

~~~
nettletea
Someone appears to have fixed this. The main content was showing below the
left sidebar. ( I have Chrome's default font as Android Sans, that might have
had something to do with it).

------
caiob
When will this be available on Rails?

~~~
ds_
It already is:
[http://foundation.zurb.com/docs/applications.html](http://foundation.zurb.com/docs/applications.html)

To the foundation team, "makes us to do so much quicker" should probably be
"enables us to do so much quicker".

------
tszming
The sliding panel's animation is sluggish on Firefox Mobile/Samsung S4

------
nathanwdavis
The linked web page crashes Safari on iOS 7. Mobile first, eh?

~~~
smileyj68
We tested pretty extensively, it looks okay...what device?

~~~
sudont
Tested and duplicated on an iPad air here. It's Safari's issue, though.

There's a bug in mobile Safari that I can replicate on other sites. Scrolling
on Craigslist's map view when the page is loading also crashes the browser,
which leads me to believe it's something related to attaching to events in
certain states.

------
michaelbuddy
already foundation 5. I've only just had two dates with foundation 4. Between
foundation and Jeet, I'm so stoked to have these to work and collaborate on.

------
princeverma
Is there a good alternative to Abide for Bootstrap ?

------
dabernathy89
seems kind of odd to integrate their own CLI instead of just writing a yo
generator - and where is the documentation for it?

~~~
SkyMarshal
As with prior versions of Foundation, Yeoman will get plenty of generators for
it. At least ZURB's CLI guarantees an easy way to get the canonical version,
which is not always apparent among the various Yeoman generators. Also ZURB
seems more Ruby-oriented than JS-oriented, as most of their installation
methods are based on the Ruby ecosystem.

Docs are here:
[http://foundation.zurb.com/docs/](http://foundation.zurb.com/docs/).

------
travelorg
Is Foundation a "Standard" now?

~~~
loceng
As much as Bootstrap, I imagine. Not sure if moreso or lessso though. Perhaps
different use cases? It looks like developers prefer Bootstrap, not entirely
sure why - perhaps something as simple as the documentation is structured
better for them - or that was the initial crowd who was exposed to it.

~~~
travelorg
It's just that I'm the guy that liked dojo when the world liked jquery. Should
I just go with the majority and choose bootstrap?

~~~
SkyMarshal
Foundation's enough of a standard that you don't have to worry about that.
It'll be around indefinitely and won't get abandoned like some hobbyist
project or superseded by Bootstrap.

~~~
travelorg
My aim is to reduce downloads to mobile users but allow tabs and
laptop/desktop users with bandwidth to get the full show.

------
thomasfl
I am switching to today.

------
andyl
I use Bootstrap, but it looks to me like Foundation5 is a better framework and
is making faster progress. Especially I like Foundations use of SASS.

Problem is - some widgets I depend on - like date-pickers and X-Editable -
only support Bootstrap.

~~~
scotth
Bootstrap is written in LESS [1], and has a SASS port [2].

[1]
[http://getbootstrap.com/customize/#less](http://getbootstrap.com/customize/#less)
[2] [https://github.com/thomas-mcdonald/bootstrap-
sass](https://github.com/thomas-mcdonald/bootstrap-sass)

------
Segmentation
My only problem with Zurb is that ridiculous mascot that represents it. What
is that sky-blue creature? Hipster yeti?

~~~
smileyj68
You don't like our Yeti? Aww. I won't tell him.

