Menu icon Foundation
Foundation 5 javascript files. Let's finally make it clear!

Javascript file structure in foundation 5 is VERY confusing to me.

First of all according to docs you have to include:

head
-------modernizr.js
body
-------jquery.js
-------fastclick.js
-------foundation.js

That is clear!

So I am downloading the F5 from the download page, opening the index and what I see is that there is NO fastclick included in the body.

In this post --- http://foundation.zurb.com/forum/posts/926-javascript-setup---which-vendor-files --- Jordan Humphreys says that we actually do not need fastclick...
Then Elliot Mitchum said that:
It looks like all you have to do is include the fastclick.js file.
foundation.js actually looks to see if fastclick is defined. If it is, it get initiated...

Funny)

And that in not the end. We hgave more files out there in the vendor folder wich are not covered in the docs, they are just laying there like dead bodies:
jquery.cookie.js
placeholder.js

I want to say that I realy love Foundation, but all mentioned confusions are are jus not ok at all.

Finally, lets make everything clear !!!

javascriptFoundation 5confusions

Javascript file structure in foundation 5 is VERY confusing to me.

First of all according to docs you have to include:

head
-------modernizr.js
body
-------jquery.js
-------fastclick.js
-------foundation.js

That is clear!

So I am downloading the F5 from the download page, opening the index and what I see is that there is NO fastclick included in the body.

In this post --- http://foundation.zurb.com/forum/posts/926-javascript-setup---which-vendor-files --- Jordan Humphreys says that we actually do not need fastclick...
Then Elliot Mitchum said that:
It looks like all you have to do is include the fastclick.js file.
foundation.js actually looks to see if fastclick is defined. If it is, it get initiated...

Funny)

And that in not the end. We hgave more files out there in the vendor folder wich are not covered in the docs, they are just laying there like dead bodies:
jquery.cookie.js
placeholder.js

I want to say that I realy love Foundation, but all mentioned confusions are are jus not ok at all.

Finally, lets make everything clear !!!

Karl Ward over 5 years ago

Yes it is a bit confusing, but let me clear it up: fastclick.js is already included inside foundation.min.js. This is basically what you need:

head
-------modernizr.js
body
-------jquery.js
-------foundation.js

Modernizr and jQuery are the only libraries you need to add in addition to the main foundation js. Personally, I load modernizr.js in the head, because it should be loaded before any other scripts, and then I use the modernizr load function to load the other scripts non-blocking at the end of body tag:

 window._gaq = [['_setAccount','UA-747161-8'],['_trackPageview'],['_trackPageLoadTime']];
  Modernizr.load([
  {
    test: Modernizr.hsla,
    yep : ['//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'],
    nope: ['//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'],
    load: ['/js/app.min.js?1404232025'],
    complete : function () {
      $(document).foundation();
    }  
  },
  {
    load: [('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js']
  }