Aufbau eines CSS-Grid Overlays

Werfen wir einen Blick darauf, wie man ein Grid-Overlay mit CSS erstellt. Es wird responsiv, einfach anpassbar sein und stark von CSS-Variablen (genauer als „CSS Custom Properties“ bekannt) Gebrauch machen. Wenn Sie mit Custom Properties nicht vertraut sind, empfehle ich dringend, Was ist der Unterschied zwischen CSS-Variablen und Preprocessor-Variablen? zu lesen und Lea Verous‘ aufschlussreichen Vortrag über deren Verwendung anzusehen.

Dieses Grid-Overlay, das wir erstellen werden, ist als Entwicklertool gedacht, also als ein Werkzeug nur für uns, nicht wirklich für unsere Benutzer. Machen wir uns also keine allzu großen Sorgen um die Browserunterstützung (Wenn Sie sich darum kümmern, schauen Sie sich caniuse… Daten zu Custom Properties an). Auch wenn es unmöglich ist, Custom Properties so vorzuverarbeiten, dass sie sich exakt wie native Unterstützung verhalten, können Werkzeuge wie das PostCSS-Plugin cssnext sie in CSS umwandeln, das mit älteren Browsern kompatibel ist, wenn Sie sie wie Preprocessor-Variablen verwenden.

Vorwort

Vor ein paar Wochen habe ich bei der Arbeit die Media Queries in einem unserer Projekte vereinfacht und eine Layoutkomponente hinzugefügt, die auf den gleichen Prinzipien wie Flexbox Grid basiert. Einige meiner Kollegen Designer verstanden die Responsivität und Fluidität davon nicht vollständig, daher habe ich ein schaltbares Grid-Overlay erstellt, um ihnen bei der Visualisierung zu helfen.

Meine Hoffnung ist, dass dies ein Werkzeug zur Unterstützung von Layout-bezogenen Gesprächen in unseren Teams sein kann und sicherstellt, dass wir nicht zu viele individuelle Breiten, Abstände usw. verwenden.

Terminologie

Als Frontend-Designer möchte ich, dass alle Entwickler und Designer dieselbe Sprache sprechen (soweit wie möglich), daher habe ich eine Terminologie für die CSS-Variablen gewählt, die auch digitalen Designern vertraut ist.

• Spalten: Die vertikalen Teilungen der Seite.
• Steg: Der Abstand zwischen den Spalten.
• Offset: Der Abstand zwischen den Seiten des Viewports.
• Grundlinie: Der vertikale Rhythmus, der für Text verwendet wird.

Das Grid erstellen

1) „Box“

Wir verwenden ein Pseudo-Element auf dem Element, um das Grid über all unseren Inhalten anzuzeigen. Wir möchten, dass das Overlay mit einem flüssigen Layout funktioniert, daher geben wir dem Element eine Breite von `100% – (2 * offset)` und auch eine maximale Breite, damit das Grid-Overlay nicht breiter als unser Layout wird.

Sehen Sie sich den Pen an

2) Spalten

Wenn Sie sich das Grid ansehen, werden Sie feststellen, dass das sich wiederholende Muster Spalten+Steg-Paare sind. Wir verwenden wiederholende lineare Farbverläufe als background-image. Wir setzen die Größe des background-image auf **100% + Steg**, wodurch das sich wiederholende Muster **100% / Spalten** breit ist und die tatsächliche Spalte **(100% / Spalten) – Steg** breit ist.

Sehen Sie sich den Pen an

Nebenbei bemerkt, habe ich auch versucht, normale lineare Farbverläufe mit background-repeat zu verwenden, um die Linien pixelgenauer zu machen. Es funktionierte nicht, da die Pixelrundung zu einer unvollkommenen Gesamtbreite führte, wenn die Layoutbreite nicht durch die Anzahl der Spalten teilbar war.

3) Grundlinie

Wir zeichnen auch die Grundlinie mit wiederholenden linearen Farbverläufen, aber es ist etwas einfacher, da wir keine horizontalen Stege hinzufügen und es nur eine Linie anstelle eines Blocks sein soll.

Fügen wir auch eine Variable für die Grundlinienverschiebung hinzu, die es uns ermöglicht, die Grundlinie leicht nach oben oder unten zu verschieben. Wir wenden die Grundlinienverschiebung an, indem wir einfach die background-position anpassen.

Sehen Sie sich den Pen an

4) Media Queries

Nachdem wir unser grundlegendes Setup haben, führen wir einige Media Queries ein. Wenn Sie sich die bisher verwendete Mathematik ansehen, können Sie sehen, dass nichts davon an eine bestimmte Anzahl von Spalten, Stegbreite usw. gebunden ist.

Wir verwenden einen Mobile-First-Ansatz und nehmen Variablen nur in die Media Queries auf, wenn wir sie ändern möchten. Um jedem, der das Overlay verwendet, klarzumachen, dass wir einen neuen Breakpoint überschritten haben, ändern wir auch die Farbe bei jedem Breakpoint.

Ich empfehle, den Pen in einem neuen Tab zu öffnen und zu sehen, wie er sich verhält, wenn Sie verschiedene Variablenwerte ändern und die Ansicht anpassen.

Sehen Sie sich den Pen an

Wenn Sie sich in Schritt 1 eine Notiz gemacht haben wie „aber was, wenn ich zu bestimmten Breakpoints spezifische Layoutbreiten haben möchte?“, dann können Sie diese Logik jetzt ganz einfach einführen, indem Sie für jede Media Query `--max_width` festlegen.

5) Hilfetext

Designer denken gerne über Mockups für verschiedene Geräte nach – was im Allgemeinen gut ist, da es entscheidend ist, dass eine Website auf diesen verschiedenen Geräten fantastisch aussieht –, aber manchmal vergessen sie, dass das Layout auf einem iPad bis zum nächsten Breakpoint nach oben und/oder unten funktionieren sollte.

Breakpoints werden aus vielen Gründen, einschließlich der oben genannten, normalerweise nicht als „iPhone“, „Galaxy Note 🔥“, „iPad“ usw. bezeichnet. Ein Breakpoint bezeichnet, wo ein neuer Bereich beginnt, und ist nicht gerätespezifisch.

Um es für alle, die das Overlay verwenden, deutlicher zu machen, was unsere Breakpoints sind, können wir die Namen zu unserem Grid-Overlay hinzufügen.

Sehen Sie sich den Pen an

Ich habe einen Traum, dass eines Tages ein Designer nicht zu einem Entwickler zurückkommt und sagt: „Wir müssen anpassen, wie es auf dem iPad aussieht“, sondern stattdessen sagt: „Wir müssen anpassen, wie es auf Medium aussieht“.

Weiter gehen

Was ist mit Linien für die Spalten und Stege? Einfach, das ist nur CSS. Was ist mit dem Hinzufügen weiterer Breakpoints? Einfach, das ist nur CSS. Was, wenn ich unterschiedliche Farben haben möchte? Einfach… Sie verstehen es. 😄

Sie können hier ein fortgeschritteneres Beispiel sehen

Sehen Sie sich den Pen an

Ich würde mich sehr über Ihr Feedback freuen, entweder hier oder im GitHub-Repository, das auch eine Chrome-Erweiterung mit diesem Ansatz enthält.