12 ms·

Zurb Foundation 5 Released

400 points by mos2 13y ago

travelorg 13y ago
Is Foundation a "Standard" now?
- loceng 13y ago
  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.
  - dubcanada 13y ago
    Bootstrap has a lot more "extras (javascript stuff)" that make it easier to make an entire product using it. That's pretty much it.
  - buckbova 13y ago
    There's a lot more web application stuff built into bootstrap for forms and multistate buttons and what not.
  - adamb_ 13y ago
    Bootstrap is attached to a big-name company.
    - elm232 13y ago
      They're not though. The author worked for Twitter when he released the first version of Bootstrap, but Twitter never actually used it in production. Twitter doesn't promote it anymore either; BS3 got moved to twbs/bootstrap on GitHub, and the new marketing site doesn't call it Twitter Bootstrap anymore. ZURB doesn't have a huge consumer product, but they're a pretty big name in design, and they have half a dozen people who regularly work on Foundation/Foundation support.
      - adamb_ 13y ago
        I agree that I should have written it past-tense... But, until recently, it was clear that Twitter's name was attached to the project. A Google search for "Twitter Bootstrap" pulls up all the relevant docs, and the first line of the 2.3.2 docs is "Built at Twitter by @mdo and @fat"
  - travelorg 13y ago
    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 13y ago
      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 13y ago
        My aim is to reduce downloads to mobile users but allow tabs and laptop/desktop users with bandwidth to get the full show.
    - camus2 13y ago
      I think jQuery and Bootstrap are "developer ready". IE , easy to use. The easiest lib/project to use will always be the most successfull one. Doesnt mean there is no place for competition, and it doesnt mean it will always be the framework everybody use. Furthermore this is "Twitter" bootstrap. Most people have no idea what Zurb is.
kclay 13y ago
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.
chrisblackwell 13y ago
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 13y ago
  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 13y ago
    One thing to note is that while both frameworks are open source, Foundation is backed by a company (Zurb).
- kyriakos 13y ago
  I believe Foundation is much better for front-end design than Bootstrap. The main benefit of Bootstrap is in backend design because it managed to get more popular and consequently its much easier to find 'bootstrap ready' js based widgets etc
  - lowboy 13y ago
    Maybe I'm misunderstanding what you're saying, but how does Bootstrap's popularity make it better for backend design?
    - KaoruAoiShiho 13y ago
      I think he's confusing javascript with "backend".
    - colinramsay 13y ago
      Backend as in administration systems, rather than frontend which is client-facing?
xwowsersx 13y ago
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?
- lowboy 13y ago
  Are you talking about Zurb's grid system[0] specifically, or referring to Zurb/Bootstrap as "grid systems"? If it's the latter, a simple Google search for "how to use Bootstrap" turns up a lot of resources, including this one[1], which looks good. You might be able to find Foundation-specific ones, but Bootstrap seems to have the edge in popularity. [0]: http://foundation.zurb.com/docs/components/grid.html http://foundation.zurb.com/docs/components/grid.html [1]: http://www.onextrapixel.com/2012/11/12/how-to-use-twitter-bootstrap-to-create-a-responsive-website-design/ http://www.onextrapixel.com/2012/11/12/how-to-use-twitter-bo...
- fein 13y ago
  Where are you hung up? It might just be something simple that I, or anyone else around here can answer quickly. Everything I learned was from trial and error through messing with F4's grid system.
- bluejaythemes 13y ago
  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-tutorials/foundation-for-beginners-getting-started/ http://www.webdesign.tutsplus.com/tutorials/htmlcss-tutorial... http://www.lynda.com/Foundation-training-tutorials/1628-0.html http://www.lynda.com/Foundation-training-tutorials/1628-0.ht...
  - xwowsersx 13y ago
    Thank you for this. I will definitely check out the tutsplus tutorial!
minimaxir 13y ago
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.
silviogutierrez 13y ago
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 13y ago
  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 13y ago
    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 13y ago
      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.
