Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
(function($){
var Responsifier = {
grid: [900, 768, 660, 560, 460, 360],
update: function() {
$('html').add('.responsive').each(function(){
var $el = $(this);
var w = $el.width();
_.each(Responsifier.grid, function(v){
if (w < v)
$el.addClass("responsive-" + v);
else
$el.removeClass("responsive-" + v);
});
});
}
};
$([window, document]).on('ready resize load responsive', _.debounce(Responsifier.update, 10));
})(jQuery);
@folke

This comment has been minimized.

Copy link
Owner Author

@folke folke commented Apr 4, 2013

Above is a small gist to do make media query alike stuff possible on elements with a certain size. Use it by including this on your page and then annotate every element where you need sizing with the class responsive. In your css you can then use the generated classes.

Code has not been optimized whatsoever and uses jquery and underscore.js. Could easily be changed to remove these dependences of course...

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