Come ottenere qualcosa come contenitori o griglia in Polymer Project 1.0 - come?

Question

Mi piacerebbe creare un sito Web reattivo con il Polymer Starter Kit + gli elementi polimerici prefabbricati.

Ora, come ottenere qualcosa come un contenitore o una griglia come in un framework css come bootstrap?

È possibile solo con Polymer oppure le mie uniche opzioni sono il mio codice personalizzato o un sistema framework/grid come scheletro, bourbon pulito, ecc.?

ho cercato di guardare ferro-flex-layout, ma non crolla l'uno sopra l'altro come una griglia su schermi di dimensioni più piccole, si può vedere qui:

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> 

Non "collassa" in modo che le scatole si trovino l'una sotto l'altra se ridimensionate la finestra, ma si ridimensiona.

Quindi, come dovrei avvicinarmi?

EDIT: Vorrei realizzare qualcosa di simile: http://www.bootply.com/4CJ9GOYEuH

Quindi, se si ridimensiona la finestra i dics crollerà sulla parte superiore di ogni altra, invece di stare uno accanto all'altro.

Answer 1

Prova Iron Grid IRON-GRID e trova altro Custome Elements se necessario.

Answer 2

È possibile utilizzare iron-flex-layout e iron-media-query in combinazione. Iron-media-query si aggiornerà in base alla dimensione del viewport e puoi associare le sue corrispondenze media-query ad altri elementi.

Ingenuamente, si potrebbe fare quanto segue, ma allo stesso modo è possibile utilizzare queryMatch per generare le classi "flex-n" per il proprio 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> 

Answer 3

È possibile aggiungere CSS griglia di bootstrap all'interno di un componente web, qualcosa di simile:

<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> 

Il Bootstrap stili di griglia sono troppo grande per un SO rispondere, così here is a JSFiddle, e qui it is on GitHub.

E poi all'interno di questa componente è possibile utilizzare proprio come siete 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 ho aggiunto --bootstrap-grid-gutter per configurare la dimensione grondaia, ma non posso fare i punti di interruzione a causa configurabili a issues with the CSS shim. Potresti renderlo configurabile con <iron-media-query> se necessario.