- Raphmedia 13y ago
  Where I work, we use LESS. We actually use Foundation (with it's SASS) and put LESS over it and forget Bootstrap. It's that good.
  - steveax 13y ago
    Genuinely curious, why that much effort to use LESS over Sass?
vcherubini 13y ago
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 13y ago
  What would you say the tradeoffs are for that ease of implementation?
hanifvirani 13y ago
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 13y ago
  Hmm, they should, have a light grey background. Maybe too light?
  - hanifvirani 13y ago
    I could see it after fiddling with my contrast setting. I am not sure how bad it is for other people.
    - smileyj68 13y ago
      We'll see if we can amp it up a bit.
- lowboy 13y ago
  They do for me - maybe your device has the contrast set too low?
nathanwdavis 13y ago
The linked web page crashes Safari on iOS 7. Mobile first, eh?
- fein 13y ago
  Chrome on 4.4 didn't have a single problem, and the site looks wonderful.
- smileyj68 13y ago
  We tested pretty extensively, it looks okay...what device?
  - nathanwdavis 13y ago
    This is on 7.0.2 on an iPhone 4s. Crashes Safari reliably 4 times in a row. Maybe it's just my bad luck. Anyway, looking at it on my laptop now. It looks great!
  - sudont 13y ago
    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.
  - reneherse 13y ago
    First, a big thanks to all the Zurb folks who work on Foundation, I can't wait to dig into the new release! Just for the sake of another data point (albeit an obscure one): The page crashed Chrome on my iPhone 4 running iOS 7.03, both with other pages open and as the only page.
Jgrubb 13y ago
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 13y ago
  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.
  - hackula1 13y ago
    I launched an app the week before BS 3.0 launched and had to spend several days upgrading.
  - amirmc 13y ago
    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.
  - wmeredith 13y ago
    But doesn't "supported" mean iteration? If you don't want to use them why do you care if your framework is "supported" or not?
ds_ 13y ago
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 13y ago
  This seems a good place to start: http://stackoverflow.com/questions/18648307/make-zurb-foundation-dropdown-go-upwards http://stackoverflow.com/questions/18648307/make-zurb-founda... https://github.com/jlong/sass-bootstrap/blob/master/lib/_dropdowns.scss#L157 https://github.com/jlong/sass-bootstrap/blob/master/lib/_dro...
  - ds_ 13y ago
    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.
tnorthcutt 13y ago
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 13y ago
  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)
