Skip to content

Instantly share code, notes, and snippets.

@mscharley
Forked from radiosilence/gist:4040553
Last active May 25, 2017 23:33
Show Gist options
  • Save mscharley/10746157 to your computer and use it in GitHub Desktop.
Save mscharley/10746157 to your computer and use it in GitHub Desktop.
RequireJS with Zurb Foundation 5
/*
This assumes that your bower_components folder is /assets. I renamed it in .bower.json for sanities sake.
I use baseUrl = '/js' as this is where all my custom javascript is and requirejs can't navigate
bower's folder structure anyway.
*/
requirejs.config({
paths: {
"jquery": '/assets/jquery/dist/jquery.min',
"jquery.cookie": '/assets/jquery.cookie/jquery.cookie',
"foundation": '/assets/foundation/js/foundation',
"foundation.abide": '/assets/foundation/js/foundation/foundation.abide',
"foundation.accordion": '/assets/foundation/js/foundation/foundation.accordion',
"foundation.alert": '/assets/foundation/js/foundation/foundation.alert',
"foundation.clearing": '/assets/foundation/js/foundation/foundation.clearing',
"foundation.dropdown": '/assets/foundation/js/foundation/foundation.dropdown',
"foundation.equalizer": '/assets/foundation/js/foundation/foundation.equalizer',
"foundation.interchange": '/assets/foundation/js/foundation/foundation.interchange',
"foundation.joyride": '/assets/foundation/js/foundation/foundation.joyride',
"foundation.magellan": '/assets/foundation/js/foundation/foundation.magellan',
"foundation.offcanvas": '/assets/foundation/js/foundation/foundation.offcanvas',
"foundation.orbit": '/assets/foundation/js/foundation/foundation.orbit',
"foundation.reveal": '/assets/foundation/js/foundation/foundation.reveal',
"foundation.slider": '/assets/foundation/js/foundation/foundation.slider',
"foundation.tab": '/assets/foundation/js/foundation/foundation.tab',
"foundation.toolbar": '/assets/foundation/js/foundation/foundation.toolbar',
"foundation.topbar": '/assets/foundation/js/foundation/foundation.topbar'
},
shim: {
"jquery.cookie": ['jquery'],
"foundation": ['jquery'],
"foundation.abide": ['foundation'],
"foundation.accordion": ['foundation'],
"foundation.alert": ['foundation'],
"foundation.clearing": ['foundation'],
"foundation.dropdown": ['foundation'],
"foundation.equalizer": ['foundation'],
"foundation.interchange": ['foundation'],
"foundation.joyride": ['foundation', 'jquery.cookie'],
"foundation.magellan": ['foundation'],
"foundation.offcanvas": ['foundation'],
"foundation.orbit": ['foundation'],
"foundation.reveal": ['foundation'],
"foundation.slider": ['foundation'],
"foundation.tab": ['foundation'],
"foundation.toolbar": ['foundation'],
"foundation.topbar": ['foundation']
}
});
// Add any foundation modules you require to the end of this line.
require(['jquery', 'foundation'], function($) {
// Foundation JavaScript
// Documentation can be found at: http://foundation.zurb.com/docs
$(document).load(function() {
$(this).foundation();
});
});
{
"name": "foundation-compass-app",
"version": "0.0.1",
"private": "true",
"dependencies": {
"foundation": "zurb/bower-foundation",
"requirejs": "latest"
}
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ page.title }}</title>
<meta name="viewport" content="width=device-width">
<link rel="author" href="/humans.txt" />
<link rel="stylesheet" href="/css/app.css">
<script src="/assets/modernizr/modernizr.js"></script>
<script>
var require = {
baseUrl: '/js'
};
</script>
<script data-main="app" src="/assets/requirejs/require.js"></script>
</head>
<body>
<!-- content -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment