Skip to content

Instantly share code, notes, and snippets.

@cheapsteak
Forked from radiosilence/gist:4040553
Last active December 15, 2015 04:59
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save cheapsteak/5205777 to your computer and use it in GitHub Desktop.
Save cheapsteak/5205777 to your computer and use it in GitHub Desktop.
Zurb Foundation 4 Shim for RequireJS.
/**
* You might want to change baseUrl to something else depending on where your require.js is.
* If you want to do conditional loading of Zepto, take a look at the discussion at
* https://groups.google.com/forum/?fromgroups=#!topic/requirejs/68oIXcyou48
* Had to add explicit paths for each plugin, otherwise `require` tries to look for it in
* /foundation/foundation/foundation.alerts.js
*/
require.config({
baseUrl: "js",
shim: {
jquery: {
exports: 'jQuery'
},
foundation: {
deps: ["jquery"]
},
"foundation.alerts": {
deps: ["foundation"]
},
"foundation.clearing": {
deps: ["foundation"]
},
"foundation.cookie": {
deps: ["foundation"]
},
"foundation.dropdown": {
deps: ["foundation"]
},
"foundation.forms": {
deps: ["foundation"]
},
"foundation.joyride": {
deps: ["foundation"]
},
"foundation.magellan": {
deps: ["foundation"]
},
"foundation.orbit": {
deps: ["foundation"]
},
"foundation.placeholder": {
deps: ["foundation"]
},
"foundation.reveal": {
deps: ["foundation"]
},
"foundation.section": {
deps: ["foundation"]
},
"foundation.tooltips": {
deps: ["foundation"]
},
"foundation.topbar": {
deps: ["foundation"]
}
},
paths: {
jquery: [
"//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
"vendor/jquery-1.9.1.min"
],
foundation: "foundation/foundation",
"foundation.alerts": "foundation/foundation.alerts",
"foundation.clearing": "foundation/foundation.clearing",
"foundation.cookie": "foundation/foundation.cookie",
"foundation.dropdown": "foundation/foundation.dropdown",
"foundation.forms": "foundation/foundation.forms",
"foundation.joyride": "foundation/foundation.joyride",
"foundation.magellan": "foundation/foundation.magellan",
"foundation.orbit": "foundation/foundation.orbit",
"foundation.placeholder": "foundation/foundation.placeholder",
"foundation.topbar": "foundation/foundation.topbar",
"foundation.reveal": "foundation/foundation.reveal",
"foundation.section": "foundation/foundation.section",
"foundation.tooltips": "foundation/foundation.tooltips",
"foundation.topbar": "foundation/foundation.topbar",
}
});
requirejs(['jquery',
"foundation.alerts",
"foundation.clearing",
"foundation.cookie",
"foundation.dropdown",
"foundation.forms",
"foundation.joyride",
"foundation.magellan",
"foundation.orbit",
"foundation.placeholder",
"foundation.topbar",
"foundation.reveal",
"foundation.section",
"foundation.tooltips",
"foundation.topbar",
], function ($) {
$(document).foundation();
});
@turbo1912
Copy link

how about modernizr ? isnt that also important for foundation 4 to work

@tassilogroeper
Copy link

I wrote a longer tutorial on how to use zurb Foundation, jQuery/Zepto and RequireJs. See it here: https://github.com/pheadeaux/requirejs-foundation-example

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment