MQSugr

MQSugr is a wrapper for Modernizr.load that provides some syntactic sugar for loading CSS and JavaScript files when using media queries and browser features. MQSugr was developed to help me learn more about JavaScript, media queries, Modernizr, and file loading. I don't think it solves any real problem.

In order to see MQSugr in action just resize your window and reload this page at different dimensions. The breakpoints are 320px, 600px and 801px. The background color should change and the simple tests below will react some. The snow will load if your screen is larger than 801px and your browser supports CSS animations.

Simple Tests

This <div> is a little on the small side don't you think? If the window were bigger maybe we could lighten the background up some too...
Could this <div> get just a little more elbow room, please? With some more space something cool might happen.
This is how a <div> should live! Lots of space! And it's snowing!
Your browser window is greater than 600px & supports IndexedDB. Yay!
Your browser window is greater than 600px but doesn't support IndexedDB. Boo!

Features

The Code

This example of MQSugr is the code that powers this page:

This is what the code would look like when using Modernizr.load:

Learn More & Download

If you're interested in using MQSugr you can learn more about it on GitHub.

If you like the snowflakes then please check out my code for CSS3 snowflakes.
Fork Me on GitHub