How to achieve something like containers or grid in Polymer Project 1.0 - how to?

Question

I would like to create a responsive website with the Polymer Starter Kit + the prebuilt polymer elements.

Now, how to achieve something like a container or grid like in a css framework like bootstrap?

Is it possible with only Polymer, or my only options are my own custom code, or a framework/grid system like skeleton, bourbon neat, etc?

I tried to look at iron-flex-layout but it does not collapse on top of each other like a grid on smaller screen sizes, you can see it here:

http://plnkr.co/edit/ds6gAyohtZW4ESkxu83o?p=preview

 <div class="horizontal layout" style="height:100%">
    <div class="flex-1">
      Left column
    </div>
    <div class="flex-4">
      Right column
    </div>
  </div>

It does not "collapse" so the boxes will be under each other if you resize the window, it just scales.

So, how should I approach it?

EDIT: I would like to achieve something like this: http://www.bootply.com/4CJ9GOYEuH

So if you resize the window the dics will collapse onto the top of each other, instead of staying next to each other.

Answer 1

You can use the iron-flex-layout and iron-media-query in combination. Iron-media-query will update based on the viewport size and you can bind its media-query matches to other elements.

Naively, you could do the following, but equally you could use queryMatches to generate the "flex-n" classes for your layout.

  <iron-media-query query="(min-width: 600px)" query-matches="{{queryMatches}}"></iron-media-query>

  <template is="dom-if" if="{{queryMatches}}">
    <div class="horizontal layout" style="height:100%">
      <div class="flex-1">
        Left column
      </div>
      <div class="flex-4">
        Right column
      </div>
    </div>
  </template>

  <template is="dom-if" if="{{!queryMatches}}">
    <div>Left column</div>
    <div>Right column</div>
  </template>