Is Polymer good for responsive web design ?

[Justal K.]

Hello the team of Polymer,

I'm actually writting an article about Polymer for a meeting in France and I would like to ask you one question because I dont find anything about "responsive style".

I would like to know if Polymer has some kind of mechanics for changing the CSS style when the size of the windows changes.

I have just found some topics about core-media-query. However, all the examples are not exactly what I'm looking for. If I understand clearly, it's just possible to change the content but you cannot change the style of the module, right ? Or am I wrong ?

Thank you in advance.

J. Kevin

[Kayce Basques]

Hi,

Regarding "Is Polymer good for responsive web design?" here are some elements that might help:

I recently ported a "Responsive Material Design Layouts" guide from 0.5 to 1.0: https://elements.polymer-project.org/guides/responsive-material-design-layouts

Check out the Flexbox guide, too: https://elements.polymer-project.org/guides/flex-layout

Regarding "can you change the CSS style of elements?" check out the Styling guide: https://www.polymer-project.org/1.0/docs/devguide/styling.html

I personally have trouble wrapping my mind around CSS + web component best practices. I have a tingling feeling that I'm not alone and that I have an opportunity to make our docs better. So I am curious to hear what you have to say.

[Arthur Evans]

The 1.0 equivalent of core-media-query is iron-media-query, which is here:

    https://elements.polymer-project.org/elements/iron-media-query

The demo for this element could be better. The iron-media-query element's queryMatches property can be data bound to any other property you like, and you can use data binding to set attributes on other elements, to enable styling. You can also set an observer on that property and run arbitrary code when it changes.

Here's a jsbin that shows setting an attribute on a local DOM child, setting a class list on a local DOM child, and toggling a class on the host element, all based on a single media query:

http://jsbin.com/yekiqa/2/edit?html,output

The class list one uses the iron-flex-layout classes to change layout. (You probably won't use all of these  approaches in the same element -- this is just to demonstrate some of the possibilities.) 

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CADfyPghs_w51WXF8FRg6pECrpaNqszQOncmRWnUrRrj1bzhdNw%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.