Skip to content

Instantly share code, notes, and snippets.

@namklabs
Created April 9, 2013 22:45
Show Gist options
  • Save namklabs/5350079 to your computer and use it in GitHub Desktop.
Save namklabs/5350079 to your computer and use it in GitHub Desktop.
loading enquire.js with modernizr.js
/* Modernizr and Enquire make a great team when it comes to responsive design.
Modernizr checks for features and Enquire checkes for the current media query,
so you can always load the right stuff at the right time and keep your mobile
footprint nice and slim.
*/
// This snippet below would go into your app.js file. Modernizr.js needs to be called from your template before app.js is.
/* Pre-requisite files:
- Enquire.js http://wicky.nillia.ms/enquire.js
- Modernizr.js (This link is to a custom build, but you can build it however you want. Just make sure you have html5shiv, Modernizr.load, Media Queries, and Add CSS Classes checked under "Extra"; you need that stuff.) http://goo.gl/Sh1xV
- matchMedia.js polyfill https://github.com/paulirish/matchMedia.js/
*/
Modernizr.load([{
test: window.matchMedia,
nope: ['/image/cache/matchMedia.js','/image/cache/enquire.min.js'],
yep: ['/image/cache/enquire.min.js'],
complete: function(){
// all "on-page" functions go here, including enquire.register() functions and your jQuery ready function.
//
} // end the complete callback function. You probably don't need to (read: shouldn't) write any of your app's code outside of here! Keep it in these brackets.
}]); //end modernizr.load().
// the file paths are specific to tao|cms
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment