Upgrade to Foundation 6.4.0?

[huphtur]

Upgrading to Foundation 6.4.0 seems to break a few things. Anyone have any idea why?

[core77]

@huphtur Can you provide more information about what's happening?

[huphtur]

here's what I did:

• git cloned this repo
• Upgraded to latest foundation: bower install foundation-sites --save
• Updated config.yml with couple new js files (all uncommented for testing the kitchen sink page).
• Not sure how to handle _foundation.scss as Zurb has some fancy if statements in theirs. So I just included the entire list for now.
• Also updated the kitchen sink with the latest markup.

After running npm start, the kitchen sink page loads with the correct styling but non of the javascript seems to work.

[core77]

Do you want to push your branch as a PR?

[core77]

Check the 'no bower' branch here: https://github.com/kculmback/jekyll-foundation

Perhaps @kculmback wants to open a PR when Foundation 6.4 is running fine? Dropping bower and mange all the assets with npm or yarn sounds interesting.

[kculmback]

Yeah I can definitely do that. It seems to be working fine right now but later this week I'll do a more in-depth check to make sure I have the scss/js set up correctly. I think the problem with upgrading to 6.4 with the master branch right now is just that Foundation has some new scss/js files and have changed the name of a couple files.

…

On Sun, Jul 2, 2017 at 7:53 AM, Chris ***@***.***> wrote: Check the 'no bower' branch here: https://github.com/kculmback/ jekyll-foundation Perhaps @kculmback <https://github.com/kculmback> wants to open a PR when Foundation 6.4 is running fine? Dropping bower and mange all the assets with npm or yarn sounds interesting. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/core77/jekyll-foundation/issues/50#issuecomment-312496555>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMnVAmIlmvNX8Z8HiWxyHsacOKIiEJ-5ks5sJ68BgaJpZM4OIkVW> .

[kculmback]

Alright so I got the SCSS working fine. However, I'm running into an issue with Foundation's javascript. It is included in the all.js file, however none of it works.

I get this error in the console:
Uncaught SyntaxError: Unexpected token import
Which refers to:
import $ from 'jquery';

I can get rid of the error by adding a .babelrc file with the following code:
{ "presets": ["es2015"] }
However this produces a new error:
Uncaught ReferenceError: exports is not defined at foundation.core.js:1

I'll keep messing with it, but I'm a little out of my element with this one. Babel/ES2016 and Gulp are weaker areas of mine. So if you have any suggestions, I would be open to them!

[kculmback]

Alright so I got the javascript to work. Foundation includes transpiled js files in their dist folder, so I switched to using those instead.

I'll do a few more checks and clean up the code and then make a pull request when I'm finished.

It may be worth in the future though working to properly implement Babel & ES2016, as that seems to be the sticking point. It looks like the Foundation 6.4 template uses the gulp plugins webpack and webpack-stream in their gulp file alongside babel. Doing the same thing here may be a good place to start. I'll try it out sometime in the future and see if I can get it to work!

[huphtur]

@kculmback tested your no-bower branch on my local machine, all seems to work good. Nice work. Agreed on a Babel setup.

[core77]

Good job @kculmback ! Thank you very much.

When running npm starti get an error:
Error: Cannot find module 'npmlog'
Can you guys confirm this?

yarn start and yarn build are running well.
Can you confirm this, too?

[kculmback]

@core77 I wasn't able to reproduce the error on my local machine.

Steps I took:

1. Delete jekyll-foundation folder
2. Clone core77/jekyll-foundation to local machine
3. Run bundle install
4. Run yarn
5. Run yarn start
6. Run yarn build
7. Run npm start

Everything seemed to be working fine. I also tried:

1. Delete jekyll-foundation folder
2. Clone core77/jekyll-foundation to local machine
3. Run bundle install
4. Run npm install
5. Run npm start
6. Run yarn start
7. Run yarn build

Everything worked fine then as well. A cursory Google search makes it seem like the error is related to the global installation of npm and not the local usage in project. It may be worth updating your version of npm?

[huphtur]

Everything working fine on my machine as well (had no idea one could also use yarn command to start/build!)

[kculmback]

Alright, so I got it set up so that Foundation works without having to use their already transpiled files.

I set it up so that it very closely follows how Foundation does it, which is using the webpack gulp plugin. You can check it out here.

I'm pretty new to Webpack, so I'm not sure how using this method going forward would affect future users of this repo, especially if they want to include other js libraries that aren't optimized for webpack like Foundation.

Let me know your thoughts!

[huphtur]

Tested it (even picking custom JS components) and all seems to work.

Since flexmode seems to be turned on by default $global-flexbox: true; probably best to include the appropriate components in _foundation.scss?

// @include foundation-grid;
@include foundation-flex-grid;
@include foundation-flex-classes;

How are you handling Normalize and Sassy-Lists??

That's all the comments I have so far @kculmback, will test some more after the weekend.

[kculmback]

@huphtur I don't believe we need to import Normalize/Sassy-Lists manually. They're not referenced in the documentation at all.

And that's a good point about the grids! I've updated the comments on my version and will make a pull request.

[core77]

Since I updated node to 6.11.x npm startand npm run buildare running well again...

[core77]

I think we're done with this topic... When you agree, you can close the issue.

Thanks again Kasey for your efforts!

@huphtur @kculmback Or are there some TODOs left?

[kculmback]

@core77 I think we're pretty much good to go. The only topic that is left is whether it would be worth it to switch to using the webpack gulp plugin, which I was able to get working. However, that could be it's own issue separate from this one.

[huphtur]

@core77 Did some more testing and found an odd behavior.

Responsive Accordion Tabs only seems to work on the Kitchen Sink page. When I try it on the Sample page it ONLY works when I add<div data-off-canvas></div> to the page. Any idea what's going on here?

Bonus: it works fine on your babel branch!

[kculmback]

@huphtur I was able to replicate the issue. I'll take a look into this in the next few days.

Also, for organization, to close this issue and open a new with regards to the responsive accordion and tabs, as well as any future 6.4 issues!

[huphtur]

@kculmback how's the webpacking going? You confident enough to switch over? I tested your webpack branch locally and couldn't really find any issues.

(Sorry for sudden influx of activity, I'm in between projects and figured I spend some time closing couple of the tickets and move the project forward 😉)

[kculmback]

@huphtur Honestly it's been awhile since I've looked at it! Let me double check it sometime over the next couple days, and I'll make a pull request if it looks alright