Menu icon Foundation
How to selectively use JS from SCSS install

Hi,

I've been using Bootstrap for years but thought I'd try Foundation 6 to see if it suits my needs. So far I'm very impressed by what I've seen, thank you.

I've installed Foundation 6 using the command line and have been looking through the files and reading the online Docs about implementing the JS scripts but I'm having trouble marrying what's written in the Docs and what I see in my installed files.

I'm looking to go down the route of selecting JS files to use rather than bundling everything together but I a few questions:

1) Is 'foundation,js' the same as 'foundation.core.js'?
2) Where is 'foundation.util.mediaQuery.js' in my installed files?
3) What is 'what-input.js' and do I need it?

So, as an example, can you please tell me which files I required from my SCSS installed files if I only wanted to use the JS of the off canvas funtion?

Finally, I'm I right in thinking that I copy whatever files I need from the 'bower_components' directory into my 'js' directory in the root and change the paths in the html file.

Hope this all makes sense!

Thanks.

    <!--Code included in index.html via SCSS install-->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/what-input/what-input.js"></script>
    <script src="bower_components/foundation-sites/dist/foundation.js"></script>




    <!--2 example codes from the online Docs-->
    <script src="js/jquery.min.js"></script>
    <script src="js/foundation.min.js"></script>
    <script src="js/foundation.util.mediaQuery.js"></script>
    
    
    <script src="js/jquery.min.js"></script>
    <script src="js/foundation.core.js"></script>
    <script src="js/foundation.tabs.js"></script>
    <script src="js/foundation.accordion.js"></script>
    
            

         

js

Hi,

I've been using Bootstrap for years but thought I'd try Foundation 6 to see if it suits my needs. So far I'm very impressed by what I've seen, thank you.

I've installed Foundation 6 using the command line and have been looking through the files and reading the online Docs about implementing the JS scripts but I'm having trouble marrying what's written in the Docs and what I see in my installed files.

I'm looking to go down the route of selecting JS files to use rather than bundling everything together but I a few questions:

1) Is 'foundation,js' the same as 'foundation.core.js'?
2) Where is 'foundation.util.mediaQuery.js' in my installed files?
3) What is 'what-input.js' and do I need it?

So, as an example, can you please tell me which files I required from my SCSS installed files if I only wanted to use the JS of the off canvas funtion?

Finally, I'm I right in thinking that I copy whatever files I need from the 'bower_components' directory into my 'js' directory in the root and change the paths in the html file.

Hope this all makes sense!

Thanks.

    <!--Code included in index.html via SCSS install-->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/what-input/what-input.js"></script>
    <script src="bower_components/foundation-sites/dist/foundation.js"></script>




    <!--2 example codes from the online Docs-->
    <script src="js/jquery.min.js"></script>
    <script src="js/foundation.min.js"></script>
    <script src="js/foundation.util.mediaQuery.js"></script>
    
    
    <script src="js/jquery.min.js"></script>
    <script src="js/foundation.core.js"></script>
    <script src="js/foundation.tabs.js"></script>
    <script src="js/foundation.accordion.js"></script>
    
            

         
Paul Hollyer over 3 years ago

Hi Henckels,

AFAIK:

1) foundation.js and foundation.core.js are not the same. foundation.js includes all the foundation libraries, foundation.core.js is the base library all other libraries use.

2) I'm using Foundation Sites, and foundation.util.mediaQuery.js is located in bower_components/foundation-sites/js

3) I wasn't sure about what-input.js, so I googled and found out.

I wasn't sure about the environment set up either (for a nodeJS project), so initially, i copied the JS files my own JS folder, but then decided to follow the example index.html and just reference what I need in the bower_components/foundation-sites folder.

HTH

Paul

Henckels over 3 years ago

Paul,

Thanks for the reply, things are starting to make more sense now. I've googled 'what-input.js' and have a better understanding of it but I'm still unsure as to what 'foundation.util.mediaQuery.js' does and if/when I should use it. The Docs say that they are helper functions for media queries but what do they actually do? I thought media queries were handled in the css.

Henckels.

Paul Hollyer over 3 years ago

Media queries are handled in the CSS, the JS file provides a set of helper functions. If you check the MediaQuery docs, you'll see, towards the bottom, that they are discussed there.

There's a lot of useful stuff in the docs ;)

Regards

Paul