8 ms·

Zurb Launches Foundation 4

234 points by forrestkoba 14y ago

wilfra 14y ago
What's the advantage of using Foundation over Bootstrap?
- mcrittenden 14y ago
  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 14y ago
    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 14y ago
      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 http://toogl.es recently on Foundation and it gets a lot of developer or other technical users.
      - wilfra 14y ago
        is toogl.es pretty much what a stock foundation site looks like?
        BaconJuice 14y ago
        Yes,this site is using the default css with no modifications as far as I can tell.
        mcrittenden 14y ago
        Yeah, pretty much, besides using FontAwesome and a couple tweaks here and there.
  - Kerrick 14y ago
    That was true for Foundation 3, but Foundation 4 is changing the game a bit. ZURB now seems to be focusing more on Mobile-First than Bootstrap: between media queries expanding the mobile site for desktops (rather than slimming the desktop site for mobiles) and switching to Zepto.js by default,which forgoes all Internet Explorer compatibility (though you can switch back to jQuery no problem), Foundation and Bootstrap seem to be diverging.
- michaelbuckbee 14y ago
  In general Foundation is considered smaller and lighter than Bootstrap, many devs also prefer its use of SASS instead of LESS (which is the Bootstrap default css pre-processor). 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-resources http://www.bootstraphero.com/the-big-badass-list-of-twitter-...
  - wilfra 14y ago
    Not looking bootstrappy sounds like a good reason to use it for some projects. Is there a 'stock foundation' looking site you can link to, I'm curious if I'd recognize it.
    - michaelbuckbee 14y ago
      If you're not digging through the source you'd probably think it was a lightly styled Bootstrap site as many of the same tells are present (black top navbar, etc). However, I think there is some massive confirmation bias at work. If a site customizes Bootstrap and it looks nice nobody credits it as a 'Bootstrap Looking' site, so as a result it is only when the defaults are used that people really pick up on it. That coupled with the fact that there are many more Bootstrap sites kicking around out there I think has led to the misconception about "Bootstrap Looking" sites.
      - baby 14y ago
        I don't think it's an unfair reputation. Looks and feeling of a website is heavily influenced by its button (I've read a great article somewhere analyzing the internet big guys' buttons). Bootstrap's buttons are not easily customizable, thus people feel like they're running into bootstrap-like websites a lot.
- davidw 14y ago
  There isn't one as far as I can tell. We picked Zurb for a site I was working on, and subsequently switched to Bootstrap, since that's where all the momentum (themes, plugins, etc...) seems to be. Zurb is high quality stuff, but Bootstrap is good too, with more weight behind it - for now, at least.
- markdown 14y ago
  Foundation is more flexible. Bootstrap is very opinionated. 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.
  - mcrittenden 14y ago
    Do you have any specifics on why you consider Bootstrap more opinionated? I've used both on a few different sites and haven't really noticed this.
    - arcosdev 14y ago
      The whole javascript-hipster-semicolon debacle would be high on my list
      - mcrittenden 14y ago
        That doesn't really affect the developer using it though. GP's argument that Foundation is more flexible and Bootstrap is more opinionated seems unrelated to the semicolon debate.
        mattyfo 14y ago
        I disagree, I found the Bootstrap JS code hard to read and follow because of the lack of semicolons. For a framework that is supposed to help people 'bootstrap' it would seem to me that making their code understandable and accessible is something important.
        baby 14y ago
        I don't see how the lack of semicolons disturbed you, I actually noticed it earlier today for the first time. If you're having trouble with that you won't be able to read Python very efficiently.
- jeffpersonified 14y ago
  Zurb was built with the responsiveness from the beginning. That doesn't seem to have been the case with Bootstrap. I've found having a responsive site out of the box, without some of the headaches I've had trying to do the same with Bootstrap, is worth the costs of a smaller community. Plus, it doesn't look like every other Bootstrap site and is more easily customized.
  - driverdan 14y ago
    I agree. Foundation's responsiveness has always been better IMO.
- rodriguezcommaj 14y ago
  I have used both extensively on both personal and work-related projects. Both are great, but Foundation gets my vote as it is lighter and much easier to work with as a designer. With Bootstrap, you are pretty much stuck with that general look unless you want to do A LOT of work. You will end up looking like every other app out there using it. 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.
