Foundation Setup

The purpose of this guide is to describe how to download the latest version of Foundation and integrate it with the ENLBase project. Adjust pathing as necessary for other projects.

Installing Foundation

Use npm to get a copy of the latest version of Foundation locally. Must have Node + npm installed, and be in your project directory which has a package.json file created.

1. Execute npm install foundation-sites to download all of the Foundation Sites files. npm will create a foundation-sites folder in the node_modules folder in the root of your project.
   • If you use a version newer than 6.1, you will need to add support to transpile ES6 JavaScript to ES5. To pull the last version before transpilation was necessary, do npm install foundation-sites@6.1

Include the SCSS

1. Create a foundation folder in the css/scss/vendors folder

2. Copy the SCSS folder from node_modules/foundation-sites to the css/scss/vendors/foundation folder

3. Copy the either foundation.scss or foundation-flex.scssfromnode_modules/foundation-sites/assetsto thecss/scss/vendors/foundationfolder, depending on which version of the grid is desired, and rename to_foundation-base.scss`

4. Edit _foundation-base.scss to include the settings file before Foundation is included - @import './scss/settings/settings';

5. Edit ./scss/settings/_settings.scss to fix the pathing for the line @import 'utils\utils'; to be @import '..\utils\utils'; - on or around line 42

6. Edit (or create if it doesn't exist) the _vendors.scss file in the css/scss/vendors folder, and add a reference to foundation-base

    // Foundation
    @import './foundation/foundation-base';
    @include foundation-everything($flex: true);
   

Include the JS (optional)

1. Create a foundation folder in the js/vendors folder

2. Copy all of the individual Foundation JavaScript files from node_modules/foundation-sites/js to js/vendors/foundation

3. In the Gulpfile, add or update the 'vendor' path array to include the specific Foundation JavaScript files required. Update the Gulp task to ensure the vendor JavaScript file includes the requested Foundation files. Note: Each module contains a comments with it's requirements, ensure all requirements are included before each module. Example:

    var siteScripts = {
        'vendor': [
            paths.scripts.src + 'vendors/foundation/foundation.core.js',
            paths.scripts.src + 'vendors/foundation/foundation.util.box.js',  // dropdown
            paths.scripts.src + 'vendors/foundation/foundation.util.keyboard.js',  // accordion, dropdown, tabs
            paths.scripts.src + 'vendors/foundation/foundation.util.mediaQuery.js', // interchange
            paths.scripts.src + 'vendors/foundation/foundation.util.motion.js', // accordion, 
            paths.scripts.src + 'vendors/foundation/foundation.util.timerAndImageLoader.js', // interchange, tabs
            paths.scripts.src + 'vendors/foundation/foundation.accordion.js',
            paths.scripts.src + 'vendors/foundation/foundation.dropdown.js',
            paths.scripts.src + 'vendors/foundation/foundation.interchange.js',
            paths.scripts.src + 'vendors/foundation/foundation.tabs.js'
        ]
    }