Menu icon Foundation
F6 template - javascript doesn't initialise on build

Hi everyone,

This might be a dumb question but I was playing around with the new Zurb template:
https://github.com/zurb/foundation-zurb-template/archive/master.zip

Everything is fine on testing, but the javascript is not working/being called on the build files in 'dist'.

So for example - I copied the dropdown menu code to index.html

<ul class="dropdown menu" data-dropdown-menu>
  <li>
    <a href="#">Item 1</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>
            

         

Ran 'npm start' - can see the dropdown working, dropdown displays when I hover over.

Ran 'npm run build', viewed the index.html in dist but the dropdown is no longer a hidden. It just displays as another block item under the first 'li'. Same with reveal modals and any other js activated item.

I've also added

$(document).foundation();

            

         

in the assets>js>app.js file, to make sure it was being called.

This is just on the default template with no other changes.

What am I missing?

clifoundation 6sitesjavascriptbuild

Hi everyone,

This might be a dumb question but I was playing around with the new Zurb template:
https://github.com/zurb/foundation-zurb-template/archive/master.zip

Everything is fine on testing, but the javascript is not working/being called on the build files in 'dist'.

So for example - I copied the dropdown menu code to index.html

<ul class="dropdown menu" data-dropdown-menu>
  <li>
    <a href="#">Item 1</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>
            

         

Ran 'npm start' - can see the dropdown working, dropdown displays when I hover over.

Ran 'npm run build', viewed the index.html in dist but the dropdown is no longer a hidden. It just displays as another block item under the first 'li'. Same with reveal modals and any other js activated item.

I've also added

$(document).foundation();

            

         

in the assets>js>app.js file, to make sure it was being called.

This is just on the default template with no other changes.

What am I missing?

Rafi Benkual over 3 years ago

I think the npm run build adds the production flag and is running un-css. Are you done coding and ready to upload the site?

We are seeing that un-css is removing some classes and there is a milestone for auditing those classes: https://github.com/zurb/foundation-sites/issues/7909

michael wu over 3 years ago

Hi Rafi, sorry for the late reply.

The site is still being worked on but the current dev versions will be uploaded to a file server to be viewed by others.

Thanks for that, I've commented out the un-css pipe in the gulpfile for now and it seems to be working and is fine for testing.