- antrix 14y ago
  When I refreshed my resume [1] last year, I went with Bootstrap first. But I found it really difficult to modify the defaults that Bootstrap provided. The deal-breaker for me was that the responsive grid worked only when the container width was set to the default value. Changing the default width broke the responsive grid. In the end, I tried out Foundation and it was a breeze to customize it to my needs. 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/ http://antrix.net/resume/
- baby 14y ago
  I've been using both of them a lot lately. I'll give you some answers: 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.
- tga 14y ago
  I currently like using Bootstrap for web apps and Foundation for designing web pages. 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.
iaskwhy 14y ago
Broken link at http://foundation.zurb.com/prototyping.php http://foundation.zurb.com/prototyping.php UI Docs links to http://foundation.zurb.com/docs/elements.php http://foundation.zurb.com/docs/elements.php which returns a 404.
- Cigano 14y ago
  OMDog.
yefim323 14y ago
Is there a list of changes anywhere?
- ericcholis 14y ago
  This is where it used to live: http://foundation.zurb.com/docs/changelog.php http://foundation.zurb.com/docs/changelog.php However, it's not working at the moment.
- walls 14y ago
  Yeah, you would think they would at least provide a changelog. I'm curious if there are changes incompatible with v3.
  - ericcholis 14y ago
    They linked to a migration guide in the linked article. Here it is in case you missed it: http://foundation.zurb.com/migration.php http://foundation.zurb.com/migration.php
    - walls 14y ago
      Totally missed it, thanks!
baby 14y ago
http://foundation.zurb.com/sass.html http://foundation.zurb.com/sass.html is broken
- mos2 14y ago
  http://foundation.zurb.com/docs/sass.html http://foundation.zurb.com/docs/sass.html is working
thedangler 14y ago
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 14y ago
  You're not the only one.
  - ebtalley 14y ago
    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.
deleted 14y ago
[deleted]
eCa 14y ago
The "Clone now" link on http://foundation.zurb.com/ http://foundation.zurb.com/ is a little boring on Windows. (It's currently pointing to github-mac://openRepo/https://github.com/zurb/foundation https://github.com/zurb/foundation)
mokash 14y ago
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 14y ago
  > 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.lukew.com/ff/entry.asp?933 http://www.abookapart.com/products/mobile-first http://www.abookapart.com/products/mobile-first and he apparently pushed for Foundation 4 to much better support this design style.
- dak1 14y ago
  Bootstrap 3 is going in the same direction. 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.
- jordanlev 14y ago
  The idea is that not all browsers support media queries, javascript, etc. (the things that are required to make responsive design work). So if the responsive design isn't going to work, what is it that you want the client to see as the default/base style? "Mobile First" says that the default/base style should be the simplest one, which is generally the mobile design (single column, not as many "moving parts", etc.).
- rahilsondhi 14y ago
  Mobile first is just a new paradigm where you make your application fit a mobile screen first, then your second step is to scale up to web (or tablet). 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.
mamcx 14y ago
"Not tested in 4" for add-ons http://foundation.zurb.com/icon-fonts.php http://foundation.zurb.com/icon-fonts.php. Thats unexpected. With bootstrap the whole package is ready-to-go in each release...
- jbail 14y ago
  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?
aioprisan 14y ago
http://foundation.zurb.com/docs/ http://foundation.zurb.com/docs/ is broken
- zerosanity 14y ago
  Looks fixed now.
matteodepalo 14y ago
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.
FilterJoe 14y ago
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 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.
- niclupien 14y ago
  I'm a big fan of presentation-free markup and IMHO, SASS offers a good way to achieve it with mixins. Look at this article, it pretty much covers that topic. http://chriseppstein.github.com/blog/2009/09/20/why-stylesheet-abstraction-matters/ http://chriseppstein.github.com/blog/2009/09/20/why-styleshe... 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; } I describe the whole thing with examples here: https://github.com/niclupien/compass-examples/wiki/Example-01 https://github.com/niclupien/compass-examples/wiki/Example-0...
