Menu icon Foundation
Foundation for Sites 6.1.2 to 6.2 Migration

Hey everyone! Foundation for Sites 6.2 is out with tons of bug fixes, new features, and forward advancement.

Notable bug fixes:
- Responsive menu dropdown position and arrow position
- Reveal Modal positioning fixes
- Button Group fixes several visual bugs and misaligned arrow inside a split button
- Drilldowns add mobile parent link
- Magellan: fixed it not working properly in Firefox.
- Slider: fixed dual-handled sliders sometimes not rendering the fill properly on init. #8128
- Sticky: fixed incorrect height calculations due to DOM contents shifting around before the page is fully loaded.

And tons more: 360 commits!
Care to compare commits?

This changelog is huge! New features and bug fixes galore!

6.2 Changelog

Thanks to our awesome contributors who pitched in to make Foundation 6.2 even better for you all:
- Brian Tan
- akodde
- Alex Hanna
- Alexander Martin
- Andy Cochran
- Brian Tan
- Chris Oyler
- Chris Ramos
- Colin Marshall
- Erik Mellum
- Geoff Kimball
- Lynda
- Michel Sabchuk
- monosize
- Pete Cooper
- Prayag Verma
- Tom Byrer
- Tvrtko Majstorović
- Vic McGlaughlin


There are some deprecations - NOT breaking changes for this release and following this guide will keep you ahead of the game!

6.1.2 to 6.2 Migration Guide

Go ahead and bower update and let us know how it goes! Ask us any questions of share your suggestion on the upgrade in the comments below!

foundation 6Foundationv6F6Migrationupgradetop-barnavigationmenu

Hey everyone! Foundation for Sites 6.2 is out with tons of bug fixes, new features, and forward advancement.

Notable bug fixes:
- Responsive menu dropdown position and arrow position
- Reveal Modal positioning fixes
- Button Group fixes several visual bugs and misaligned arrow inside a split button
- Drilldowns add mobile parent link
- Magellan: fixed it not working properly in Firefox.
- Slider: fixed dual-handled sliders sometimes not rendering the fill properly on init. #8128
- Sticky: fixed incorrect height calculations due to DOM contents shifting around before the page is fully loaded.

And tons more: 360 commits!
Care to compare commits?

This changelog is huge! New features and bug fixes galore!

6.2 Changelog

Thanks to our awesome contributors who pitched in to make Foundation 6.2 even better for you all:
- Brian Tan
- akodde
- Alex Hanna
- Alexander Martin
- Andy Cochran
- Brian Tan
- Chris Oyler
- Chris Ramos
- Colin Marshall
- Erik Mellum
- Geoff Kimball
- Lynda
- Michel Sabchuk
- monosize
- Pete Cooper
- Prayag Verma
- Tom Byrer
- Tvrtko Majstorović
- Vic McGlaughlin


There are some deprecations - NOT breaking changes for this release and following this guide will keep you ahead of the game!

6.1.2 to 6.2 Migration Guide

Go ahead and bower update and let us know how it goes! Ask us any questions of share your suggestion on the upgrade in the comments below!

Brian Tan over 2 years ago

bower update failed to update, dependency conflicts:

 Unable to find a suitable version for foundation-sites, please choose one:
    1) foundation-sites#~6.1.2 which resolved to 6.1.2 and is required by foundation-sites-template
    2) foundation-sites#^6.2.0 which resolved to 6.2.0

Prefix the choice with ! to persist it to bower.json

? Answer 2

Unable to find a suitable version for jquery, please choose one:
    1) jquery#~2.1.4 which resolved to 2.1.4 and is required by motion-ui#1.1.1
    2) jquery#~2.1.0 which resolved to 2.1.4 and is required by foundation-sites#6.1.2
    3) jquery#~2.2.0 which resolved to 2.2.1 and is required by foundation-sites#6.2.0

Prefix the choice with ! to persist it to bower.json

? Answer 

Vladimir over 2 years ago

I was afraid of this update but so far so good.

npm update
npm WARN install Couldn't install optional dependency: Unsupported
- interpret@0.6.6 node_modules/interpret
- jquery@2.1.4 node_modules/jquery
/home/vladimir/www/newconcept
├── foundation-sites@6.2.0
├── gulp@3.9.1
├── laravel-elixir@4.2.1
└── motion-ui@1.2.2

@Rafi Benkual but now I am confused with Babel. I didn't used it in my previous installation but it seams I will have to now. Or am I wrong?
I will test this a bit more tomorrow.