pwenzel 13y ago
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!
- fein 13y ago
  Also, no changes to the class and attribute semantics (that I've found yet)! The only migration that should have to happen at this point is JS fixes.
  - mos2 13y ago
    There is a migration guide detailing all of the changes in JS: http://foundation.zurb.com/docs/upgrading.html http://foundation.zurb.com/docs/upgrading.html as well as a migration plugin that will allow you to use the f4 style js and get deprecation warnings via the console: https://github.com/zurb/foundation-migrate https://github.com/zurb/foundation-migrate
- dkoch 13y ago
  What do people recommend for functionality similar to Interchange on a Bootstrap 3 site?
  - elithrar 13y ago
    > What do people recommend for functionality similar to Interchange on a Bootstrap 3 site? Why not just use Interchange itself?
    - 13y ago
spitfire 13y ago
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.
- tnorthcutt 13y ago
  http://themeforest.net/collections/3435762-zurb-foundation-templates http://themeforest.net/collections/3435762-zurb-foundation-t... http://www.themplio.com/categories/foundation-free http://www.themplio.com/categories/foundation-free
- deleted 13y ago
  [deleted]
- gopher1 13y ago
  Yes, they have some bare bones templates here: http://foundation.zurb.com/templates.html http://foundation.zurb.com/templates.html
- codegeek 13y ago
  I found this even though there is not that many themes yet. http://www.foundationmade.com http://www.foundationmade.com
  - scottyd 13y ago
    FoundationMade owner here. We're still working on adding themes to the collection, but it hasn't been easy. Hopefully with extra attention on Foundation 5 in general it will bring in some extra Foundation theme developers.
- bluejaythemes 13y ago
  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
michaelbuddy 13y ago
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.
frakkingcylons 13y ago
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 13y ago
  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
- ethnt 13y ago
  You should be fine, there aren't many class/selector changes, AFAIK. You may need to do some JS fixes, but that's it.
- gopher1 13y ago
  Same, T_T but thankfully I'm not using many components, and seems easy to upgrade.
- Kequc 13y ago
  I'm also surprised with the relative speediness of this release.
dabernathy89 13y ago
seems kind of odd to integrate their own CLI instead of just writing a yo generator - and where is the documentation for it?
- SkyMarshal 13y ago
  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/.
baby 13y ago
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.
- vocino 13y ago
  Interesting that I prefer Foundation (if I had to choose one or the other) over Bootstrap for exactly that reason: it's uglier. Whenever I see a new app thingy launch with Bootstrap buttons I cringe a little bit. At least Foundation forces you to make some decisions about how you're presenting things to your users rather than just leaving it how it is (although we've all seen default Foundation apps too).
- ollysb 13y ago
  > 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.
sergiotapia 13y ago
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 13y ago
  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.
- baby 13y ago
  Really? I'm using Bootstrap because it's prettier, but I've always found the Foundation grid system way better.
ultrasandwich 13y ago
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.
- TylerE 13y ago
  I suspect that will no longer the case much longer, if it's not already. One of the sites I run has a VERY non-techncical/older skewing customer base, and even in that group IE <= 8.0 is down to 12% of traffic, from about 28% a year ago. Also, a year ago non-IE browsers were split pretty much 50/50 with IE, but now down to about 35/65. (Chrome and Safari were the big risers, Firefox actually dropped from 2nd to 5th)
- gopher1 13y ago
  Foundation 4 had also dropped IE8 support. For basic stuff like the grid, it's quite easy to manually add IE8 support, given that you're never going to be seeing IE8 on a mobile phone or tablet. For some of the more advanced components you could run into issues.
- ericcholis 13y ago
  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.
- kibibu 13y ago
  I don't think Foundation 4 supported IE8. It's not a huge deal except for the navbar, which is horribly broken in IE8. There are workarounds though.
- highstep 13y ago
  ...this being Foundations greatest failure. Until IE8 is under 2% usage, it going to be hard to convince an ecommerce client that it's OK to leave these users on the table. Sure we can implement workarounds, but that adds a lot of overhead to development. Does it not make sense for a front-end framework to handle cross-browser compatibility for us?
masklinn 13y ago
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 13y ago
  I get same result with Opera 12.16.
  - caiob 13y ago
    I guess that's a good thing. They're pushing the web forward.
    - caiob 13y ago
      I would love to know why I got doubled-down with this answer.
applecore 13y ago
How does this compare to Bootstrap 3?
andyl 13y ago
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 13y ago
  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
fideloper 13y ago
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.
te_chris 13y ago
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).
- rurounijones 13y ago
  https://github.com/hcatlin/sassruby https://github.com/hcatlin/sassruby - Written by the same guy, ruby wrapper around libsass. I am pretty confident that a Rails gem is the eventual goal.
- vincentmac 13y ago
  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
deleted 13y ago
[deleted]
- dylandrop 13y ago
  Just asking - Bootstrap and Foundation essentially help you accomplish the same task, so why wouldn't you compare it to Bootstrap?
chrismorgan 13y ago
I'm puzzled about the switch from camelCase to snake_case for JS as shown in http://foundation.zurb.com/docs/upgrading.html#javascript-variable-changes http://foundation.zurb.com/docs/upgrading.html#javascript-va.... 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.)
- Spiritus 13y ago
  I wouldn't mind if more projects did this to be honest.
  - lowboy 13y ago
    I would, just because it causes fragmentation. PEP-8[0] is a big win for Python. Javascript relies on adhoc standards and best practice docs from respected entities. I'm open to change and debate, but it should be approached carefully. [0]: http://www.python.org/dev/peps/pep-0008/ http://www.python.org/dev/peps/pep-0008/
    - jessedhillon 13y ago
      To be fair, at the time JS was developed, there was a body of well-documented knowledge involving camelCasing. First and foremost was, of course, Java. There are various RFCs involving LDAP schemas as well -- I recall seeing a hilarious document once describing how to properly name the attribute corresponding to an entity's certificate: cACertificate* Talk about slavish consistency.
- Segmentation 13y ago
  > The clear convention in JavaScript is camelCase, why switch away from it? Citation?
  - lowboy 13y ago
    Javascript was created in camelCase, and most major open source projects I've used have been camelCase. I can't find any data on it, but it fits with my experience for what that's worth.
Segmentation 13y ago
My only problem with Zurb is that ridiculous mascot that represents it. What is that sky-blue creature? Hipster yeti?
- smileyj68 13y ago
  You don't like our Yeti? Aww. I won't tell him.
- camus2 13y ago
  Agreed, this is silly but it's like Ember's hamster,it's a hit or miss. While the design is great, you might or might not dig the mascot.
nej 13y ago
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 13y ago
  Definitely not supposed to, we're pushing a fix for that. Bit of a rush on the marketing site for launch...
nettletea 13y ago
Chrome zoomed in at 125% is enough to break the layout on the getting started page, which is a little worrying.
- ChristianBundy 13y ago
  Screenshot? I'm not seeing what you're seeing.
  - nettletea 13y ago
    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).