- davej 14y ago
  There's examples on almost every page of the docs. For example, here's the docs for buttons: http://foundation.zurb.com/docs/components/buttons.html http://foundation.zurb.com/docs/components/buttons.html Just scroll down to the "Build with Mixins" section.
  - niclupien 14y ago
    Love it! In my mind THIS is the best new feature of foundation 4 (I mean the new doc ;)
- sprobertson 14y ago
  Here's what I think they mean: without Scss/Sass extension, to get your main div to be 4 columns wide you have to do something along the lines of `<div class="four columns"> ...`. With the ability to extend other classes, you could instead be more semantic and define your div as `<div id="main"> ...` and in your Scss file say `#main { @extend columns; @extend four; }`. 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/ http://csszengarden.com/)
joeblau 14y ago
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 14y ago
  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.
gummydude 14y ago
there might some minor glitch on Ipad, main banner on zurb's website doesn't fit properly into viewport.
pacomerh 14y ago
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 http://foundation.zurb.com/docs/support.html
- kreas73 14y ago
  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.
- edbloom 14y ago
  this. I just started a new project in Foundation 3 for a public sector NFP that requires IE8 compatibility. Foundation 4 is pretty much not an option for me as a result. Guess I'm stuck with Foundation 3 for now.
- tonyblundell 14y ago
  When they say "Not supported" what do they mean? If it gets the mobile style then that's not so bad. If it all goes a bit Picasso then that's a problem.
leoalves 14y ago
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/ http://markdotto.com/2013/02/28/reintroducing-preboot/
throwaway420 14y ago
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.
elclanrs 14y ago
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/ http://semantic.gs/ [2] http://html5boilerplate.com/ http://html5boilerplate.com/ [3] http://visionmedia.github.com/nib/ http://visionmedia.github.com/nib/
jeffpersonified 14y ago
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?
- spullara 14y ago
  Looks like if you don't need the other features of JQuery you just use it and ignore it. Otherwise you can just swap it out with JQuery instead and not break anything. Seems like a strict subset.
- WickyNilliams 14y ago
  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 http://zeptojs.com/#download [2] http://code.jquery.com/jquery-1.9.1.js http://code.jquery.com/jquery-1.9.1.js
wildchild 14y ago
Is there something like wrapbootstrap.com for Foundation?
- rbol 14y ago
  I don't think so. Any designers interested in collaborating on something like this? Email me!
funkyboy 14y ago
I reaaaaly prefer Foundation to Twitter bootstrap.
alwillis 14y ago
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 https://twitter.com/foundationzurb/status/307647218951811072

234 points by forrestkoba 14y ago

wilfra 14y ago

What's the advantage of using Foundation over Bootstrap?

mcrittenden 14y ago
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 14y ago
  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 14y ago
    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 http://toogl.es recently on Foundation and it gets a lot of developer or other technical users.
    - wilfra 14y ago
      is toogl.es pretty much what a stock foundation site looks like?
      - BaconJuice 14y ago
        Yes,this site is using the default css with no modifications as far as I can tell.
      - mcrittenden 14y ago
        Yeah, pretty much, besides using FontAwesome and a couple tweaks here and there.
- Kerrick 14y ago
  That was true for Foundation 3, but Foundation 4 is changing the game a bit. ZURB now seems to be focusing more on Mobile-First than Bootstrap: between media queries expanding the mobile site for desktops (rather than slimming the desktop site for mobiles) and switching to Zepto.js by default,which forgoes all Internet Explorer compatibility (though you can switch back to jQuery no problem), Foundation and Bootstrap seem to be diverging.
michaelbuckbee 14y ago
In general Foundation is considered smaller and lighter than Bootstrap, many devs also prefer its use of SASS instead of LESS (which is the Bootstrap default css pre-processor). 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-resources http://www.bootstraphero.com/the-big-badass-list-of-twitter-...
- wilfra 14y ago
  Not looking bootstrappy sounds like a good reason to use it for some projects. Is there a 'stock foundation' looking site you can link to, I'm curious if I'd recognize it.
  - michaelbuckbee 14y ago
    If you're not digging through the source you'd probably think it was a lightly styled Bootstrap site as many of the same tells are present (black top navbar, etc). However, I think there is some massive confirmation bias at work. If a site customizes Bootstrap and it looks nice nobody credits it as a 'Bootstrap Looking' site, so as a result it is only when the defaults are used that people really pick up on it. That coupled with the fact that there are many more Bootstrap sites kicking around out there I think has led to the misconception about "Bootstrap Looking" sites.
    - baby 14y ago
      I don't think it's an unfair reputation. Looks and feeling of a website is heavily influenced by its button (I've read a great article somewhere analyzing the internet big guys' buttons). Bootstrap's buttons are not easily customizable, thus people feel like they're running into bootstrap-like websites a lot.
