You can scroll to the end if you just want the quick fix because it is simple, but I figured I should explain the problem and how I ended up finding it.
So a little background, I was really struggling to learn Foundation because I couldn't seem to get anything to work. I even copy and pasted the example code from their documentation into the starter template, and that still wouldn't work. I assumed the code sample was just broken and I had to figure it out on my own, it was discouraging.
I've programmed in low level languages for years and it was time to learn something new, and I felt bad that I couldn't get anything to work.
I tried to get an Off-canvas component working and could not. I copied and pasted the examples into the starter template after I couldn't get it to work, and the example didn't run in my browser. I assumed I did something wrong.
I found exactly which links were needed and looked at the names. I looked in my own folders to see if maybe I was linking to an improper file.
I looked back at the scripts in the starter template.
<script src="js/vendor/jquery.min.js"></script> <script src="js/vendor/what-input.min.js"></script> <script src="js/foundation.min.js"></script>
These are the linked files, I look in my js folder for foundation.min.js
That file doesn't exist there. All that exists there is app.js and the folder vendor.
I fixed these paths and everything instantly worked beautifully.
I submitted a pull request for that starter template page and it has been merged. That page should be updated soon as far as I know. I also heard that the min versions of these libraries should also come in the complete download soon.
Though I'm not sure if these changes will take place soon or at all, I just know that the pull request had been merged on github.
So what do you need to do to your code to fix this if it isn't working?
Well to get your code samples running we need to link the correct locations, for me this did the trick.
<script src="js/vendor/jquery.js"></script> <script src="js/vendor/what-input.js"></script> <script src="js/vendor/foundation.min.js"></script> <script> $(document).foundation(); </script>
A final note, you may ask, why is this like this, why is it linking incorrectly on the starter template?
I believe that this is a Foundation 5 issue, and since the switch to Foundation 6 this template hadn't been updated. In Foundation 5 I had heard that the files fit with this structure. Which makes sense.
I probably should have seen this sooner, it's my fault for missing it but I'm sure other people are also having this problem when just starting out.
Since fixing the paths I have thoroughly enjoyed my experience with Foundation, and hope to use it and help it grow for a long time.