Milligram: Gitterelemente: volle Breite auf kleinen Bildschirmen, kleine Breite auf großen Bildschirmen?

Danke, dass du mich darauf aufmerksam gemacht hast @mikeriley131 . Ich wollte gerade Milligram für ein Projekt verwenden, aber das ist eine große fehlende Funktion. Es ist nicht allzu schwer, es manuell hinzuzufügen, aber es ist nicht der Zweck eines CSS-Frameworks, dass Sie dies nicht von Hand tun müssen :-).

Hallo Leute @mikeriley131 @guillaumemolter

Derzeit unterstützt Milligram diese Funktionalität nicht, aber mir gefiel die Idee. Ursprünglich wurde Milligram mit dem Ziel gebaut, das einfachste Framework zu sein, das nur ein Minimum an möglichen Stilen definiert. Es hat also nicht so viele Funktionen, die in großen Frameworks leicht zu finden sind.

Ich werde mir etwas einfallen lassen, aber wenn Sie eine Idee haben, wie wir diese Funktionalität implementieren könnten, und eine PR einreichen möchten, zögern Sie nicht.

Vielen Dank, dass Sie Ihre Gedanken mit uns teilen.

@cjpatoilo Ich höre dich und ich stimme zu, das ist genau das, was mir an Milligram gefallen hat ... nur das Nötigste ... aber für mich ist dies ein grundlegendes und unverzichtbares responsives Design-Feature.

OK, danke @cjpatoilo. Ich freue mich, eine PR zu erstellen, wollte nur sichergehen, dass ich zuerst nichts verpasse.

@mikeriley131 hilft gerne, prüft PR usw.

Pull Request 155 erstellt, um die Responsive Grid-Funktion hinzuzufügen: https://github.com/milligram/milligram/pull/155

Demo unter http://codepen.io/csuttie/pen/BWQMwM

Ich habe mit einer Medienabfrage herumgespielt, ertrage es mit mir. Ich bin ein Typ, der Back-End-Sachen mag und die meiste Zeit mit Linux herumspielt, also nehmen Sie meine Front-End-Entwicklung mit Vorsicht. Ich habe auch nichts in einem CSS-Präprozessor gemacht.

<strong i="6">@media</strong> (min-width: 495px) and (max-width:800px) {
    .row .column[class*=" column-"] {
        max-width: 100%;
    }
}

Es gleicht ein .row mit einem .column im Kind- oder Enkelkind ab (warum sollten Sie überhaupt ein Element zwischen .row und .column wollen? ), gefolgt von einem .column-* , wobei * ein Platzhalter ist.

Was denkst du?

Bemerkungen : 495 Pixel ist die Grenze, weil das die minimale Größenänderung ist, die Chrome mir erlaubt hat. 800px hat keine signifikante Bemerkung.

@cjpatoilo oi!
Ich denke, das @Lilja -Code-Snippet ist ein Muss in Milligramm. Mein Vorschlag wäre, eine .responsive -Klasse in den Spalten zu platzieren, die wir auf Mobilgeräten in voller Breite haben möchten, obwohl sie auf einige % eingestellt sind.

<strong i="10">@media</strong> (max-width: 40rem) {
    .row .column.responsive[class*=" column-"] {
        margin-left: 0;
        max-width: 100%;
    }
}

Also auf mobilen Bildschirmen das:

würde das werden: