@Ryan Patterson, I tried implementing your method and adding the "$" variable for jQuery, after I do that i get "jQuery" is not difined, the only work around i got was to place jquery as a CDN link in the header, to call it off an external server.
Defiantly not a way the way would move forward into production, just wish there was more in explaining on how to use GULP or web pack setup of foundations

RUN : foundation new
 
-- > A website (Foundation for Sites)
-- > ZURB Template: includes Handlebars templates and Sass/JS compilers 
 
After the intial setup is all there.
 
Then I create a new custom-scripts.js file is /src/assets/js/lib/custom-scripts.js
 
Then i add this to my app.js file  import './lib/custom-scripts';
 
The scripts in the custom-scripts.js file contain some custom jQuery that I created.
 
 
$(document).on('ready', function () {
 
    $(".cs-select").each(function() {
        var classes = $(this).attr("class"),
            id      = $(this).attr("id"),
            name    = $(this).attr("name");
        var template =  '<div class="' + classes + '">';
        template += '<span class="cs-select-trigger">' + $(this).attr("placeholder") + '</span>';
        template += '<div class="cs-options">';
        $(this).find("option").each(function() {
            template += '<span class="cs-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
        });
        template += '</div></div>';
 
        $(this).wrap('<div class="cs-select-wrapper"></div>');
        $(this).hide();
        $(this).after(template);
    });
    $(".cs-option:first-of-type").hover(function() {
        $(this).parents(".cs-options").addClass("option-hover");
    }, function() {
        $(this).parents(".cs-options").removeClass("option-hover");
    });
    $(".cs-select-trigger").on("click", function() {
        $('html').one('click',function() {
            $(".cs-select").removeClass("opened");
        });
        $(this).parents(".cs-select").toggleClass("opened");
        event.stopPropagation();
    });
    $(".cs-option").on("click", function() {
        $(this).parents(".cs-select-wrapper").find("select").val($(this).data("value"));
        $(this).parents(".cs-options").find(".cs-option").removeClass("selection");
        $(this).addClass("selection");
        $(this).parents(".cs-select").removeClass("opened");
        $(this).parents(".cs-select").find(".cs-select-trigger").text($(this).text());
    });
});
 
 
That I want to import into my main  JS file
 
but i keep on getting $ not defined
 

But how do you get Jquery to be loaded, i thought its included in the Foundation already, maybe its due to the variable changing 
import $ from 'jquery';import whatInput from 'what-input';window.$ = $;

Also stuck on this, anyone find a solution it out yet?
 

Im also getting this error
 
app.js:22248 Uncaught ReferenceError: $ is not defined
    at Object.<anonymous> (app.js:22248)
    at webpack_require (app.js:20)
    at Object.defineProperty.value (app.js:14485)
    at webpack_require (app.js:20)
    at Object.<anonymous> (app.js:22290)
    at webpack_require (app.js:20)
    at typeof (app.js:66)
    at app.js:69
(anonymous) @ app.js:22248
webpack_require_ @ app.js:20
Object.defineProperty.value @ app.js:14485
webpack_require @ app.js:20
(anonymous) @ app.js:22290
webpack_require @ app.js:20
_typeof @ app.js:66
(anonymous) @ app.js:69

Thank you Rafi,
I got all of that, but my question relates more to where do you add the slick.js file, do you have to add it manually in the page template or could one call the node_module to be loaded all in one js file as iIdon't want to have lots of http requests in the header or closing body tag.
 
just like all the scss files are imported to one minified css file 
 
 

Hi there did you get the slick carousel working with bower
 

Hey guys, did you get to do this eventually would love to see how you got it working with block grid 
 

Awesome, thanks man

test