Responsive Grid für Onsen UI

Leider Onsen UI kein ansprechendes Gitter für die Blöcke auf Bildschirme in verschiedenen Größen platzieren. Welche Grids können Sie zur Verwendung mit Onsen UI empfehlen? Ich habe Erfahrung mit Bootstrap, aber diese Bibliothek ist zu groß, um sie in einem Projekt nur für ein responsives Raster zu verwenden. Ich habe einige andere Netze erforscht, aber im Gegensatz zu Bootstrap, können sie nicht einige Blöcke auf kleinen Bildschirmen verstecken oder ihre Reihenfolge (nur einen Stapel anstelle einer Linie machen) ändern. Hat jemand eine positive Erfahrung mit einem Responsive Grid für Onsen UI?Responsive Grid für Onsen UI

Quelle

2017-04-18 Sergey Konov

Skeleton ist ein gut etabliertes sehr leichtes Gitter, welches Ihren Bedürfnissen passen könnte.

Out of the Box kollabiert ihr Grid-System zu einer einzigen Spalte auf dem Handy, es hat eine begrenzte Anzahl von Hilfsklassen und I found this source, die viele Push-Pull-Mixins auflistet, wenn Sie mehr Kontrolle über die Bestellung Ihrer Spalten benötigen. Du könntest wahrscheinlich nur die auswählen, die du brauchst.

/* Push & Pull */ 
    .container .push-by-one     { left: 60px; }

begann ich eine codepen basierend auf einigen Code aus dem Skeleton-Website, die Sie mit spielen können: https://codepen.io/panchroma/pen/JNXoVP

aktualisieren

, wenn ich 3 colums habe, kann ich nicht erstellen dieses Bildschirm-Layout: großes Display: column1 5/12, 5/12 column2, column3 12.02; mittlerer Bildschirm: Spalte1 7/12, Spalte2 5/12, Spalte3 ausgeblendet; kleiner Bildschirm: column1 100%, 100% column2 auf der nächsten Zeile, column3 versteckt. Ich habe recht?

Dies ist kein Problem mit einigen Medienabfragen und ein wenig benutzerdefinierten CSS. Wenn Sie heraus überprüfen my updated codepen Sie werden sehen, dass ich hidding col 3 mit display:none; und display:block; bei verschiedenen Ansichtsfenstern.

Um die Breite des Spalts 1 I das Skelett CSS inpspected zu ändern und hat ihre Herrschaft für 12.07 Gitter außer Kraft zu setzen, die Breite für das 5/12 Gitter

HTML

verwendet

Skeleton: Responsive CSS Textbaustein

</head> 
<body> 

    <!-- Primary Page Layout 
    –––––––––––––––––––––––––––––––––––––––––––––––––– --> 

    <div class="container"> 

    <!-- columns should be the immediate child of a .row --> 
    <div class="row"> 
    <div class="five columns overide"><h5>Column 1</h5>5/12 large screen, 7/12 med screen, 100% small</div> 
    <div class="five columns"><h5>Column 2</h5>5/12 large & medium screens, 100% small</div> 
    <div class="two columns hidden-md"><h5>Column 3</h5>2/12 large screen, hidden medium and small screens</div> 

    </div> 
</div> <!-- end container--> 



<!-- End Document 
    –––––––––––––––––––––––––––––––––––––––––––––––––– --> 
</body> 
</html>

CSS

/* Mobile first queries */ 
.hidden-md{ 
    display:none; 
} 

/* Larger than mobile */ 
@media (min-width: 400px) {} 

/* Larger than phablet */ 
@media (min-width: 550px) {} 

/* Larger than tablet */ 
@media (min-width: 750px) {} 

/* Larger than desktop */ 
@media (min-width: 1000px) {} 

/* Larger than Desktop HD */ 
@media (min-width: 1200px) {} 


/* Custom helper class */ 

@media (min-width: 750px) { 
    .hidden-md{ 
     display:block; 
    } 
} 

/* Custom Grid Width */ 
@media (min-width: 550px) and (max-width: 749px) { 
    .five.columns.overide{ 
    width: 56.6666666667%; 
    } 

}

Ein weiteres Update

Mein Traum - leichte CSS Raster mit Bootstrap-Funktionalität zu finden :)

Für min Dateigröße kann es schwierig sein, Skeleton übereinstimmen + einige hand- gewalztes CSS.

Eine andere Option, die ich mir vorstellen kann, ist eine reguläre Bootstrap-Site zu erstellen, die dann über UnCSS läuft.

Ich habe dies ein paar Mal mit Bootstrap-basierten Websites getan. Ich hatte gemischte Erfolge auf dynamischen CMS-Seiten, wirklich gute Ergebnisse auf weniger komplexen statischen Seiten und bekam eine 80-90% ige Reduzierung der CSS-Dateigröße.

Es gibt eine Reihe von Möglichkeiten, UnCSS zu verwenden. Ich habe diese Github code mit Grunt und Node verwendet. Ich sehe, es gibt auch an online resource.

Viel Glück bei Ihrer Jagd!

Quelle

2017-04-20 01:52:30

Danke für die Antwort! Aber wie ich sehe - ist es mit Skeleton unmöglich, die Breite zu ändern oder einige Spalten für kleine Bildschirme zu verstecken? I.e. Wenn ich 3 Spalten habe, kann ich dieses Bildschirmlayout nicht erstellen: Großbild: Spalte1 5/12, Spalte2 5/12, Spalte3 2/12; mittlerer Bildschirm: Spalte1 7/12, Spalte2 5/12, Spalte3 ausgeblendet; kleiner Bildschirm: Spalte1 100%, Spalte2 100% in der nächsten Zeile, Spalte3 ausgeblendet. Ich habe Recht? –

Hallo @SergeyKonov, siehe mein Update oben –

Hallo @David, danke für Update! Ja, ich weiß, dass wir CSS für diese Tricks verwenden können. Aber das Bootstrap-Grid hat vordefinierte Klassen für diese Fälle (zum Beispiel: 'hidden-xs' für die Spalte hide auf extra-kleinen Bildschirmen,' col-lg-5' und 'col-md-7' für unterschiedliche Breite auf den großen und mittleren Bildschirmen etc.). Mein Traum - ein leichtgewichtiges CSS-Grid mit Bootstrap-Funktionalität zu finden :) –

Responsive Grid für Onsen UI

Antwort

Verwandte Themen