qhoc 13y ago
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.
caiob 13y ago
When will this be available on Rails?
- ds_ 13y ago
  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".
kderbe 13y ago
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#named-queries http://foundation.zurb.com/docs/components/interchange.html#...
- Flenser 13y ago
  This explains the benefits: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ http://blog.cloudfour.com/the-ems-have-it-proportional-media... 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-until-you-know-ho http://blog.javierusobiaga.com/stop-using-the-viewport-tag-u... as an incorrect viewport can cause issues with some mobile browsers: http://www.quirksmode.org/blog/archives/2013/11/a_day_in_the_li.html http://www.quirksmode.org/blog/archives/2013/11/a_day_in_the...
mixmastamyk 13y ago
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 13y ago
  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.
princeverma 13y ago
Is there a good alternative to Abide for Bootstrap ?
tszming 13y ago
The sliding panel's animation is sluggish on Firefox Mobile/Samsung S4
afriend4lyfe 13y ago
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 13y ago
  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.
jeffpersonified 13y ago
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.
chetzit 13y ago
Very nice. I'm using it on all my projects but "All JavaScript configuration variables are now under_score instead of camelCase" Is that a joke? Why did you do this? I know there are no official guideline, however most of popular js projects stick to camelCase, why wouldn't you?
mtarnovan 13y ago
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.
antihero 13y ago
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?
thomasfl 13y ago
I am switching to today.

400 points by mos2 13y ago

travelorg 13y ago

Is Foundation a "Standard" now?

loceng 13y ago
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.
- dubcanada 13y ago
  Bootstrap has a lot more "extras (javascript stuff)" that make it easier to make an entire product using it. That's pretty much it.
- buckbova 13y ago
  There's a lot more web application stuff built into bootstrap for forms and multistate buttons and what not.
- adamb_ 13y ago
  Bootstrap is attached to a big-name company.
  - elm232 13y ago
    They're not though. The author worked for Twitter when he released the first version of Bootstrap, but Twitter never actually used it in production. Twitter doesn't promote it anymore either; BS3 got moved to twbs/bootstrap on GitHub, and the new marketing site doesn't call it Twitter Bootstrap anymore. ZURB doesn't have a huge consumer product, but they're a pretty big name in design, and they have half a dozen people who regularly work on Foundation/Foundation support.
    - adamb_ 13y ago
      I agree that I should have written it past-tense... But, until recently, it was clear that Twitter's name was attached to the project. A Google search for "Twitter Bootstrap" pulls up all the relevant docs, and the first line of the 2.3.2 docs is "Built at Twitter by @mdo and @fat"
- travelorg 13y ago
  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 13y ago
    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 13y ago
      My aim is to reduce downloads to mobile users but allow tabs and laptop/desktop users with bandwidth to get the full show.
  - camus2 13y ago
    I think jQuery and Bootstrap are "developer ready". IE , easy to use. The easiest lib/project to use will always be the most successfull one. Doesnt mean there is no place for competition, and it doesnt mean it will always be the framework everybody use. Furthermore this is "Twitter" bootstrap. Most people have no idea what Zurb is.