James Cocker over 2 years ago

The Babel requirement has come as a bit of a surprise to me too. I use CodeKit, which has always had great support for Foundation, however with 6.2's requirement for Babel (if following best practices and only including used JS modules) CodeKit cannot be used to build a Foundation 6.2 project. At least without creating some elaborate hook in CodeKit which manually runs Babel on the right files at the right time.

Alejandro over 2 years ago

hi there, just installed a clean foundation 6.2 project in order to test the new things, so i´m following the upgrade steps.
I´ve made the gulp-babel installation via npm.
Created a ".babelrc" file with the content inside in my root project directory.
But i´m afraid i can´t find a "gulpfile.js" with this content inside:

gulp.task('javascript', function() {
return gulp.src(PATHS.javascript)
.pipe($.sourcemaps.init())
.pipe($.babel()) // <-- There it is!
.pipe($.concat('app.js'))
.pipe(uglify)
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe(gulp.dest('dist/assets/js'))
.on('finish', browser.reload);
});

so i can paste the ".pipe($.babel()) // <-- There it is!" line

regards and thanks in advance

Laurent over 2 years ago

Hi, I used the CSS installation and i migrate from 6.1.2 to 6.2.0.

Everything seems to work for now. By against the tabs does not work. The first tab displays the contents but when I click on the second tab content disappears and I have nothing.

I have no error.

When I deliver my version 6.1.2 tabs work well. Are there changes on tabs in version 6.2.0? I check my code with the 6.2.0 documentation, it is OK. I think it is a java script problem ?

I use Jquery 2.2.1 and Symfony 2.8.2.

Thanks for your help. At this moment à go back to 6.1.2.

Vladimir over 2 years ago

I have one question for @Rafi Benkual regarding babel integration into project and gulp file.
We have this in upgrade manual:

gulp.task('javascript', function() {
return gulp.src(PATHS.javascript)
.pipe($.sourcemaps.init())
.pipe($.babel()) // <-- There it is!
.pipe($.concat('app.js'))
.pipe(uglify)
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe(gulp.dest('dist/assets/js'))
.on('finish', browser.reload);
});

but since I am using (and maybe few others) Laravel I have completely different gulp file, like this one:

elixir(function(mix) {
    var options = {
        includePaths: [
            'node_modules/foundation-sites/scss',
            'node_modules/motion-ui/src'
        ]
    };

    mix.sass('app.scss', null, options);

    // Javascript
    var jQuery = '../../../node_modules/jquery/dist/jquery.js';
    var foundationJsFolder = '../../../node_modules/foundation-sites/js/';

    mix.scripts([
        jQuery,
        foundationJsFolder + 'foundation.core.js',
        // Include any needed components here. The following are just examples.
        foundationJsFolder + 'foundation.util.mediaQuery.js',
        foundationJsFolder + 'foundation.util.keyboard.js',
        foundationJsFolder + 'foundation.util.box.js',
        foundationJsFolder + 'foundation.util.nest.js',
        foundationJsFolder + 'foundation.util.timerAndImageLoader.js',
        foundationJsFolder + 'foundation.tabs.js',
        foundationJsFolder + 'foundation.responsiveMenu.js',
        foundationJsFolder + 'foundation.responsiveToggle.js',
        foundationJsFolder + 'foundation.accordionMenu.js',
        foundationJsFolder + 'foundation.dropdownMenu.js',
        foundationJsFolder + 'foundation.interchange.js',
        foundationJsFolder + 'foundation.util.motion.js',
        foundationJsFolder + 'foundation.util.nest.js',
        foundationJsFolder + 'foundation.util.triggers.js',
        foundationJsFolder + 'foundation.sticky.js'
    ]);

});

where do I put this pipe to babel()???

Vladimir over 2 years ago

Also when I run gulp to merge JS scripts I receive this warn

WARNING: Rename $grid-column-responsive-gutter to $grid-column-gutter to remove this warning.
on line 41 of node_modules/foundation-sites/scss/grid/_grid.scss

and my whole JS stopped working. I am absolutely sure it has something to do with Babel but what I don't know at this moment.
So, back to fixing things I fixed already :D

Rafi Benkual over 2 years ago

@Vladimir @James Cocker

Babel is only required if you're using a build system like the ZURB Stack (advanced project). It allows people to use the ES2015 support for the latest version of JavaScript.

Vladimir over 2 years ago

@Rafi Benkual in inspector console I receive this error

Uncaught SyntaxError: Unexpected token =

can this be due to missing dependency or something else...

