Browse with Zurb Foundation Framework


Here's a Yeoman generator building the project with Foundation and Browserify:

I am trying to figure out how to properly link the js frame framework with browserify .

In my project folder, I installed it along with jQuery (what it depends on):

npm install jquery foundation-sites --save


Then in mine main.js

I have the following:

var $ = jQuery = require('jquery');
var foundation = require('foundation-sites');


I include $ = jQuery = ...

because if i don't get the error jQuery is not defined


Js components not working. For example, alert elements cannot be closed correctly.

<div data-alert class="alert-box">
    <!-- close functionality not working -->
    <a href="#" class="close">&times;</a>


If it helps, here plunkr , which includes mine index.html

, main.js

, bundle.js

, package.json

and gulpfile.js


I am still peeing my feet with the browser, should I be using browserify-shim for this, or am I doing something else wrong?


source to share

2 answers

With base 6 and recent jquery ("^ 2.1.0") trimming is no longer required. You can just use

global.$ = global.jQuery = require('jquery');


in your file main.js

. Note that setting both $

and jQuery

globally (i.e. attaching them to a window object) is required as base 6 for one reason or another that relies on global jQuery (instead of using require


Note also that the mechanism has alert

been dropped in Foundation 6 if you want to see a working example instead of the closing warning add-in .



I believe you need to loop through the library. I am currently doing this in my project and it is working correctly. I'm using conversation to manage the foundation, but it should be similar for npm. The relevant setting in my .json package is this:

"browser": {
  "jquery": "./src/bower_components/jquery/dist/jquery.min.js",
  "foundation": "./src/bower_components/foundation/js/foundation.js"
"browserify-shim": {
  "jquery": "$",
  "foundation": "foundation"
"browserify": {
  "transform": [


Then I can just require creation as usual var foundation = require('foundation');

after the jQuery requirement and use it to initialize the document.



All Articles