kclay 13y ago

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.

chrisblackwell 13y ago

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 13y ago
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 13y ago
  One thing to note is that while both frameworks are open source, Foundation is backed by a company (Zurb).
kyriakos 13y ago
I believe Foundation is much better for front-end design than Bootstrap. The main benefit of Bootstrap is in backend design because it managed to get more popular and consequently its much easier to find 'bootstrap ready' js based widgets etc
- lowboy 13y ago
  Maybe I'm misunderstanding what you're saying, but how does Bootstrap's popularity make it better for backend design?
  - KaoruAoiShiho 13y ago
    I think he's confusing javascript with "backend".
  - colinramsay 13y ago
    Backend as in administration systems, rather than frontend which is client-facing?

xwowsersx 13y ago

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?

lowboy 13y ago
Are you talking about Zurb's grid system[0] specifically, or referring to Zurb/Bootstrap as "grid systems"? If it's the latter, a simple Google search for "how to use Bootstrap" turns up a lot of resources, including this one[1], which looks good. You might be able to find Foundation-specific ones, but Bootstrap seems to have the edge in popularity. [0]: http://foundation.zurb.com/docs/components/grid.html http://foundation.zurb.com/docs/components/grid.html [1]: http://www.onextrapixel.com/2012/11/12/how-to-use-twitter-bootstrap-to-create-a-responsive-website-design/ http://www.onextrapixel.com/2012/11/12/how-to-use-twitter-bo...
fein 13y ago
Where are you hung up? It might just be something simple that I, or anyone else around here can answer quickly. Everything I learned was from trial and error through messing with F4's grid system.
bluejaythemes 13y ago
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-tutorials/foundation-for-beginners-getting-started/ http://www.webdesign.tutsplus.com/tutorials/htmlcss-tutorial... http://www.lynda.com/Foundation-training-tutorials/1628-0.html http://www.lynda.com/Foundation-training-tutorials/1628-0.ht...
- xwowsersx 13y ago
  Thank you for this. I will definitely check out the tutsplus tutorial!

minimaxir 13y ago

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.

silviogutierrez 13y ago

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 13y ago
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 13y ago
  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 13y ago
    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.
Raphmedia 13y ago
Where I work, we use LESS. We actually use Foundation (with it's SASS) and put LESS over it and forget Bootstrap. It's that good.
- steveax 13y ago
  Genuinely curious, why that much effort to use LESS over Sass?

vcherubini 13y ago

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 13y ago
What would you say the tradeoffs are for that ease of implementation?

hanifvirani 13y ago

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 13y ago
Hmm, they should, have a light grey background. Maybe too light?
- hanifvirani 13y ago
  I could see it after fiddling with my contrast setting. I am not sure how bad it is for other people.
  - smileyj68 13y ago
    We'll see if we can amp it up a bit.
lowboy 13y ago
They do for me - maybe your device has the contrast set too low?

nathanwdavis 13y ago

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

fein 13y ago
Chrome on 4.4 didn't have a single problem, and the site looks wonderful.
smileyj68 13y ago
We tested pretty extensively, it looks okay...what device?
- nathanwdavis 13y ago
  This is on 7.0.2 on an iPhone 4s. Crashes Safari reliably 4 times in a row. Maybe it's just my bad luck. Anyway, looking at it on my laptop now. It looks great!
- sudont 13y ago
  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.
- reneherse 13y ago
  First, a big thanks to all the Zurb folks who work on Foundation, I can't wait to dig into the new release! Just for the sake of another data point (albeit an obscure one): The page crashed Chrome on my iPhone 4 running iOS 7.03, both with other pages open and as the only page.

Jgrubb 13y ago

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 13y ago
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.
- hackula1 13y ago
  I launched an app the week before BS 3.0 launched and had to spend several days upgrading.
- amirmc 13y ago
  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.
- wmeredith 13y ago
  But doesn't "supported" mean iteration? If you don't want to use them why do you care if your framework is "supported" or not?

ds_ 13y ago

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 13y ago
This seems a good place to start: http://stackoverflow.com/questions/18648307/make-zurb-foundation-dropdown-go-upwards http://stackoverflow.com/questions/18648307/make-zurb-founda... https://github.com/jlong/sass-bootstrap/blob/master/lib/_dropdowns.scss#L157 https://github.com/jlong/sass-bootstrap/blob/master/lib/_dro...
- ds_ 13y ago
  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.

tnorthcutt 13y ago

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 13y ago
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)

