Browse with Zurb Foundation Framework
POST-SOLUTION IMAGE
Here's a Yeoman generator building the project with Foundation and Browserify: https://github.com/dougmacklin/generator-foundation-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');
$(document).foundation();
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">×</a>
</div>
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
With base 6 and recent jquery ("^ 2.1.0") trimming is no longer required. You can just use
global.$ = global.jQuery = require('jquery');
require('what-input');
require('foundation-sites');
$(document).foundation();
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 .
source to share
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": [
"browserify-shim"
]
}
Then I can just require creation as usual var foundation = require('foundation');
after the jQuery requirement and use it to initialize the document.
source to share