Rafi Benkual over 2 years ago

Knowing that Codekit doesn't support Babel - it seems like a compiled version of each plugin could help there.

Looks like there is a big push from the React community to get this support as well https://github.com/bdkjones/CodeKit/issues/554#issuecomment-116611607

Vladimir over 2 years ago

@Rafi Benkual this part is I must say, untrue : "Babel is only required if you're using a build system like the ZURB Stack..."
I understand that @Rafi Benkual is probably unfamiliar with Laravel framework but I must add this because of other Laravel users who will stumble upon this thread when searching for solution for this problem.
With old version of Foundation, before v6.2 we had something like this

mix.scripts([
jQuery,
foundationJsFolder + 'foundation.core.js',
foundationJsFolder + 'foundation.tabs.js',
//and many others needed in project
]);

with version 6.2 this line has to be changed so it goes like this

mix.babel([
        jQuery,
        foundationJsFolder + 'foundation.core.js',
        foundationJsFolder + 'foundation.tabs.js',
//and many others needed in project
    ]);

and we have our JS file back :)

Rafi Benkual over 2 years ago

Ah, cool! I am not familiar with Laravel. Your example is really helpful for those who are using it!

Tom Belknap over 2 years ago

Honestly, you guys. I love this product but I can't stand the lack of proper documentation. You have a million different variations on a theme and so no matter what I try, I end up in this current version finding a dead end.

To whit: I never used Bower to install Foundation, ergo I don't have it now. If I install it, does that mean that the update will work? I used NPM and when I'm in the foundation directory, if I npm update, nothing happens.

Please, please, please. Try not to be all things to all people. Or if you insist, make sure you have SPECIFIC INSTRUCTIONS for each method of installation or update. I'm sure there's a lot I'm missing simply because I don't work with Node.js. But unless you plan on serving ONLY those developers, that shouldn't make a difference.

Vladimir over 2 years ago

@Tom Belknap you are somewhat right. Some people are using Windows system for development, others Mac, I on other hand am using Linux. I have procedure written step by step on how to setup Laravel framework with Foundation (and I am using git, composer and npm for that and never did I installed Bower on my system; this is to show that you can install it without Bower). This procedure is then distributed to others on specific forums so that they can also use that procedure on their machines.
Problem arises when there is a change (like this one with Babel) and due to the lack of documentation and examples we are not able to came up with quick solution.
I just wanted to say that there are multiple ways you can accomplish task of setting up Foundation on your system you just need to find one that suits you best. ZURB used Bower because it is used to pull components you need and update them as well. You can skip this part if you are more advanced user and do it manually, but as I said, you need a lot more knowledge then a "simple user" :)

Arif Hamid over 2 years ago

@Vladimir Did you manage to resolve this part:

 Uncaught SyntaxError: Unexpected token =

I tried to update 6.2 and set jquery dependency to 2.2.1 but I got the error above and all scripts stop running.

Danni over 2 years ago

@Laurent i have same issue but turns out in my case the tabs id and data-tabs-content is using different name (notice the login-tabs and example-tabs) in the snippet below.

    <ul class="tabs" data-tabs id="login-tabs">
      <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Create Account</a></li>
      <li class="tabs-title"><a href="#panel2">Register</a></li>
    </ul>      
    <div class="tabs-content" data-tabs-content="example-tabs">

@Rafi Benkual Just create a new project using Foundation 6.2 either via cli or clone the repo & running npm/bower install, but it seems the scss/_settings.scss is from 6.1, I mean there's no new setting such as foundation-pallete etc.

And the responsive toogle is not working.

Danni over 2 years ago

@Rafi Benkual for responsive toggle not working turns out in my scss\app.scss is not including foundation-menu-icon

so by putting

@include foundation-menu-icon

under @include foundation-menu;

problem solved.

Vladimir over 2 years ago

@Arif Hamid Yes I did. I used mix.babel instead of mix.scripts. But this was my case, others had problems with not included dependencies...

Arif Hamid over 2 years ago

@Vladimir Ah I see. Okay I'll checkout the babel thingy and see If I can sort it out on my end. Thanks for the lead.

Tom Belknap over 2 years ago

@Vladimir Difference between operating systems are normal. The problem is the idea that Foundation hasn't bothered to decide whether to use NPM our Bower. At least as a start. I mean: they make one bit of software, they update it, and then they have no single path to upgrade? Why is that?

I'm committed to using Foundation for all my work - and my agency produces new websites for our clients every day - I just wish they showed as much dedication to my counts as I do.