Menu icon Foundation

My Posts


My Comments

Kevin Gerz commented on Jon B's post over 3 years

With Foundation 6.2 they updated their jquery dependencies to version ~2.2.0 (which means any version 2.2.*, where * means a bugfix version). Because motion-ui depends on jquery ~2.1.4 (so 2.1.*), jquery could possible changed something, that would break, if both plugins depends on the specific feature.

But there is a really, really simple fix. Open your bower.json file and look for the section "dependencies". You will find something like this:

 "dependencies": {
    "foundation-sites": "~6.2.0",
    "motion-ui": "~1.1.1"
}

Simply update motion-ui, so change the line to:

 "dependencies": {
    "foundation-sites": "~6.2.0",
    "motion-ui": "~1.2.2"
}

Now just run "bower update" and everything should be fixed (because motion-ui 1.2.2 depends on jquery ~2.2.0 as well)

Kevin Gerz commented on Kevin Gerz's post over 3 years

Okay.. Okay.. installed a new site-project. First things -> Foundation-CLI didn't really worked in this process (don't know..). Installed it manually by cloning the repo, etc.

Copied the EXACT same files from my main project to the test project, just to see what happens. Result: It works?! Why.. what the heck .. I.. don't.. yes.. of course.. meh..

I have absolutly no clue why it works now, but I will take a closer look into the thing, by comparing every file in the root folder. Maybe I did something wrong, when I upgraded the template. If so, I will post a reply later on.

Thanks for your help :), but if it's tedious to create a new project everytime.. >.>

Kevin Gerz commented on Kevin Gerz's post over 3 years

Don't think it's because of WhatInput V2, because I'm currently running V1.1.4 (as Foundations bower.json recommend)

I didn't create a new project, but will do this asap. The CLI I already reinstalled. s:

I'll create a new project, and test it out, maybe sth. messed up, but then the upgrade guide is not working as good as it seems..

I give a reply, when I checked everything, with creating a new project.

Kevin Gerz commented on Kevin Gerz's post over 3 years

Actually, no it doesn't work with changing the markup (tested it). The error is still the same "TypeError: root is undefined..".

I also changed data-margin-top and data-margin-btm back to data-options, because it's more convenient.
Also, i don't think it's caused by my markup, since nav and div are actually (sementic) containers, which shouldn't matter, if using the data-*-elements the right way.

That's why I'm confused. It should work. And in Foundation 6.0.2 it actually WORKED. I still believe it's because of WhatInput, but I still have no idea what to to about it. Or maybe it's a thing, when compressing the files/plugins (I use foundation-zurb-templates gulp files)? I have no real clue..

But thanks for the reply so far. :)

Kevin Gerz commented on Jon B's post over 3 years

Yes, I actually know what you mean. With Foundation 6 I had my first "contact" to .. everything! Gulp, Bower, Sass, Node (NPM), Grunt (because of Gulp-Comparison).. this is not even a final list.

I created over dozen projects, with different configurations, edited the gulp file to learn more and more and understand only half of it's awesomes.

You downloaded the foundation project, so not actually something you have to deal with. It's the frontend project, with all of foundation's core features.
To create a "fresh" project, you need to take a look at "foundation-zurb-template" or "foundation-sites-template" (just look through zurbs github repo).

To upgrade, I can only give you the foundation-cli way, but maybe it will help:
After changing the version of Foundation in the bower.json file to 6.2.0, you need to run bower update, to update foundation in the folder "bower_components" (or something else, if you renamed it). Now, you have updated to Foundation 6.2. You can check this, by going to bower_components/foundation-sites/bower.json. The version described, should be 6.2.0.
The next step you need to do, is to update your project (propably the problem). What I did, was following the Upgrade Guide (as the person in the post above described). Then I downloaded the foundation-sites-template and replaced my gulp files with all of them (removed my gulpfile.js and copied the gulpfile.babel.js into the root-folder, as well as copied the new config.yml file into the root-folder). That's actually it. After that, I did run "foundation watch" in the cli and everything works as expected (mostly).

Just to give you a little overview to Bower, Gulp and NPM ->

NPM (from Node) and Bower managing Front- and Backend Components. While Bower gives you the ability to install frontend-components (like JQuery or angular), NPM is used to install backend-components (gulp, grunt, babel,...). Dependencies Problems are resolved by this. For example: In your bower.json file, foundation is listed under dependencies. What this means is, that your project depends on foundation. Bower installs foundation and looks into foundations bower file. Jquery or WhatInput are listed there, so bower will install jquery and whatInput-Js automatically, because foundation depends on those plugins.

Gulp is a taskrunner. It basically allows you to create tasks and execute them. With foundation-cli, running "foundation watch" triggers the watch-task, defined in the gulpfile. Those executes other task like "javascript" or "copy", which are defined in the gulpfile as well. Those tasks to something like minifying your javascript or run the sass-compiler.

Hopefully this helps a little bit. Since I'm a beginner, too, not everything needs to be correct, so anyone feel free to correct me.
I'm sorry that I couldn't help you with Yeti, but I want to say, that it's definitly worth it, looking deeper into everything, because foundation is really awesome. :)

Posts Followed

  • 7
    Replies
  • Bamboozled

    By Jon B

    6.2.0

    Hi there, I am pretty much a complete beginner to all this Foundation 6 stuff and bower and gulp and npm (and the list goes on). I am struggling away with trying to understand everything but there seems to be so many ways to do things with such large a... (continued)

    Last Reply by craig bane over 3 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Jon B's post over 3 years

With Foundation 6.2 they updated their jquery dependencies to version ~2.2.0 (which means any version 2.2.*, where * means a bugfix version). Because motion-ui depends on jquery ~2.1.4 (so 2.1.*), jquery could possible changed something, that would break, if both plugins depends on the specific feature.

But there is a really, really simple fix. Open your bower.json file and look for the section "dependencies". You will find something like this:

 "dependencies": {
    "foundation-sites": "~6.2.0",
    "motion-ui": "~1.1.1"
}

Simply update motion-ui, so change the line to:

 "dependencies": {
    "foundation-sites": "~6.2.0",
    "motion-ui": "~1.2.2"
}

Now just run "bower update" and everything should be fixed (because motion-ui 1.2.2 depends on jquery ~2.2.0 as well)

You commented on Kevin Gerz's post over 3 years

Okay.. Okay.. installed a new site-project. First things -> Foundation-CLI didn't really worked in this process (don't know..). Installed it manually by cloning the repo, etc.

Copied the EXACT same files from my main project to the test project, just to see what happens. Result: It works?! Why.. what the heck .. I.. don't.. yes.. of course.. meh..

I have absolutly no clue why it works now, but I will take a closer look into the thing, by comparing every file in the root folder. Maybe I did something wrong, when I upgraded the template. If so, I will post a reply later on.

Thanks for your help :), but if it's tedious to create a new project everytime.. >.>

You commented on Kevin Gerz's post over 3 years

Don't think it's because of WhatInput V2, because I'm currently running V1.1.4 (as Foundations bower.json recommend)

I didn't create a new project, but will do this asap. The CLI I already reinstalled. s:

I'll create a new project, and test it out, maybe sth. messed up, but then the upgrade guide is not working as good as it seems..

I give a reply, when I checked everything, with creating a new project.

You commented on Kevin Gerz's post over 3 years

Actually, no it doesn't work with changing the markup (tested it). The error is still the same "TypeError: root is undefined..".

I also changed data-margin-top and data-margin-btm back to data-options, because it's more convenient.
Also, i don't think it's caused by my markup, since nav and div are actually (sementic) containers, which shouldn't matter, if using the data-*-elements the right way.

That's why I'm confused. It should work. And in Foundation 6.0.2 it actually WORKED. I still believe it's because of WhatInput, but I still have no idea what to to about it. Or maybe it's a thing, when compressing the files/plugins (I use foundation-zurb-templates gulp files)? I have no real clue..

But thanks for the reply so far. :)

You commented on Jon B's post over 3 years

Yes, I actually know what you mean. With Foundation 6 I had my first "contact" to .. everything! Gulp, Bower, Sass, Node (NPM), Grunt (because of Gulp-Comparison).. this is not even a final list.

I created over dozen projects, with different configurations, edited the gulp file to learn more and more and understand only half of it's awesomes.

You downloaded the foundation project, so not actually something you have to deal with. It's the frontend project, with all of foundation's core features.
To create a "fresh" project, you need to take a look at "foundation-zurb-template" or "foundation-sites-template" (just look through zurbs github repo).

To upgrade, I can only give you the foundation-cli way, but maybe it will help:
After changing the version of Foundation in the bower.json file to 6.2.0, you need to run bower update, to update foundation in the folder "bower_components" (or something else, if you renamed it). Now, you have updated to Foundation 6.2. You can check this, by going to bower_components/foundation-sites/bower.json. The version described, should be 6.2.0.
The next step you need to do, is to update your project (propably the problem). What I did, was following the Upgrade Guide (as the person in the post above described). Then I downloaded the foundation-sites-template and replaced my gulp files with all of them (removed my gulpfile.js and copied the gulpfile.babel.js into the root-folder, as well as copied the new config.yml file into the root-folder). That's actually it. After that, I did run "foundation watch" in the cli and everything works as expected (mostly).

Just to give you a little overview to Bower, Gulp and NPM ->

NPM (from Node) and Bower managing Front- and Backend Components. While Bower gives you the ability to install frontend-components (like JQuery or angular), NPM is used to install backend-components (gulp, grunt, babel,...). Dependencies Problems are resolved by this. For example: In your bower.json file, foundation is listed under dependencies. What this means is, that your project depends on foundation. Bower installs foundation and looks into foundations bower file. Jquery or WhatInput are listed there, so bower will install jquery and whatInput-Js automatically, because foundation depends on those plugins.

Gulp is a taskrunner. It basically allows you to create tasks and execute them. With foundation-cli, running "foundation watch" triggers the watch-task, defined in the gulpfile. Those executes other task like "javascript" or "copy", which are defined in the gulpfile as well. Those tasks to something like minifying your javascript or run the sass-compiler.

Hopefully this helps a little bit. Since I'm a beginner, too, not everything needs to be correct, so anyone feel free to correct me.
I'm sorry that I couldn't help you with Yeti, but I want to say, that it's definitly worth it, looking deeper into everything, because foundation is really awesome. :)

Posts Followed


Following

  • No Content

Followers

  • No Content