Zurb Foundation

The most advanced responsive front-end framework in the world

Hosted by

Kevin Ball's photoRafi Benkual's photoDaniel Codella's photo

27th June 2017, 9:00 pm

This AMA is over!

Thank the host

Message from the host 💬

What an incredible AMA! Thank you all so much for spending your afternoon with us, we hope we were able to answer all your questions fully and share a few insights along the way. We want to extend a special thank you to our contributors and in particular, the Yetinauts who have been working incredibly hard to take Foundation to the next level. YOU GUYS ROCK! We’re stoked about the future of Foundation, and we’ll be sharing some of our thinking very soon our blog.

💻 Be sure to bookmark and check back frequently in the next few weeks for updates!

✉️ Sign up to the Foundation Insider to get the inside scoop before anyone else:

📚 The best way to learn Foundation is directly from our team. We offer two live online courses that will build up the in-demand front-end development skills employers are looking for:

• Intro to Foundation:

• Advanced Foundation:

⁉️ If you have questions, want to get involved, or need help, feel free to reach out to us @ZURBFoundation on Twitter or through email: foundation (at) zurb (dot) com!

👋 Thanks again and keep in touch!

When will Foundation 7 be out? What will be the key differentiators between 6 and 7? One of the major reasons to upgrade to 7 was flexbox grid. Why would one upgrade to 7?

Hi @ksharma1! We're targeting Foundation 7 for November 7 of this year... so it will launch on 11/7/17.

There are 2 major differentiators that will take Foundation 7 and set it apart, not only from Foundation 6 but from all of the other frameworks in the marketplace.

The first is to dramatically improve your freedom to shift between JavaScript frameworks with a super-powerful pluggable JavaScript architecture. UI Frameworks today tend to either go all in on one framework (e.g. Material is super focused on Angular) or have completely independent "ports" for different JS frameworks. The problem with the first is obvious - the JS ecosystem is diverse, and going all on 1 framework in dramatically limits your options. The problem with the 2nd (which is how Foundation 6 works) is that things tend to get lost or get inconsistent between ports. With 7 we're going to separate the state and "UI logic" from the dom manipulation, creating a simple interface for that, and make it simple to create a thin port of Foundation into any JS framework. We have some proof of concepts in development and are super excited about this.

The second major differentiator is going to be a shift to a full-on ITCSS based architecture, using SMACSS, with robust support for theming. This will make it far easier to build maintainable and extensible themes, sites, and design frameworks. Currently many frontend frameworks like Bootstrap and Material consist of both a design language and an implementation/tooling. With the theming, we want to give you the freedom to use the Foundation tooling, which is the best in the world, with the design language of your choice.

Will there be a option to have embeds/videos move to the bottom corner of the webpage on scroll? Like how the videos work in the latest version of the docs?

Hey Bryan, I think that would make a great Building Block!

For those who don't know, we've got a great set of more advanced components that folks have built from ZURB and the whole Foundation community over at

It's all open source, so you can jump in and submit updates, ask for new building blocks using issues (Bryan do you want to add a request for the video one?), etc all in the github repo here:

How can I join the framework you are building and make an awesome difference like you are?

It's pretty simple - just jump in on github ( and start contributing!