davidw 14y ago
There isn't one as far as I can tell. We picked Zurb for a site I was working on, and subsequently switched to Bootstrap, since that's where all the momentum (themes, plugins, etc...) seems to be. Zurb is high quality stuff, but Bootstrap is good too, with more weight behind it - for now, at least.
markdown 14y ago
Foundation is more flexible. Bootstrap is very opinionated. 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.
- mcrittenden 14y ago
  Do you have any specifics on why you consider Bootstrap more opinionated? I've used both on a few different sites and haven't really noticed this.
  - arcosdev 14y ago
    The whole javascript-hipster-semicolon debacle would be high on my list
    - mcrittenden 14y ago
      That doesn't really affect the developer using it though. GP's argument that Foundation is more flexible and Bootstrap is more opinionated seems unrelated to the semicolon debate.
      - mattyfo 14y ago
        I disagree, I found the Bootstrap JS code hard to read and follow because of the lack of semicolons. For a framework that is supposed to help people 'bootstrap' it would seem to me that making their code understandable and accessible is something important.
        baby 14y ago
        I don't see how the lack of semicolons disturbed you, I actually noticed it earlier today for the first time. If you're having trouble with that you won't be able to read Python very efficiently.
jeffpersonified 14y ago
Zurb was built with the responsiveness from the beginning. That doesn't seem to have been the case with Bootstrap. I've found having a responsive site out of the box, without some of the headaches I've had trying to do the same with Bootstrap, is worth the costs of a smaller community. Plus, it doesn't look like every other Bootstrap site and is more easily customized.
- driverdan 14y ago
  I agree. Foundation's responsiveness has always been better IMO.
rodriguezcommaj 14y ago
I have used both extensively on both personal and work-related projects. Both are great, but Foundation gets my vote as it is lighter and much easier to work with as a designer. With Bootstrap, you are pretty much stuck with that general look unless you want to do A LOT of work. You will end up looking like every other app out there using it. 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.
antrix 14y ago
When I refreshed my resume [1] last year, I went with Bootstrap first. But I found it really difficult to modify the defaults that Bootstrap provided. The deal-breaker for me was that the responsive grid worked only when the container width was set to the default value. Changing the default width broke the responsive grid. In the end, I tried out Foundation and it was a breeze to customize it to my needs. 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/ http://antrix.net/resume/
baby 14y ago
I've been using both of them a lot lately. I'll give you some answers: 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.
tga 14y ago
I currently like using Bootstrap for web apps and Foundation for designing web pages. 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.

iaskwhy 14y ago

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

Cigano 14y ago
OMDog.

yefim323 14y ago

Is there a list of changes anywhere?

ericcholis 14y ago
This is where it used to live: http://foundation.zurb.com/docs/changelog.php http://foundation.zurb.com/docs/changelog.php However, it's not working at the moment.
walls 14y ago
Yeah, you would think they would at least provide a changelog. I'm curious if there are changes incompatible with v3.
- ericcholis 14y ago
  They linked to a migration guide in the linked article. Here it is in case you missed it: http://foundation.zurb.com/migration.php http://foundation.zurb.com/migration.php
  - walls 14y ago
    Totally missed it, thanks!

baby 14y ago

http://foundation.zurb.com/sass.html http://foundation.zurb.com/sass.html is broken

mos2 14y ago
http://foundation.zurb.com/docs/sass.html http://foundation.zurb.com/docs/sass.html is working

thedangler 14y ago

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 14y ago
You're not the only one.
- ebtalley 14y ago
  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.

deleted 14y ago

[deleted]

eCa 14y ago

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

