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.

Dumpcart

Have you seen this documentation on iron-flex-layout? – Smoot

Yes, but I would like to achieve something like this: 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. – Dumpcart

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>

Memory

Thanks! So correct me if I'm wrong, but this basically does the following, right? The iron-media-query will check if the viewport's width is greater or smaller than 600px, and then if its greater, the first template will be used, and if its smaller, the second. Could you show me in codepen how to make the collapse on top of each other like a grid or such? I'd really appreciate it. Also what do you think about that IRON-GRID @user3457398 linked? – Dumpcart

Answer 2

Try Iron Grid IRON-GRID and find more Custome Elements if needed.

Odle

Thanks, I tried it out, but unfortunately either I can't use it properly, or it doesn't support rows and containers like for example in bootstrap, as you can see in my OP bootply link. Which one is it? :) – Dumpcart

You have to use column sizes. If you want them to stack on small devices, you put s12, etc – Wolverine

Note, iron-grid is licensed under GNU GPL v3. If you are building a software you want to redistribute, it may be a problem (unless your software is also GPL). Hopefully, iron-grid authors will eventually release it under MIT or BSD. – Wilmerwilmette

As of Mar 17, 2017, iron-grid is licensed under MIT. – Maples

Answer 3

You can add Bootstrap's grid CSS inside a web component, something like:

<dom-module id="bootstrap-grid">
    <template strip-whitespace>
        <style>
            /* Grid styles from Bootstrap */
        </style>
        <content></content>
    </template>
    <script>Polymer({ is: 'bootstrap-grid' });</script>
</dom-module>

The Bootstrap grid styles are too large for an SO answer, so here is a JSFiddle, and here it is on GitHub.

And then inside this component you can use it just like you're in <div class="container-fluid">:

<bootstrap-grid>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-lg-4"><div class="panel">one</div></div>
        <div class="col-xs-12 col-sm-6 col-lg-4"><div class="panel">two</div></div>
        <div class="col-xs-12 col-sm-6 col-lg-4"><div class="panel">three</div></div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-4 col-lg-3"><div class="panel">A</div></div>
        <div class="col-xs-6 col-sm-4 col-lg-3"><div class="panel">B</div></div>
        <div class="col-xs-6 col-sm-4 col-lg-3"><div class="panel">C</div></div>
        <div class="col-xs-6 col-sm-4 col-lg-3"><div class="panel">D</div></div>
    </div>
</bootstrap-grid>

In the Fiddle I've added --bootstrap-grid-gutter to configure the gutter size, but I can't make the breakpoints configurable due to issues with the CSS shim. You could make that configurable with <iron-media-query> if you needed it.

Carruthers