Menu icon Foundation
If you are just starting off with Foundation and the code samples don't run, here's the fix.

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 downloaded the CSS Complete version from here, and then used the starter template from here

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 then ran one of the provided templates on the site and an Off-canvas menu worked perfectly, also a responsive top-bar, which on small screens would change the bar contents into a button, worked which I tried and failed at. They all worked, and the code was nearly identical to the code snippets in the documentation. I looked around the code and saw that they were not referencing local links, but online links. The stylesheet referenced a cloudflare link and the javascript at the bottom was sourcing jquery and foundation from online. I pasted these links into my local html and it all worked perfectly.

BUT WHY?

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 click into vendor assuming that foundation.min.js moved there and YES it did, but there was still a problem. We were also referencing jquery.min.js and what-input.min.js in the vendor folder; however, there are no min versions of these in that folder as of the time this is published, so 0 of our 3 javascript references were loading because we were pointing in the wrong spot.

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>

Your file setup may change though, so just make sure these directories are correct to where your files are. This totally makes sense as the components that didn't work all use one of these javascript files.

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.

 

beginnernot workingOff-canvas not workingtop-bar not resizingJust Starting OffJavaScript not working

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 downloaded the CSS Complete version from here, and then used the starter template from here

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 then ran one of the provided templates on the site and an Off-canvas menu worked perfectly, also a responsive top-bar, which on small screens would change the bar contents into a button, worked which I tried and failed at. They all worked, and the code was nearly identical to the code snippets in the documentation. I looked around the code and saw that they were not referencing local links, but online links. The stylesheet referenced a cloudflare link and the javascript at the bottom was sourcing jquery and foundation from online. I pasted these links into my local html and it all worked perfectly.

BUT WHY?

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 click into vendor assuming that foundation.min.js moved there and YES it did, but there was still a problem. We were also referencing jquery.min.js and what-input.min.js in the vendor folder; however, there are no min versions of these in that folder as of the time this is published, so 0 of our 3 javascript references were loading because we were pointing in the wrong spot.

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>

Your file setup may change though, so just make sure these directories are correct to where your files are. This totally makes sense as the components that didn't work all use one of these javascript files.

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.

 

Rafi Benkual over 2 years ago

This is great info! Thanks for sharing and thanks for the PR!