Element Responsiveness Using JQuery

[Andy Howells]

Hi all,

Been working an idea over at Codepen for responsive elements using JQuery to figure out the element width and then swap in different classes. Basically a JQuery style media query.

I’m trying to figure out if this is the best method, or if it can be made even more efficient, would love some feedback basically;

http://codepen.io/andyunleash/pen/IKFen

Cheers,

Andy

[Atelierbram]

Can’t comment on the javascript implementation of this, because of lack of knowledge, but here are some thoughts about potential use-cases for this ( for what that is worth ).

Media-queries for elements are an interesting idea, and faking the future with javascript seems to make sense, but very soon into playing with this, I start to doubt it, for the CSS becomes less obvious, and find it easier to have the logic defined in just one place. Media-queries are that obvious place.

For example, this use case: a different three column layout: my fork of your codepen for a different page will make the CSS more complicated, mainly because of having to switch in your mind between the media-query-logic and the javascript ‘class-toggling’, overriding those javascript toggle classes with layout classes set on a wrapper, it’s just confusing.

[Andy Howells]

Thanks for your feedback mate, much appreciated. Can definitely see where it could get complex in any site, it’s probably something to be used sparingly and for good reason.

I’m used to do everything in the CSS using breakpoints, but sometimes have to apply an additional viewport breakpoint just to target one element (usually it’s at a point between a couple of other breakpoints). So something like this would be awesome.

Native CSS is always going to be more scalable, easier to maintain and much faster to render, but this could be a handy tool for those situations where CSS just doesn’t cut the mustard.

[Author]

Posts