One of our all-star Yetinauts, Harry Manchanda, who was one of the biggest contributors to the 6.4 release, started out by filing an issue with a request for a feature. (well, actually around 10 different issues for features, he's pretty excitable... ;D) We thought one of the features was a good idea, and asked if he wanted to try to build it. He wasn't sure how, but we walked him through, and got him to his first PRs... quality was... not great... but he was open to feedback and so after some back and forth (and back and forth and back and forth - some of his early PRs have 100s of comments) he got it merged and got his start.

It is helpful if you're open to feedback and learning, but we try to be pretty nice too - no Linus Torvalds in this project. :P

For a little more breakdown of things to do to get started, some notes from Harry himself:

  • Fork the repo, Clone the repository. npm install and then npm start to start the repo’s docs locally.
  • Start with with ideas you have that you think foundation doesn’t have and will be great to have within the framework. New Features are what make the framework great
  • Help us with fixing bugs =>
  • Engage other folks and help them solve the issues they are facing
  • Help us in visual tests

Will F7 use CSS Grid?

Hi Dimitri, We're SUPER excited about CSS Grid and want to use it as soon possible. Given the timeline for Foundation 7 (November of this year) we think it is unlikely that we'll be able to only use CSS Grid, as we doubt that browser support will have gotten to the point that all of our audience can use it.

Thanks for introducing me to hashnode!

For how long will the the majority of websites stick to floating grids, before moving on to new methods like CSS Grid and flexbox? Is it just Browser Support that holds us back, or do developers just need more time to adapt it? Lemme hear your thoughts!

The extra effort you all put in with XY Grid is really appreciated. I'm looking forward to it!

This is a great question and something we're very passionate about. We're acutely aware that the old way of doing things (float based grids) were hacks when nothing better existed.

We've been using The Flexbox version of Foundation for UI and grids for over a year now. Most of our clients are totally on board for using the latest and greatest because Flexbox browser support is pretty good (and we use Autoprefixer in our projects).

That's right though - browser support and the need to learn it are the roadblocks we here. This is changing though over time because as with Mobile First, Sass, accessibility and more, Foundation has helped push new concepts and technologies forward.

We did a lesson on CSS Grids and there will more where that came from:

Look, Flexbox is easy to learn, saves headaches and time, and reduces code in most cases. We just kicked off a new lesson series on Flexbox:

You can subscribe to our Youtube channel for all the lessons here:

You can signup to get the lesson emails here:

Wow, I have a lot to say about this :) CSS Grid and Flexbox are the future and we're committed to helping people be more awesome by making these easy to get going on.

Love the question!

  • rafi

What's to say about the upgradability to the next versions (6.4, 7, ...) - will it be easy or is a major refactor process necessary?

Hi @BernhardWStudio, We're making big changes, so there will definitely be refactors that are required, however we're making a big effort to release things with a migration path, and to do it in pieces so you can upgrade a step at a time. For example, 6.4 is shipping with the XY-Grid, but you can still use the older grids, and in fact you can even use the older grid in conjunction with XY for while you migrate.

We definitely feel like we flubbed the migration path from 5 to 6, and we're putting in a ton of time to make sure that the 6 to 7 migration is less painful.

New to Foundation. Looking forward to default flex grid in 6.40.

Any chance you guys will have some incorporating Foundation with WordPress videos / tutorials?

Welcome Brad! The new XY Grid is a huge leap forward for grids in general so we're excited that you are excited!

There are many Foundation WordPress starter projects available and two of our favorites come to mind: JointsWP - FoundationPress -

Both are similar and well made. Both are maintained by Foundation certified developers. I would start here as they are already integrated and include Walker themes for navigation and such.

You'll find written tutorials for FoundationPress here:

You'll find video tutorials here:

Looking forward to following your progress on Foundation!

Yay! Yetti is here... :D

Hey Zurb team, Great work on the foundation framework. I have been using both Foundation for Sites and Foundation for Emails.

I think some work is needed in Foundation for Emails. Is there a way to get in touch with the development team and fix issues quickly? Something like intercom support would be really good.

I know it's an open source project and intercom would be very expensive to the team. But, an easy way to get solutions will be good.

Hi Lillie Thanks for the kind words - we love hearing how Foundation helps you!

The best way to raise is an important issue to the forefront is activity. If there is an open issue on GitHub then adding to the conversation with a suggestion, supporting information, or even a +1 will help bump it to the top. This is one way issues are prioritized so that people can fix them.

In terms of having conversations, I'd like to invite you to the Foundation slack channel where you can collaborate with the awesome people there. It's likely someone has found a solution or can share a tip that helps :)

Shoot me an email, I'll invite you to the Slack group -

  • Rafi

What happened to the Yeti Launcher Mac App?

Hey Bryan - We've closed the Yeti Launch project to focus on the core framework and the ZURB Stack, along with future versions of Foundation like 7. You can follow the roadmap for Foundation here:

The newest CLI that shipped with Foundation 6 is easier to install than ever and we found that most developers were using the command line anyways (GitHub). The CLI is the best way to get started!

If you're looking for tools like that, check out Codekit or Koala App

  • Rafi

I built myself a WordPress starter theme, using the base underscores & Foundation 6.3.*, using Codekit to compile & minify. 6.4 seems to be completely different in the architecture & files. How much work am I likely to encounter to update my starter theme to foundation 6.4?

Hi Mark, Depending on exactly how you set it up, it could be pretty simple or it could be a bit more work.

If you're not trying to do a deep customization on the JavaScript, you should be able to just point your JS to the new distfiles and have that work fine - the underlying architecture change won't stop that, and we put a ton of work into making sure that the old "drop in your javascript" approach would continue to function. That said, if you want to move your project more into ES2016 land and use something like webpack, there might be a bit more work... you can see an example of how one of our Yetinauts, Brett Mason, tackled this linked from this github issue:

On the SCSS side, we worked hard to maintain backwards compatibility, so if you want to keep using the older grids you can, simply leave your @imports the same as they were. If you are ready to move to the XY grid (and I hope you do... it's super powerful and really opens a ton of new layout possibilities), you can change your import over to import that grid with @import foundation-xy-grid-classes; If you do, you'll need to update your templates to use the new grid classes.

If you run into questions, don't hesitate to reach out on github (chiming in on the issue linked above might be a good place to start), via the Foundation slack channel, or in the Forum. We've got a number of folks who are building wordpress themes who can help you out.

Is 6.4 same as version 7? Why are some people already talking about version 7 when 6.4 is yet to be launched on Tuesday? To me a lot of difference exist between versioning 6.4 and 7. If version 7 will launched any time soon, why launch 6.4 on Tuesday, rather than waiting for 7?

Hey there Chukwuemeka! Thanks so much for joining us here on Hashnode! Version 6.4 is not the same as 7. Foundation 7 is going to be released in the fall. The ZURB Foundation team always has our eyes fixed firmly forward, looking well beyond the present to figure out where we can take frontend development forward. It's the reason why we're the world's most advanced frontend framework. Foundation has changed the way we design and build the web in lots of ways, you can read a few of them here:

So while we have a strong vision and a solid roadmap for Foundation 7 in mind, we're also working tirelessly on point releases for 6, always looking for ways we can add new features, improve it, and fix bugs. Unlike other frameworks and open source projects, we don't want our users to be stuck in limbo. We want them to get a steady stream of solid, feature packed updates that give them the edge.

I hope you get a chance to check out Foundation 6.4 today, and it would be absolutely incredible for you to help contribute to 7! Check out our Github page to see the roadmap and get involved!

Can Zurb create some sort of tool or workflow for easier upgrades from 6.3 to 6.4 to 7.x etc?

EDIT: Yes! "Migration" is a more correct term than "upgrade" here. Thank you!

EDIT 2: As for other full on tools that need to deal with changes to Foundation versions - I'd point to CoffeeCup's "Foundation Framer" and Humane Technologies "Pinegrow" apps - both need to update every time there's a new version. As to how they do that internally, I've no idea. I only know they somehow update the apps. Perhaps the existing site projects break - both are GUI front ends to help the user visualize as they build.

This is absolutely something we're interested in, and we're attempting to improve the migration process, both by having more guided migration notes with every release and keeping more things backwards compatible with a deprecation warning as we change them over.

We're also going to start adding a migration section to the docs - there's one in progress right now.

Building a full-on tool would be a pretty big challenge, as there are so many different ways people are using Foundation out there (especially when you layer in all of the scss mixins), but if you know of anyone who's done something like that really well that we could use an example, definitely point it out.

Are they any plans to switch completely to webpack and move away from gulp?

And what are the benefits or disadvantages if the foundation-zurb-template does completely switch to webpack?

Hi Marvin, I broke down a bunch of stuff related to this in

The long and short of it is - Webpack is better (and faster) for JavaScript, but slower for SCSS (we've seen almost 2x slower on SCSS building). So if you're doing more of a static site that is mostly html & scss without tons and tons of JavaScript, it's probably still going to be better to use gulp for the scss. If you're heavy on the JS, there's advantages to moving completely to Webpack.

Most folks are using foundation-zurb-template for more static sites and prototyping, so we'll probably stick with gulp for that... at least until Webpack gets a faster scss compile. :)

Are there any plans to expand the custom build on the download page? Opening up the entire settings page would be a huge benefit to students.

Hi Steven, That's a great idea, but not something we have on the immediate roadmap. If you'd be interested in helping make something like this happen, email me at kball (at) - we haven't open sourced that page but there's no reason we shouldn't, so we could do that and make this happen.

One of the stated goals of v7 is to be "accessible in every framework." I have high hopes that this will be the case and 6.4 is a big step toward making that possible. In the meantime, though, it can still be tricky to architect a front-end codebase around, say, Foundation and React without two different repos, two different builds, etc... which can get confusing pretty quickly. Given the amount of overlap in tooling, dependencies, and structure, I would love to see a harmonious single project codebase that would allow me to build out Foundation and React (or any other js framework without having go to great lengths to glue them together. Any thoughts on what that might look like or how I should organize projects for use with React?

Hi @gpspake, This is exactly the challenge we're working on with the planned Foundation 7 JavaScript architecture. Without going into too great a detail as it's still early days and may change, our approach is to encapsulate state and "ui logic" in a core component, and then provide simple clean interfaces for implementation in different frameworks.

Essentially the idea is to make the 'glue' piece much thinner, making it much easier to support integrations in every JS Framework, and keeping the internal logic consistent without requiring folks to rebuild it.

Our early proof of concept has implementations both in vanilla JavaScript and React, and we're optimistic we can get the interface well enough defined that building these out for every framework will be quick. Exactly how that ends up playing out into project structure is still TBD. If you (or anyone else reading this) is interested in getting involved in making this a reality, hit me up by email at kball (at)

I'm really excited to see webpack and babel making it in to the project :D Now that we have webpack available for bundling, though, will Foundation continue to rely on Gulp or is there a plan to transition fully to webpack for scss bundling and browser-sync as well? Also, jQuery's great and all but, again - now that babel's in the mix, is it possible that we'll see a movement away from jQuery in favor of vanilla es6 any time in the near future?

Hi George, There's a couple pieces here that I answer in more detail in for gulp and for javascript, but the high level is

  1. gulp is enough faster for scss we're unlikely to drop it for our own builds, but you're welcome to drop it in yours
  2. Foundation 6 will continue to depend on jQuery, but Foundation 7 will have a vanilla es6 implementation at its root

There are many questions here already about 6 vs 6.4 vs 7. My question is, with the big changes in 6.4, and the assumed changes in 7, will the concept be to keep the naming conventions of the grid the same throughout, with minimal changes needed; or will Foundation use new classes with each new grid (flexbox vs a future css grid, for example)?

Hi David - You might have noticed that throughout Foundation 6's life cycle, there have been progressive enhancements made that are leading toward Foundation 7. This makes migration more gradual and easier for all of you. Since Foundation 3, the grid classes have largely remained unchanged. Flexbox offers more possibilities and it seems wrong to hamstring it with old classnames that restrict or confuse it's use.

The latest XY Grid released today with 6.4 does use new class names to better utilize the X-direction and Y-direction capabilities that Flexbox gives us. Thinking into the future, we purposely used the new class names because they work well with CSS Grid as well.

So going back to the first point, you are likely to see these classnames introduced today with 6.4 cary over into 7 to make a simpler migration.

  • Rafi

Love Foundation (6) and integrated it into a major overhauled manufacturer website recently, with Kentico Enterprise.

In the very beginning of the overhaul, we used Orbit (5) for the product page slider and realized it had some issues that caused some headaches (we got it to work cross-browser however). Ultimately we switched to the recommended slick slider. It's great, but I noticed Oribit is still documented under v6 Foundation. Is it being supported again?

Hi Jason Glad you're loving Foundation and congrats on your overhaul! For Carousels with lots of features, Slick and Owl are both excellent choices. Orbit was ultimately deprecated in Foundation 5 but resurrected in Foundation 6 are a more streamlined carousel with a focused feature set.

We believe there are use cases for carousels still, and that Foundation can cover the most common needs for them. When you need a full featured carousel, Slick and Owl are our goto's.

Sounds like you're already deep into your overhaul - hope the new video tutorial on each docs page help you out!

  • Rafi

Will flex grid finally be the default in V7? And how do you see the future of CSS grid when it comes to Foundation.

Will there be a style change in V7? Can we get a sneak peak?

Hi Yamen - Foundation is now Flex first (version 6.4 released today)! With the latest 6.4 release the new XY Grid is the default along with Flexbox based UI components. Foundation 6 always had a flexbox grid but this new XY grid is killer because it does vertical and horizontal along with margin-padding control. You can learn more about it and join a free webinar to learn it here:

We're SUPER excited about CSS Grid and have already started using it. Foundation 7 will be released November of this year so we think the browser support may not be there for CSS Grid by then (Foundation is moving fast). We have already built some of our Grid with CSS Grid and experimented with it's potential:

Foundation 7 roadmap is coming soon so watch the Blog and Follow us on Youtube for that!

Similar to @gpspake question, but I rely on Gulp. Will Foundation continue to rely on Gulp or is there a plan to transition away?

Hi Norm, There's kind of three different sub-pieces of this, the build system we're using within the framework to build it, the build systems we ship in our templates, and the build systems you can use in your project.

For the build systems within the framework, we have no immediate plans to move away from gulp (gulp-scss continues to be faster than webpack for building scss, and the framework has way more scss than JS).

For the build system in the templates, we're also currently planning to stick with gulp for scss, though that may change. The reason is these templates are primarily used for static sites and prototyping where the amount of JS is small relative to the SCSS, so the gains we'd get on the JS side from moving to e.g. webpack-dev-server would probably be overwhelmed by the slowdown we'd see by moving scss into webpack.

All that said - Foundation works cleanly with a range of build systems. If you're using a gulp-based workflow, you can continue to use one. If you use a grunt-based workflow, you should be able to do that as well. If you have a full-on webpack build system, as of 6.4 Foundation should be easy to set up in there. If you're using Rails, we work in the asset pipeline (though I do gotta say... the new is build using Rails 5 and we moved ALL of our assets into webpack for that... so much nicer...). The build system we use internally shouldn't limit your ability to use other build systems for your project.

What inspired to you create a new UX Revolution?

Hey there Phil! Thanks so much for joining us here on this AMA :) ZURB's been around since 1998, and our purpose is to change the way people design connected product and services. We do this through our consulting work, our products (like Foundation), and our training. You can read up about our purpose and mission here:

In our design work, we've been able to consistently surface what we call Design Insights, breakthroughs that reveal behavior patterns and drive bold decisions. They shape the way we approach problems, point us in new and better directions, and help us build unstoppable momentum!

We hope to help other people and team learn how to harness the power of Design Insights to build amazing new products and services. Foundation is one the biggest ways we're able to reach millions of people and get them thinking differently about common design problems. It's really incredible to see how millions of designers and hundreds of thousands of brands be able to use it to accomplish great things!

Congrats on 6.4 :D The road map says that "high quality integrations" for react and angular "exist" for 7. Could you talk about what those integrations are or where I can find more info about that effort? I'm using the react-foundation package (it's nice) and I wonder if that's the integration that "exists" or if there are other more robust projects that refers to. Thanks!

There are many Foundation integrations depending on the framework or backend.

The React one: The Angular one:

Regarding the statement - this is part of the greater plan for the JS architecture work going into Foundation 7. @kball detailed it well here:

Essentially doing so will allow more and better integration into the future!

Will the CLI reflect the changes?

Hi John! First off - initial answer is yes, we've just updated the templates that the CLI pulls from along with the release, so new projects with the CLI should immediately start pulling in the new version.

Secondly, I do want to highlight one of our new Yetinauts, Christopher Ramos, is giving the CLI a lot of love right now, so we should be rolling out some great updates soon.

Can i make an app using javascript but also be able to put it on the web?I know i use javascript for web development but what is it saved as an apk? no i don't really think so

Hi Olwethu, I'm not exactly sure what you're trying to accomplish here, but you can definitely use shared code for a web application and a mobile application packaged with something like cordova. You'll need to build an abstraction layer for any mobile calls you make, and make sure you keep your frontend cleanly separated using an API, but other than that it's mostly a build problem.

How compatible is XY Grid with browsers in Foundation 6.4. Is there a fall-back solution when using the new css grid for older browsers. Is XY Grid really ready for production.

Hi Lester, The XY Grid was built particularly with production in mind - it was inspired by CSS Grid but built using Flexbox to give browser support back to IE10. I certainly hope you don't have to support any further back than that... but if you do, you can still fall back to the float-based grid instead of the XY Grid. That option will remain throughout the Foundation 6 series, though with 7 we will officially drop support for IE9.

This may be elementary, I'm somewhat a newbie. I noticed that jquery.js & what-input.js files are not included with 6.4, are they no longer needed? Also, there's no index.html in the download, is the HTML Starter Template still valid? It does reference the above 2 files.

Hi Chester, These should not have changed, so it sounds like you might have encountered a bug in the downloader - I will take a look as soon as I get off this AMA, but if you could file an issue on github at with exactly which download options you used, that would be helpful.

Will Foundation embrace CSS grid and web components (when they receive cross browser support) or do these technologies make Foundation and other CSS frameworks less necessary?

Hi Ollie - We love CSS Grid and think it enhances Foundation. Being able to use it with a class based system be valuable to most especially when prototyping rapidly. Foundation has a history of integrating and helping push forward new technologies and CSS Grid will be another on of those:

We have a lot of plans and ongoing discussions regarding the JS architecture for the future of Foundation. Web Component will be a supported approach, like with Polymer. For more on the JS architecture, @kball posted a great description of it here:

  • Rafi