Skip to content

Instantly share code, notes, and snippets.

@radiosilence
Created November 8, 2012 18:19
Show Gist options
  • Save radiosilence/4040553 to your computer and use it in GitHub Desktop.
Save radiosilence/4040553 to your computer and use it in GitHub Desktop.
RequireJS with Zurb Foundation
requirejs.config({
shim: {
'foundation/jquery.foundation.topbar': {
deps: ['jquery'],
},
'foundation/jquery.cookie': {
deps: ['jquery']
},
'foundation/jquery.event.move': {
deps: ['jquery']
},
'foundation/jquery.event.swipe': {
deps: ['jquery']
},
'foundation/jquery.foundation.accordion': {
deps: ['jquery']
},
'foundation/jquery.foundation.alerts': {
deps: ['jquery']
},
'foundation/jquery.foundation.buttons': {
deps: ['jquery']
},
'foundation/jquery.foundation.clearing': {
deps: ['jquery']
},
'foundation/jquery.foundation.forms': {
deps: ['jquery']
},
'foundation/jquery.foundation.joyride': {
deps: ['jquery']
},
'foundation/jquery.foundation.magellan': {
deps: ['jquery']
},
'foundation/jquery.foundation.mediaQueryToggle': {
deps: ['jquery']
},
'foundation/jquery.foundation.navigation': {
deps: ['jquery']
},
'foundation/jquery.foundation.orbit': {
deps: ['jquery']
},
'foundation/jquery.foundation.reveal': {
deps: ['jquery']
},
'foundation/jquery.foundation.tabs': {
deps: ['jquery']
},
'foundation/jquery.foundation.tooltips': {
deps: ['jquery']
},
'foundation/jquery.foundation.topbar': {
deps: ['jquery']
},
'foundation/jquery.offcanvas': {
deps: ['jquery']
},
'foundation/jquery.placeholder': {
deps: ['jquery']
},
'foundation/app': {
deps: [
'foundation/jquery.cookie',
'foundation/jquery.event.move',
'foundation/jquery.event.swipe',
'foundation/jquery.foundation.accordion',
'foundation/jquery.foundation.alerts',
'foundation/jquery.foundation.buttons',
'foundation/jquery.foundation.clearing',
'foundation/jquery.foundation.forms',
'foundation/jquery.foundation.joyride',
'foundation/jquery.foundation.magellan',
'foundation/jquery.foundation.mediaQueryToggle',
'foundation/jquery.foundation.navigation',
'foundation/jquery.foundation.orbit',
'foundation/jquery.foundation.reveal',
'foundation/jquery.foundation.tabs',
'foundation/jquery.foundation.tooltips',
'foundation/jquery.foundation.topbar',
'foundation/jquery.offcanvas',
'foundation/jquery.placeholder',
'foundation/modernizr.foundation',
]
}
}
});
require([ 'jquery'
, 'foundation/jquery.cookie'
, 'foundation/jquery.event.move'
, 'foundation/jquery.event.swipe'
, 'foundation/jquery.foundation.accordion'
, 'foundation/jquery.foundation.alerts'
, 'foundation/jquery.foundation.buttons'
, 'foundation/jquery.foundation.clearing'
, 'foundation/jquery.foundation.forms'
, 'foundation/jquery.foundation.joyride'
, 'foundation/jquery.foundation.magellan'
, 'foundation/jquery.foundation.mediaQueryToggle'
, 'foundation/jquery.foundation.navigation'
, 'foundation/jquery.foundation.orbit'
, 'foundation/jquery.foundation.reveal'
, 'foundation/jquery.foundation.tabs'
, 'foundation/jquery.foundation.tooltips'
, 'foundation/jquery.foundation.topbar'
, 'foundation/jquery.offcanvas'
, 'foundation/jquery.placeholder'
, 'foundation/modernizr.foundation'
, 'foundation/app'
], function($) {
$(document).ready(function() {
console.log("PARP");
});
})
@dalgard
Copy link

dalgard commented Feb 3, 2013

Thanks for the nice work!

Small comments: You've inserted jquery.foundation.topbar twice; jquery.foundation.utils need to be added for the newest version; and Modernizr should not be loaded by require.js, it should be inserted in <head> before require.js to avoid flash of unstyled content.

Also, the contents of app.js may be inserted directly in the main.js file - like this:

requirejs.config({
  shim: {
    "foundation/jquery.cookie": { deps: ["jquery"] },
    "foundation/jquery.event.move": { deps: ["jquery"] },
    "foundation/jquery.event.swipe": { deps: ["jquery"] },
    "foundation/jquery.foundation.accordion": { deps: ["jquery"] },
    "foundation/jquery.foundation.alerts": { deps: ["jquery"] },
    "foundation/jquery.foundation.buttons": { deps: ["jquery"] },
    "foundation/jquery.foundation.clearing": { deps: ["jquery"] },
    "foundation/jquery.foundation.forms": { deps: ["jquery"] },
    "foundation/jquery.foundation.joyride": { deps: ["jquery"] },
    "foundation/jquery.foundation.magellan": { deps: ["jquery"] },
    "foundation/jquery.foundation.mediaQueryToggle": { deps: ["jquery"] },
    "foundation/jquery.foundation.navigation": { deps: ["jquery"] },
    "foundation/jquery.foundation.orbit": { deps: ["jquery"] },
    "foundation/jquery.foundation.reveal": { deps: ["jquery"] },
    "foundation/jquery.foundation.tabs": { deps: ["jquery"] },
    "foundation/jquery.foundation.tooltips": { deps: ["jquery"] },
    "foundation/jquery.foundation.topbar": { deps: ["jquery"] },
    "foundation/jquery.foundation.utils": { deps: ["jquery"] },
    "foundation/jquery.offcanvas": { deps: ["jquery"] },
    "foundation/jquery.placeholder": { deps: ["jquery"] }
  },

  paths: {
    jquery: "jquery.min"
  },

  name: "main",
  out: "main.min.js"
});

requirejs(["jquery",
         "foundation/jquery.cookie",
         "foundation/jquery.event.move",
         "foundation/jquery.event.swipe",
         "foundation/jquery.foundation.accordion",
         "foundation/jquery.foundation.alerts",
         "foundation/jquery.foundation.buttons",
         "foundation/jquery.foundation.clearing",
         "foundation/jquery.foundation.forms",
         "foundation/jquery.foundation.joyride",
         "foundation/jquery.foundation.magellan",
         "foundation/jquery.foundation.mediaQueryToggle",
         "foundation/jquery.foundation.navigation",
         "foundation/jquery.foundation.orbit",
         "foundation/jquery.foundation.reveal",
         "foundation/jquery.foundation.tabs",
         "foundation/jquery.foundation.tooltips",
         "foundation/jquery.foundation.topbar",
         "foundation/jquery.foundation.utils",
         "foundation/jquery.offcanvas",
         "foundation/jquery.placeholder"], function ($) {

  /**
   * Foundation - app.js:
   */

  (function ($, window, undefined) {
    var $doc = $(document),
        Modernizr = window.Modernizr;

    $(document).ready(function () {
      $.fn.foundationAlerts           ? $doc.foundationAlerts() : null;
      $.fn.foundationButtons          ? $doc.foundationButtons() : null;
      $.fn.foundationAccordion        ? $doc.foundationAccordion() : null;
      $.fn.foundationNavigation       ? $doc.foundationNavigation() : null;
      $.fn.foundationTopBar           ? $doc.foundationTopBar() : null;
      $.fn.foundationCustomForms      ? $doc.foundationCustomForms() : null;
      $.fn.foundationMediaQueryViewer ? $doc.foundationMediaQueryViewer() : null;
      $.fn.foundationTabs             ? $doc.foundationTabs({callback : $.foundation.customForms.appendCustomMarkup}) : null;
      $.fn.foundationTooltips         ? $doc.foundationTooltips() : null;
      $.fn.foundationMagellan         ? $doc.foundationMagellan() : null;
      $.fn.foundationClearing         ? $doc.foundationClearing() : null;
      $.fn.placeholder                ? $('input, textarea').placeholder() : null;
    });

    // UNCOMMENT THE LINE YOU WANT BELOW IF YOU WANT IE8 SUPPORT AND ARE USING .block-grids
    // $('.block-grid.two-up>li:nth-child(2n+1)').css({clear: 'both'});
    // $('.block-grid.three-up>li:nth-child(3n+1)').css({clear: 'both'});
    // $('.block-grid.four-up>li:nth-child(4n+1)').css({clear: 'both'});
    // $('.block-grid.five-up>li:nth-child(5n+1)').css({clear: 'both'});

    // Hide address bar on mobile devices (except if #hash present, so we don't mess up deep linking).
    if (Modernizr.touch && !window.location.hash) {
      $(window).load(function () {
        setTimeout(function () {
          // At load, if user hasn't scrolled more than 20px or so...
          if( $(window).scrollTop() < 20 ) {
            window.scrollTo(0, 1);
          }
        }, 0);
      });
    }

  })($, window);

});

@dbashford
Copy link

Stumbled across this while learning about foundation.

The shim config can take an array when the dependencies do not need to export anything. So this:

"foundation/jquery.cookie": { deps: ["jquery"] },

can be this:

"foundation/jquery.cookie": ["jquery"]

Been playing with it and the foundation JavaScript that comes out of an Bower install and I've cut all that requirejs boilerplate down a bit. (Pardon the coffeescript)

require
  paths:
    jquery: 'vendor/jquery'
    f:      'vendor/foundation'
  shim:
    "vendor/foundation/foundation": ["jquery"]
  , ["jquery", "vendor/foundation/foundation"]
  , ($) ->

    requirejs [
      "f/foundation.alerts"
      "f/foundation.clearing"
      "f/foundation.cookie"
      "f/foundation.dropdown"
      "f/foundation.forms"
      "f/foundation.interchange"
      "f/foundation.joyride"
      "f/foundation.magellan"
      "f/foundation.orbit"
      "f/foundation.placeholder"
      "f/foundation.reveal"
      "f/foundation.section"
      "f/foundation.tooltips"
      "f/foundation.topbar"], ->
    ...

I also seem to require having foundation itself loaded first, so I did shim that. This is what I ended up with. Not doing anything with it, but it all loads in the proper order and optimizes correctly. I'm new foundation, but have to convert a Rails app to use RequireJS via Mimosa and Foundation is one of the first things I'm moving over.

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