I am trying to do the same thing and it wont work.
 
When adding my js file to the src/assets/js folder, I still get an error saying that my variable is not defined.
I tried adding the path to config.yml
I dont see a place to add it to the gulpfile.babel.js
 
Any advice is appreciated!

Anyone else having an issue with data-animate as shown in the Foundation Docs?

Hi Brett, sorry for the delay. I will put a codepen up shortly. In the mean time here is the code snippet Im talking about.
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="none">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Page Nav</div>
</div>
<div class="page-links row expanded" id="main-menu">
<div class="link-row">
<a href="#example" class="link">Example</a>
<a href="#example" class="link">Example</a>
<a href="#example" class="link">Example</a>
<a href="#example" class="link">Example</a>
</div>
</div>
In this example, the '#main-menu' id toggles 'display: none' to 'display: flex' by clicking on the '.menu-icon'.
The issue is that it is very jumpy and I would like to make it smoother. I think Jquery would be the only way to add a transition to a display property, but I am unsure of how to do that.

I agree. The documentation for the Javascript/jquery would be more helpful if it went into more depth (for non pros like me :)
I am trying to add some jquery to a page and cant get it to be even processed. I think its bc it is loading before app.js, which is at the bottom of the body, where the default.html template has it. More resources on the site would go a long way.

In the example above, class="index-contain" [parent] has display: flexbox applied. I tried adding justify-content: center to the parent as well and there is no change in class="index-button" title [child], and it doesn't center.
Am I missing something?
Thank you!

I just posted about this and then seen this thread.
I am using Foundation 6 Zurb Template with the flexgrid.
I have created icons with text centered below. Looks great on all browsers but on IE 11 the text aligns to the left and there is a large bottom margin below the icon image.
 
<div class="row small-up-4 medium-up-5 large-up-6 align-center">

<!-- Item 1 -->
<div class="index-col columns">
<div class="index-contain">
<a href="#">
<img class="index-icon" src="assets/img/img.png">
</a>
<a href="#" class="index-button">Title</a>
</div>
</div>
<!-- Item 2 -->
<div class="index-col columns">
<div class="index-contain">
<a href="#">
<img class="index-icon" src="assets/img/img.png">
</a>
<a href="#" class="index-button">Title</a>
</div>
</div>
<!-- Ect. 12 Items Total -->
</div>

Any IE11 hacks to get the text to align center?
Thank you!!

I am thinking of giving the employees access to the dist folder and they can click on index.html to use the site but, like I said, it isnt very elegant or my ideal solution.

Hey Rafi,
So that it can be sent as a contained package to employees on a needed basis. The person would open the pdf and navigate through the info like the website. Tried Acrobat, it does ok but it cant process flexbox properly and changes the site as well as a few other glitches.
The other idea I had was giving them assess to the dist folder. I dont know of a way to do this elegantly for the user as the site will never have a url and is a project stored on a drive. I would like for them to click and icon and the site would open (if pdf wont work). Open to any suggestions you may have. 
Thank you!

Thanks Ryan, this works on the flex grid as well?

Thanks for the link Rafi!
I am making an educational resource that basically organizes large amounts of info (text, images, videos). All the working files will be saved on a ipad (at least that is the solution at this point). But I am looking at ways to make it appear native and respond faster without the load time delay. Having it work exactly like an app, with its own icon and such would be ideal.
I am just getting into this hybrid app stuff, so still some things to learn.
Many thanks