mokash 14y ago

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 14y ago
> 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.lukew.com/ff/entry.asp?933 http://www.abookapart.com/products/mobile-first http://www.abookapart.com/products/mobile-first and he apparently pushed for Foundation 4 to much better support this design style.
dak1 14y ago
Bootstrap 3 is going in the same direction. 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.
jordanlev 14y ago
The idea is that not all browsers support media queries, javascript, etc. (the things that are required to make responsive design work). So if the responsive design isn't going to work, what is it that you want the client to see as the default/base style? "Mobile First" says that the default/base style should be the simplest one, which is generally the mobile design (single column, not as many "moving parts", etc.).
rahilsondhi 14y ago
Mobile first is just a new paradigm where you make your application fit a mobile screen first, then your second step is to scale up to web (or tablet). 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.

mamcx 14y ago

"Not tested in 4" for add-ons http://foundation.zurb.com/icon-fonts.php http://foundation.zurb.com/icon-fonts.php. Thats unexpected. With bootstrap the whole package is ready-to-go in each release...

jbail 14y ago
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?

aioprisan 14y ago

http://foundation.zurb.com/docs/ http://foundation.zurb.com/docs/ is broken

zerosanity 14y ago
Looks fixed now.

matteodepalo 14y ago

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.

FilterJoe 14y ago

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

niclupien 14y ago
I'm a big fan of presentation-free markup and IMHO, SASS offers a good way to achieve it with mixins. Look at this article, it pretty much covers that topic. http://chriseppstein.github.com/blog/2009/09/20/why-stylesheet-abstraction-matters/ http://chriseppstein.github.com/blog/2009/09/20/why-styleshe... 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; } I describe the whole thing with examples here: https://github.com/niclupien/compass-examples/wiki/Example-01 https://github.com/niclupien/compass-examples/wiki/Example-0...
davej 14y ago
There's examples on almost every page of the docs. For example, here's the docs for buttons: http://foundation.zurb.com/docs/components/buttons.html http://foundation.zurb.com/docs/components/buttons.html Just scroll down to the "Build with Mixins" section.
- niclupien 14y ago
  Love it! In my mind THIS is the best new feature of foundation 4 (I mean the new doc ;)
sprobertson 14y ago
Here's what I think they mean: without Scss/Sass extension, to get your main div to be 4 columns wide you have to do something along the lines of `<div class="four columns"> ...`. With the ability to extend other classes, you could instead be more semantic and define your div as `<div id="main"> ...` and in your Scss file say `#main { @extend columns; @extend four; }`. 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/ http://csszengarden.com/)

joeblau 14y ago

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 14y ago
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.

gummydude 14y ago

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

pacomerh 14y ago

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 http://foundation.zurb.com/docs/support.html

kreas73 14y ago
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.
edbloom 14y ago
this. I just started a new project in Foundation 3 for a public sector NFP that requires IE8 compatibility. Foundation 4 is pretty much not an option for me as a result. Guess I'm stuck with Foundation 3 for now.
tonyblundell 14y ago
When they say "Not supported" what do they mean? If it gets the mobile style then that's not so bad. If it all goes a bit Picasso then that's a problem.

leoalves 14y ago

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/ http://markdotto.com/2013/02/28/reintroducing-preboot/

throwaway420 14y ago

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.

elclanrs 14y ago

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/ http://semantic.gs/ [2] http://html5boilerplate.com/ http://html5boilerplate.com/ [3] http://visionmedia.github.com/nib/ http://visionmedia.github.com/nib/

jeffpersonified 14y ago

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?

spullara 14y ago
Looks like if you don't need the other features of JQuery you just use it and ignore it. Otherwise you can just swap it out with JQuery instead and not break anything. Seems like a strict subset.
WickyNilliams 14y ago
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 http://zeptojs.com/#download [2] http://code.jquery.com/jquery-1.9.1.js http://code.jquery.com/jquery-1.9.1.js

wildchild 14y ago

Is there something like wrapbootstrap.com for Foundation?

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

funkyboy 14y ago

I reaaaaly prefer Foundation to Twitter bootstrap.

alwillis 14y ago

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 https://twitter.com/foundationzurb/status/307647218951811072