Sowohl CSS-Mesh- als auch CSS-Variablen sind leistungsstarke Tools für Frontend-Entwickler. Ersteres erleichtert das Erstellen von Website-Layouts erheblich, während letzteres die volle Leistung variabler Stylesheets bietet.
In diesem Artikel werde ich Ihnen zeigen, wie Sie beide Tools verwenden, um schnell Prototypen für das Anwendungsdesign zu erstellen.
Skillbox empfiehlt: UX Analytics Online-Kurs
Wir erinnern Sie daran: Für alle Leser von Habr - ein Rabatt von 10.000 Rubel bei der Anmeldung für einen Skillbox-Kurs gemäß dem Habr-Aktionscode.
Passen Sie den Netzcontainer an
Unsere Anwendungen arbeiten mit CSS-Grid, einem Modul, mit dem Sie schnell Layouts erstellen und verwalten können. Dies ist insbesondere dann nützlich, wenn Sie mit der Eigenschaft "Rastervorlagenbereiche" arbeiten. (Unten werde ich zeigen, wie man es benutzt).
Lassen Sie uns das Erscheinungsbild unserer Anwendung bewerten - dies ist ein Chat:
Wenn wir die Entwicklertools in Chrome öffnen, können wir sehen, was ein solches Raster ist. Wie Sie sehen können, gibt es sechs Spalten und sechs Zeilen.
Hier ist der Code zum Erstellen eines solchen Rasters:
.app { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px; }
Zuerst erstellen wir einen Container dafür. Dann sagen wir, dass wir sechs Spalten am Ausgang haben möchten, und jede von ihnen sollte 1fr breit sein. Dies bedeutet einen Teil des freien Speicherplatzes. Daher teilen wir den freien Platz des Bildschirms in sechs gleiche Teile in der Breite.
Aber mit den Zeilen anders. Die Höhe jeder der ersten fünf Zeilen beträgt ebenfalls 1 fr, aber wir begrenzen die Höhe der letzten auf 60px anstelle von 1fr.
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;
Nun, da wir das Raster markiert haben, fahren wir mit dem nächsten Teil fort - der Platzierung der Elemente.
Platzierung von Gitterelementen
Jeder direkte "Erbe" des Gittercontainers ist ein Gitterelement. Insgesamt haben wir vier Elemente, von denen jedes in einem Rechteck platziert ist, wie im folgenden Screenshot gezeigt.
Damit die Elemente genau wie oben gezeigt platziert werden können, müssen wir die Eigenschaft grid-template-area verwenden.
.app { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px; grid-template-areas: "rmmmmm" "rmmmmm" "rmmmmm" "rmmmmm" "rmmmmm" "nsssss"; }
Jede der Codezeilen repräsentiert eine Zeile der Tabelle, und jedes Zeichen ist eine Gitterzelle. Symbole sind semantisch mit den Rasterelementen verknüpft, die sie darstellen (Raumliste, Nachrichtenliste, neues Raumformular, Nachrichtenformular).
Um unsere Elemente nun nach Rastervorlagenbereichen zu platzieren, müssen wir die Symbole mit ihren Rasterbereichswerten verwenden. So geht's:
.new-room-form { grid-area: n; } .rooms-list { grid-area: r; } .message-list { grid-area: m; } .send-message-form { grid-area: s; }
Natürlich gelten diese Klassen auch für unsere Rasterelemente in Ihrem HTML. Ich werde jedoch nicht im Detail darauf eingehen, da Sie höchstwahrscheinlich wissen, wie man Klassen zu HTML-Tags hinzufügt.
Von diesem Moment an beginnen wir mit dem Layout zu experimentieren. Wir können viel ändern, indem wir die Werte von Rastervorlagenbereichen ändern.
Wie in der obigen Abbildung gezeigt, versuche ich, vier verschiedene Layouts zu verwenden, indem ich die Position des Raumlistenelements und der neuen Raumformelemente ändere. Das einzige, was ich ändere, ist die Eigenschaft "Rastervorlagenbereiche".
Im Folgenden finden Sie vier dieser Optionen. Versuchen Sie, jedes von ihnen mit dem entsprechenden Layout abzugleichen.
grid-template-areas: "nmmmmm" "rmmmmm" "rmmmmm" "rmmmmm" "rmmmmm" "rsssss"; grid-template-areas: "rmmmmm" "rmmmmm" "rmmmmm" "rmmmmm" "rmmmmm" "nsssss"; grid-template-areas: "mmmmmr" "mmmmmr" "mmmmmr" "mmmmmr" "mmmmmr" "sssssn"; grid-template-areas: "mmmmmn" "mmmmmr" "mmmmmr" "mmmmmr" "mmmmmr" "sssssr";
Ändern Sie die Farbe mithilfe von CSS-Variablen
Nun versuchen wir, die Farbe der Anwendung mithilfe von CSS-Variablen zu ändern. Wenn Sie bis jetzt noch nicht mit ihnen gearbeitet haben, lassen Sie uns sehen, was sie sind.
Die im unteren Bild gezeigte Methode erleichtert das Lesen des Codes etwas, da der Variablenname sozusagen semantischer als hexadezimal ist. Darüber hinaus bietet die zweite Methode eine große Flexibilität bei der Änderung des Codes.
Mal sehen, was mit unserer Anwendung mit verschiedenen Variablenwerten gemacht werden kann.
:root { --main-color: #5ea3d0; --secondary-color: white; --main-text-color: #3e5869; --secondary-text-color: #b0c7d6; --new-room-form: #d9e1e8; --send-message-form: #F5F5F5; }
Sie werden in unserem Layout 17 Mal wiederholt. Wir werden jedoch nicht alle Standorte überprüfen. Schauen wir uns an, wie die Hauptfarbe in Bezug auf die Nachrichtenfarbe und das linke Seitenfeld funktioniert.
Hier ist, wie wir alles im Code verprügeln.
.rooms-list { background: var(--main-color); } .message-text { background: var(--main-color); }
Variablen sind gut, weil wir ihre Deklaration bearbeiten können, und dies wird ausreichen, um die gesamte Anwendung zu ändern. Ein Beispiel:
:root { --main-color: red; }
Und hier ist das Ergebnis:
Wir können einfach die Deklaration von Variablen in: root ändern, wodurch wir mit dem Erscheinungsbild der Anwendung spielen können.
Ersetzen wir einige Farben in: root mithilfe der obigen Palette.
:root { --main-color: #5ea3d0; --secondary-color: white; --main-text-color: #3e5869; --secondary-text-color: #b0c7d6; --new-room-form: #d9e1e8; --send-message-form: #F5F5F5; }
Das Ergebnis ist ein völlig anderer Chat-Look:
Kombinieren Sie das Raster und die Variablen
Wenn wir all dies kombinieren, erhalten wir die Möglichkeit, das Design unseres Chats vollständig zu ändern. Lass es uns tun.
So sieht die ursprüngliche Version im Vergleich zur endgültigen aus. Wie Sie sehen, habe ich sowohl die Palette als auch das Layout geändert. Der einzige Unterschied zwischen den beiden Beispielen sind die 11 Codezeilen, die ich hier hervorgehoben habe.
:root { --main-color: #ff66ff; --secondary-color: #fbd8fb; --main-text-color: #3e5869; --secondary-text-color: #d8b2ff; --new-room-form: #ffb2ff; --send-message-form: #d8b2ff;x } .app { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px; grid-template-areas: "mmmmrr" "mmmmrr" "mmmmrr" "mmmmrr" "mmmmnn" "ffffff"; }
Wirklich cool?
Skillbox empfiehlt: