Adapt and respond with Responsive Elements

From Media Queries are a Hack:

The big buzzwords in CSS these days are "modular" and "responsive" -- and for good reasons. But we're still trying to achieve those goals with the wrong tool: Media Queries. What we actually need is a tool that doesn't exist yet: Element Queries. - Ian Storm Taylor (co-founder segment.io).

Ian really hit the nail on the head with that statement. One of the biggest issues with responsive web design is creating modular components that can be reused and adapt to the context they are placed in.

Responsive Elements is a jQuery library from Kumail Hunaid that does just that. By adding classes to elements that indicate how big or small the element is, you’re able to build reusable responsive components.

By default the library adds classes like gt50 gt100 gt150 gt200 gt250 gt650 lt700 lt750 to any element with the attribute data-respond, making it easy to vary styles based on width.

While this library brings us one step closer to Element Queries, as Ian mentioned, it’s still not quite there yet, but it’s close.

Checkout the demo and the source on GitHub.