Material-design-lite: Provide element queries as an alternative to media queries in responsive design

[leifoolsen]

Is this a new component, or a missing feature in an existing one?
Component name: It is a missing feature.

Material Design spec URL for the component (if any): NA

What does this component or feature allow you to do which isn’t possible at the moment? Better control in responsive design.

Please provide any URLs or screenshots of good examples of usage of this component or feature that you may have come across: https://github.com/leifoolsen/mdl-ext/tree/master/src/grid

Responsive breakpoints

A common metod in responsive design is to use media queries to apply styles based on device
characteristics. The problem with media queries is that they relates to the viewport - so every time you
write a media query for max-width or min-width, you’re connecting the appearance of your module to the width of the entire canvas, not the part of the canvas the component occupies.

Media queries are a hack

Some developers claim that media queries are a hack, and I totally agree! Imagine a design with a sidebar and a content area. In a responsive, fluent design both the sidebar and the content has "unknown" widths. Trying to add e.g. a responsive grid into the content area which relies on media queries, where you have no knowledge of how much space your content occupies, could be an difficult (almost impossible) task.

Element queries to the rescue

An element query is similar to a media query in that, if a condition is met, some CSS will be applied.
Element query conditions (such as min-width, max-width, min-height and max-height) are based on elements, instead of the browser viewport. Unfortunately, CSS doesn’t yet support element queries, but there are a couple of JavaScript-based polyfrills involving various syntaxes. They are not standard - but that should not stop us from using them. Element-first design is the spirit of the Atomic design principle, but looks very different in practice than how most people implement Atomic design using their mobile-first mindset. Instead of writing styles on advance for every conceivable situation a widget may find itself in, we are able to allow individual parts of the layout to adapt responsively when those elements require it.

Some of the polyfrills available are:

• eq.js
• EQCSS
• CSS Element Queries
• BoomQueries

These are all good libraries, and they serve the purpose. It would have been great if MDL could provide a functionality similar to the libraries listed above.

As an example, I have applied element queries to the mdl-grid component using the eq.js library - https://github.com/leifoolsen/mdl-ext/tree/master/src/grid.

[tomhodgins]

I'm from the EQCSS project and I second this, I'd be glad to help/provide code if you're looking for element queries

[leifoolsen]

Thanks @tomhodgins. I find the eq.js library very useful - and it would have been great to have a similar feature in MDL. Meanwhile, I've experimented using eq.js in combination with MDL - and it works great in all modern browsers, except for IE11 (due to a bug in MDL?) . Demo of grid with three breakpoints like the MDL grid: http://leifoolsen.github.io/mdl-ext/demo/grid.html . Demo of grid with five breakpoints: http://leifoolsen.github.io/mdl-ext/demo/lightbox.html

[tomhodgins]

This isn't based on that grid, but here's a responsive grid based on Element Queries. Anything put into this grid will respond based on the breakpoints of the grid, not the browser: http://codepen.io/tomhodgins/pen/redKmW

[leifoolsen]

An in depth artichle about EQCSS, can be found here, av on CodePen, with examples. A lot of EQCSS demos as well. Thanks @tomhodgins.

[simplifyod]

I am trying implement EQCSS in LESS files. but have compilation error. Is exist some connector eqcss with LESS?

[Garbee]

These are not on a standards track therefore it isn't something we are interested in using internally as it would require an extra dependency for sites to implement our components.

Thank you for the suggestion, but it doesn't align with what we are trying to provide to developers.

[tomhodgins]

@simplifyod If you're looking to use EQCSS inside Less and running into issues with the meta selectors ($this, etc) there are aliases you can use prefixed with eq_ instead, so $this can be written as eq_this, and $parent as eq_parent, and so on. This works for SASS compatibility, and at first glance also seems to help with Less: http://codepen.io/tomhodgins/pen/pbpLJX

[simplifyod]

@tomhodgins while building css form LESS with EQCSS I have this error:
ParseError: directive options not recognised

what you suggest in this situation? I use grunt for compile

[Garbee]

@simplifyod Please use the projects support locations for support or a support site such as StackOverflow. This issue tracker is specifically for issues with the code Material Design Lite provides.

Thank you.