pwenzel 13y ago

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!

fein 13y ago
Also, no changes to the class and attribute semantics (that I've found yet)! The only migration that should have to happen at this point is JS fixes.
- mos2 13y ago
  There is a migration guide detailing all of the changes in JS: http://foundation.zurb.com/docs/upgrading.html http://foundation.zurb.com/docs/upgrading.html as well as a migration plugin that will allow you to use the f4 style js and get deprecation warnings via the console: https://github.com/zurb/foundation-migrate https://github.com/zurb/foundation-migrate
dkoch 13y ago
What do people recommend for functionality similar to Interchange on a Bootstrap 3 site?
- elithrar 13y ago
  > What do people recommend for functionality similar to Interchange on a Bootstrap 3 site? Why not just use Interchange itself?
  - 13y ago

spitfire 13y ago

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.

tnorthcutt 13y ago
http://themeforest.net/collections/3435762-zurb-foundation-templates http://themeforest.net/collections/3435762-zurb-foundation-t... http://www.themplio.com/categories/foundation-free http://www.themplio.com/categories/foundation-free
deleted 13y ago
[deleted]
gopher1 13y ago
Yes, they have some bare bones templates here: http://foundation.zurb.com/templates.html http://foundation.zurb.com/templates.html
codegeek 13y ago
I found this even though there is not that many themes yet. http://www.foundationmade.com http://www.foundationmade.com
- scottyd 13y ago
  FoundationMade owner here. We're still working on adding themes to the collection, but it hasn't been easy. Hopefully with extra attention on Foundation 5 in general it will bring in some extra Foundation theme developers.
bluejaythemes 13y ago
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

michaelbuddy 13y ago

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.

frakkingcylons 13y ago

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 13y ago
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
ethnt 13y ago
You should be fine, there aren't many class/selector changes, AFAIK. You may need to do some JS fixes, but that's it.
gopher1 13y ago
Same, T_T but thankfully I'm not using many components, and seems easy to upgrade.
Kequc 13y ago
I'm also surprised with the relative speediness of this release.

dabernathy89 13y ago

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

SkyMarshal 13y ago
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/.

baby 13y ago

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.

vocino 13y ago
Interesting that I prefer Foundation (if I had to choose one or the other) over Bootstrap for exactly that reason: it's uglier. Whenever I see a new app thingy launch with Bootstrap buttons I cringe a little bit. At least Foundation forces you to make some decisions about how you're presenting things to your users rather than just leaving it how it is (although we've all seen default Foundation apps too).
ollysb 13y ago
> 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.

sergiotapia 13y ago

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 13y ago
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.
baby 13y ago
Really? I'm using Bootstrap because it's prettier, but I've always found the Foundation grid system way better.

ultrasandwich 13y ago

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.

TylerE 13y ago
I suspect that will no longer the case much longer, if it's not already. One of the sites I run has a VERY non-techncical/older skewing customer base, and even in that group IE <= 8.0 is down to 12% of traffic, from about 28% a year ago. Also, a year ago non-IE browsers were split pretty much 50/50 with IE, but now down to about 35/65. (Chrome and Safari were the big risers, Firefox actually dropped from 2nd to 5th)
gopher1 13y ago
Foundation 4 had also dropped IE8 support. For basic stuff like the grid, it's quite easy to manually add IE8 support, given that you're never going to be seeing IE8 on a mobile phone or tablet. For some of the more advanced components you could run into issues.
ericcholis 13y ago
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.
kibibu 13y ago
I don't think Foundation 4 supported IE8. It's not a huge deal except for the navbar, which is horribly broken in IE8. There are workarounds though.
highstep 13y ago
...this being Foundations greatest failure. Until IE8 is under 2% usage, it going to be hard to convince an ecommerce client that it's OK to leave these users on the table. Sure we can implement workarounds, but that adds a lot of overhead to development. Does it not make sense for a front-end framework to handle cross-browser compatibility for us?

masklinn 13y ago

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 13y ago
I get same result with Opera 12.16.
- caiob 13y ago
  I guess that's a good thing. They're pushing the web forward.
  - caiob 13y ago
    I would love to know why I got doubled-down with this answer.

applecore 13y ago

How does this compare to Bootstrap 3?

andyl 13y ago

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 13y ago
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

fideloper 13y ago

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.

te_chris 13y ago

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

rurounijones 13y ago
https://github.com/hcatlin/sassruby https://github.com/hcatlin/sassruby - Written by the same guy, ruby wrapper around libsass. I am pretty confident that a Rails gem is the eventual goal.
vincentmac 13y ago
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

deleted 13y ago

[deleted]

dylandrop 13y ago
Just asking - Bootstrap and Foundation essentially help you accomplish the same task, so why wouldn't you compare it to Bootstrap?

chrismorgan 13y ago

I'm puzzled about the switch from camelCase to snake_case for JS as shown in http://foundation.zurb.com/docs/upgrading.html#javascript-variable-changes http://foundation.zurb.com/docs/upgrading.html#javascript-va.... 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.)

Spiritus 13y ago
I wouldn't mind if more projects did this to be honest.
- lowboy 13y ago
  I would, just because it causes fragmentation. PEP-8[0] is a big win for Python. Javascript relies on adhoc standards and best practice docs from respected entities. I'm open to change and debate, but it should be approached carefully. [0]: http://www.python.org/dev/peps/pep-0008/ http://www.python.org/dev/peps/pep-0008/
  - jessedhillon 13y ago
    To be fair, at the time JS was developed, there was a body of well-documented knowledge involving camelCasing. First and foremost was, of course, Java. There are various RFCs involving LDAP schemas as well -- I recall seeing a hilarious document once describing how to properly name the attribute corresponding to an entity's certificate: cACertificate* Talk about slavish consistency.
Segmentation 13y ago
> The clear convention in JavaScript is camelCase, why switch away from it? Citation?
- lowboy 13y ago
  Javascript was created in camelCase, and most major open source projects I've used have been camelCase. I can't find any data on it, but it fits with my experience for what that's worth.

Segmentation 13y ago

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

smileyj68 13y ago
You don't like our Yeti? Aww. I won't tell him.
camus2 13y ago
Agreed, this is silly but it's like Ember's hamster,it's a hit or miss. While the design is great, you might or might not dig the mascot.

nej 13y ago

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 13y ago
Definitely not supposed to, we're pushing a fix for that. Bit of a rush on the marketing site for launch...

nettletea 13y ago

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

ChristianBundy 13y ago
Screenshot? I'm not seeing what you're seeing.
- nettletea 13y ago
  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).

qhoc 13y ago

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.

caiob 13y ago

When will this be available on Rails?

ds_ 13y ago
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".

kderbe 13y ago

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#named-queries http://foundation.zurb.com/docs/components/interchange.html#...

Flenser 13y ago
This explains the benefits: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ http://blog.cloudfour.com/the-ems-have-it-proportional-media... 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-until-you-know-ho http://blog.javierusobiaga.com/stop-using-the-viewport-tag-u... as an incorrect viewport can cause issues with some mobile browsers: http://www.quirksmode.org/blog/archives/2013/11/a_day_in_the_li.html http://www.quirksmode.org/blog/archives/2013/11/a_day_in_the...

mixmastamyk 13y ago

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

princeverma 13y ago

Is there a good alternative to Abide for Bootstrap ?

tszming 13y ago

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

afriend4lyfe 13y ago

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

jeffpersonified 13y ago

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.

chetzit 13y ago

Very nice. I'm using it on all my projects but "All JavaScript configuration variables are now under_score instead of camelCase" Is that a joke? Why did you do this? I know there are no official guideline, however most of popular js projects stick to camelCase, why wouldn't you?

mtarnovan 13y ago

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.

antihero 13y ago

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?

thomasfl 13y ago

I am switching to today.