Code als Dokumentation: Neue Strategien mit CSS Grid

SuperCool, ein schnell wachsendes Webdesign-Unternehmen, erstellt benutzerdefinierte Websites für Kunstkunden und verwendet Off-the-Shelf Craft CMS-Systeme. Es verfügt über ein hochwertiges Grafikdesign sowie eine relativ anspruchsvolle Typografie und Kunstanleitung. Wir haben uns in den letzten Monaten an CSS Grid zugewandt. Wir wechseln langsam, damit wir neue Paradigmen und Entwurfsmethoden entdecken können, anstatt nur alte Gewohnheiten zu einer neuen Syntax zu portieren.

Bisher haben wir einige sehr nützliche Strategien entwickelt, um Layouts zu verfolgen. Ich habe einige sehr clevere Mixins mit den genannten Regionen und Vorlagen geschrieben, und wir haben einige grundlegende Konventionen gefunden, um hochlesbaren Code zu erstellen. Ich denke, es wäre sehr wertvoll, in die vollständige Produktionsinformation einer einzelnen Hauptkomponente mit dem Netz einzusteigen, in einige der von ihm aufgeworfenen Designprobleme einzubeziehen und Sie zu verhindern, um die Fallstricke zu vermeiden, denen wir begegnen. CSS Grid ist eine große Spezifikation mit vielen möglichen Arten und vielen korrekten Möglichkeiten, aber irgendwann müssen Sie Ihre Methode bestimmen und online erhalten.

Ich erwarte, dass Sie Kenntnisse über CSS, SASS, BEM haben und interessiert an Prototypen vollständig implementierter, zugänglicher, benutzerdefinierter Frameworks (mit über 50 Komponenten) Aufgaben mit Skizzen- oder Photoshop -Dokumenten in einem engen Zeitplan (z. B. einer Woche).

Lassen Sie uns zunächst die verschiedenen Codierungsaufgaben im Design identifizieren und trennen und planen, wie wir mit ihnen umgehen werden:

1. Schriftart: Der Designer hat ein Schriftsystem definiert.
2. Farbe: Zuerst erstellen wir ein Themenmodell und fügen es dann in den Abschnitt auf.
3. Inhalt: Welche Elemente sind in diesem Block enthalten? Was ist seine Variante? Hier kommt unser Bem -Mixin ins Spiel.
4. Layout: So wird Inhalt in diesem Block platziert. Möglicherweise möchten Sie direkt zu diesem Schritt überspringen.
5. Vertrag: Genau so haben wir uns entschieden, alle oben genannten zu schreiben. Es gibt viele korrekte Antworten in CSS, daher ist es wichtig, dass wir alle mit einer Konvention, den Regeln, zustimmen. Dies sollte in der Tat an erster Stelle eingestuft werden, aber aus diesem Artikel werden wir ihn am Ende zusammenfassen.

Schriftsystem

Wir verwenden Utility-Klassen (z. B. H-Text-H1, H-Text-Badge), um den Schriftartenstil festzulegen. In einem Projekt kann es hundert Schriftarten in einem Projekt geben. Wir verwenden Typex, um diese Stile direkt von der Skizze in unser Musterlab zu exportieren. Dies ist, was ein weiterer Beitrag für sich selbst. Nehmen wir also an, die Schrift wurde verarbeitet. Wir werden keine Schriftarten in unsere Komponententeile einführen.

Farbverbrauch

Themen fügen nur ein paar winzige Mixins hinzu, daher werden wir im Abschnitt nicht viele Farbregeln sehen. Wir speichern sie alle im Abschnitt " _themer.scss im Abschnitt" Mixin and Model ", damit wir sicherstellen können, dass das Designsystem der Website befolgt wird. Auf diese Weise hat jemand, der später zum Build zurückkehrt, einen wichtigen Referenzabschnitt, um die Design- und Markenregeln zu beschreiben. Wenn Sie viele Websites in ungefähr dem gleichen Markt aufbauen und aufbewahren - müssen Sie jedoch sicherstellen, dass Sie sicherstellen, dass eine Marke nicht mit einer anderen verwechselt wird! Wie bei Schriftarten werden die Farbregeln aus den Teilen abstrahiert. In unserer Datei _header.scss -Datei konzentrieren wir uns im Wesentlichen nur auf das Layout (so weit wie möglich).

Angesichts der Tatsache, dass wir uns damit einverstanden erklären, unser Mixin immer für thematisch zu verwenden, ist dies so, wie wir es in das Element aufnehmen können:

 <code>@include var($property, $value);</code>

Wir werden dann ein Themenmodell einrichten, das zeigt, wie die Farbe auf dieser bestimmten Website funktioniert, und es auf die Komponenten anwenden:

 <code>@include theme;</code>

Hier ist das Beispiel -Themenmodell, das wir mit diesem Seitentitel verwenden werden. Es ist sehr einfach.

Wir kombinieren die Farbe mit Schwarz oder Weiß. Wir verlassen uns auf Kontrastregeln und drehen sie für den Schwerpunkt auf, wahrscheinlich auf Ereignisse (wie z. B. schweben) oder hervorgehobene Handlungsaufrufe. Das ist alles, was wir tun müssen, um dies zu erreichen, und jetzt haben wir Unterlagen darüber, wie Farben auf dieser Website tatsächlich funktionieren. Wenn wir die Benutzeroberfläche debuggen oder erweitern müssen, können wir zugreifen und überprüfen.

Wir möchten auch die Erbschaft vorbereiten, um uns zu helfen. Lassen Sie uns daher einige nützliche Konventionen identifizieren:

• Stellen Sie die Füllung des SVG-Symbols auf CurrentColor in Ihrer Pipeline ein (die Standardgröße in CSS ist übrigens width: 1em; height: 1em; font-size: inherit; ).
• An der Basis einrichten<a></a> für currentColor.
• Schreiben Sie Abkürzung, Erbenränder (wie 1px solid oder 1px solid currentColor ).

Mit diesem Themenmodell können wir eine beliebige Anzahl von Themen generieren, sie möglicherweise als Dienstprogrammklassen speichern oder die Modifikatorliste innerhalb der Komponente durchlaufen, oder erlauben dem Benutzer einfach, Variablen direkt auf Blöcken im CMS festzulegen. Wenn IE 11 weniger als 1% unserer Statistiken ausmacht, können wir mehr mit Variablen tun, aber das reicht für unsere aktuelle Verwendung aus.

Lassen Sie uns nicht vom Thema abweichen. Wie wäre es mit Gitter? !

Inhaltskomponenten

Mit Grid können wir genau beschreiben, was wir in jedem Abschnitt auf neue Weise haben . Dies ist wirklich ein Game-Changer für die Designagentur, die für jedes Projekt eine neue Benutzeroberfläche erstellt, und während wir erforschen, entdecken wir neue (und interessante) Anwendungen davon.

Um einen Kontext bereitzustellen: Wir verwenden Craft CMS, um jede Schnittstelle für unsere Kunden anzupassen und benutzerdefinierte Felder zu erstellen, um ihre spezifischen Anforderungen und ihr Inhaltsmodell zu erfüllen. Wir haben interne Tools, mit denen Ereignisse aus der Ticket -API extrahieren und Einträge daraus erstellen können, die dann im CMS bearbeitet und erweitert werden können (oder vollständig erstellt). Kunden können benannte Fields im permanenten Seitenbereich ausfüllen oder bearbeiten und auch den gesamten entworfenen Markenblock zum Layout jeder Seite hinzufügen, während sie sie erstellen.

Es gibt viele UIs. Kunden haben viel Kontrolle über den Inhalt, und wir haben viel Kontrolle über HTML, sodass wir sicherstellen können, dass auf der Seite hochwertige semantische Code zugänglich ist. Während des Erkennungsprozesses entwickeln wir gemeinsam Inhaltsmodelle und lassen sie dann Inhalte frei erstellen. Sie fügen hinzu, was sie wollen, und wir stellen sicher, dass es funktioniert und sieht immer richtig aus. Besser als richtig! super . (Entschuldigung!: P)

Als Entwickler muss ich also konkurrierende Prioritäten abwägen:

• Zugänglichkeit, Verfügbarkeit
• Branding und Grafikdesign
• Leistung
• Wartungs- und Codebasisgesundheit

Schauen wir sie uns nacheinander an:

Zugänglichkeit

Zugängliches, logisches HTML ist mein Favorit. Zumindest muss mein Projekt im Leuchtturm eine grüne Zugänglichkeitsbewertung erzielen. (Ich mache Witze, ich möchte, dass köstliche 100!) Kernpfade und Seiten mit einigen Bildschirmlesern (Registerkarten Tastatur, Tastaturnavigation), Low -Seh -Simulator, Dasher, Sprachzugriff und Binärschalter getestet werden. (Ich arbeite auch für Roboter und Kuchen, also ist es ein großer Teil meiner Entwicklungsarbeit.) Ich habe immer wieder große klickbare Telefonnummern und E -Mail -Adressen auf die Seite hinzugefügt. Ich möchte nur, dass die Leute dorthin kommen, wo sie gehen wollen.

Ich habe mir Sorgen darüber gemacht, wie der Inhalt durch Raster (und Flexbox) neu bestellt werden kann. Jetzt, da ich mehrere Builds durchgeführt habe, kann ich tatsächlich denke, dass Grid uns helfen kann, dieses Problem zu lösen. Bei CSS -Gitter gibt es keinen Grund, HTML für das Layout zu bewegen. Wir können zu linearen Sequenzen zurückkehren, die das gesamte Dokument als Logik als unser Hauptanliegen behandeln.

Marke und Leistung und Wartung

Kunstveranstalte erfordern hoch) Grafikdesigns, einheitlich in Drucken und Web und das ständig ändernde Materialien (wie Programme, Handbücher, Tickets, Plakate, Mikro-Websites usw.), um an ihre Zielgruppen zu verteilen, einschließlich Vertragsmarketingpflichten, die erfüllt werden müssen. Wie Sie sich vorstellen können, haben wir viele hochwertige große Bilder, die vorrangige Verarbeitung benötigen und oft mit einer starken Druckmarke ausgestattet sind. Dies bedeutet, dass wir der Seite möglicherweise etwa fünfzehn benutzerdefinierte Schriftarten (einschließlich Dicke, Variationen, Anzeigen von Schriftarten usw.) sowie komplexe CSS bereitstellen müssen. Wir müssen uns so stromlinienförmig wie möglich halten. Wir senden derzeit ungefähr 20 KB Nano GZIP -CSS, aber ich arbeite daran, es weiter zu reduzieren.

Wir behalten jedoch die gesamte Länge des Namens der Gitterregion bei, indem wir die Reduzierung der Kennung in der PostCSS -Aufgabe auf False festlegen. Die verfügbaren Layout -Diagramme in Devtools sind nützlicher als das Speichern dieser kleinen Mengen von Bytes. Für die Aufrechterhaltung, Selbstdokumentation und Ihre zukünftige Selbstentwicklung dieser Website ohne Repo-Zugang zu einem verzögerten Zug in Sowerby Bridge: Halten Sie die Karte.

Codegesundheit

Der Weg, all diese konkurrierenden Bedürfnisse auszugleichen, besteht darin, eine Vereinbarung zu artikulieren und zu treffen, damit weniger Inhalte im Test festgelegt werden müssen und dass die gelösten Probleme behoben bleiben . Wir überprüfen alle Komponenten, die wir erstellen, und stellen sicher, dass sie immer mit dem Titel beginnen, Links verweisen auf den Standort, Tasten auslösen Aktionen, zählbare Objekte, die als Listen geliefert und mit Landmark -Titeln vorangestellt werden, Navigation ist<nav></nav> , Zeit ist<time></time> , Div -Suppe ist Frühstück - Grundlagen.

Bei CSS -Gitter gibt es keinen Grund, HTML für das Layout zu bewegen. Ihr Inhalt kann immer logisch fließen, während Layoutänderungen in CSS auftreten. Und da keine Margen oder Polsterung erforderlich ist, um einen Abstand zu schaffen, können Sie einfach erklären:

 <code>.o-grid .o-grid { width:100%; }</code>

… Um sicherzustellen, dass eine beliebige Anzahl verschachtelter Gruppen visuell das gleiche Seitenraster belegen. HTML kann die Dinge klarer leiten: näher an Dokumenten.

Es gibt eine Menge zu verwalten zwischen dem Titel und der Aktion, und meine Herausforderung besteht darin, all diese Felder in all diesen Komponenten zu verfolgen und gleichzeitig sicherzustellen, dass ich die Entwurfsspezifikationen treu ausführe, damit sie auf logische, verständliche Weise durchquert werden, sanierbar, linearisierbar und leicht zu lesen sind.

Lassen Sie uns meine erste, überraschend nützliche Rastermischung vorstellen.

 <code>@mixin template($elements...) { @each $element in $elements { &__#{$element} { grid-area: $element; } } }</code>

Wenn Sie dieses Mixin überall verwenden, bedeutet dies:

1. Jeder Komponentenabschnitt beginnt nun mit seiner Liste aller möglichen Elemente, was eine sehr praktische Dokumentation darstellt, insbesondere wenn das Zweifel tatsächlich Front-End-Komponenten tadelt.
2. Das Mixin ist für die Zuweisung von Gitterflächen verantwortlich.
3. Element- und Komponentennamen bleiben in Skizze, CSS und HTML konsistent, und alle Inkonsistenzen sind sehr offensichtlich, da das Layout fehlschlägt. Ich bin fest, aber fair.
4. BEM -Benennung wird automatisch erzwungen, macht aber die Dinge im Abschnitt nicht durcheinander.

Jetzt, im Abschnitt, deklarieren wir nur Grid-Template-Areas mit einfachen englischen Wörtern und geben uns eine Reihe von Layoutkarten, die auch den Datenbankfeldern übereinstimmen. Super einfach zu lesen!

Hier ist ein Beispiel für die Verwendung dieses Mixins:

Wir haben uns entschlossen, mich bei den genannten Regionen für interne Netze zu halten, da ich einen großartigen Artikel auf dieser Website gelesen habe, in dem er erklärt, wie Autoprefixer das IE 11's Grid mit den aufgelisteten unterstützten Eigenschaften hält - und dies in den meisten Fällen. Wenn Sie diesen Testfall mit dem super nützlichen Debug -Modus mit autoprefixer in Ihrem Browsertest anzeigen, werden Sie sehen, wie er funktioniert.

Aber es gibt Fallen! Sie müssen die Inline -Elemente als Blöcke einstellen, um sicherzustellen, dass sie immer als Netzeinheiten in IE 11 wirken. Kommentieren Sie die Markierungslinie im Beispiel, um zu sehen, was sonst noch passieren würde:

Autsch! Achten Sie auf diese Stücke. Möglicherweise stellen Sie fest<div> Tags… seufz.<p> Ich habe nicht <code>display: grid in diesem Mixin, da das eigentliche Raster beispielsweise in einigen Fällen auf dem internen Container festgelegt ist, aber wir möchten immer noch, dass Grid-Areas mit der richtigen BEM-Klasse übereinstimmt.

Also:

 <code>.c-header{ @include template(title, pretitle, posttitle, producer, venue, credit, quote, nav, infobar, search); }</code>

Lassen Sie uns diese Dinge auslegen.

Layout

Lassen Sie uns einige zusätzliche Regeln identifizieren, um sicherzustellen, dass diese Komponente problemlos in das Seitenlayout gleiten kann. Zum Zeitpunkt des Schreibens gibt es keine Sub-Gitter (aber es wird!), Daher kennt diese Komponente das übergeordnete Netz nicht. Dies entspricht dem BEM -Komponentenansatz gut - da jede Komponente flach und isoliert ist, um die Vererbung zu begrenzen. Ich befürworte BEM hier nicht (oder den Bem -ish, den wir offensichtlich verwenden) - ich sage nur, wenn Sie es bereits verwenden, ist dies ein zusätzlicher Bonus.

In diesem Beispiel richtet der Designer ein Seitenlayout mit 12 Spalten mit Gitter und 20px (1,25REM) ab, ohne dass innerhalb der gesamten Site Teile versetzte Teile. Unsere Komponente ist ein Seitenbereich, der alle 12 Gittersäulen besetzt. Während dieser Übergangszeit verwenden wir immer noch diese Art von Setup -Netz, da wir viele Systeme haben, die immer noch auf dieser Idee basieren, in die integriert werden müssen. Daher ist dies die Konvention unter dieser Bedingung: Löschen Sie für Bereiche in voller Breite die Gitterspalte und schreiben Sie die Netzvorlage in eine fraktionelle Einheit (FR) von 12.

Dies bedeutet:

1. Der Anblick dieses inneren Netzes folgt ungefähr dem Netz, in dem es sich befindet.
2. Die zugrunde liegenden Designregeln im Code einfach anzeigen; Und
3. Es ist leicht, die Dinge bei Bedarf genau auszurichten.

Schnelle Notizen zur Ausrichtung

Warten Sie ... was meine ich mit "exakter Ausrichtung"? Ist es nicht schon genau ausgerichtet?

Nun, nein. Die Methode der fraktionalen Einheit unterteilt den Raum perfekt, sodass Sie in den Abstand landen. Zwei gleichmäßige Spalten bringen Sie in die Mitte des Abstands. Zwei Säulen, deren eine Spalte 2/3 und die andere 1/3 ist, werden bei 1/3 dieses Abstands usw. geteilt.

Die Festlegung der Ausrichtung ist nicht schwierig, da wir die Breite des Seitengitterabstands kennen. Zum Beispiel können wir bei gleichmäßiger Segmentierung Rasterlücken einbeziehen.

Wir können dies jedoch mit einer anderen Segmentierung nicht tun. Wir können diese Lücke als Rand hinzufügen - unabhängig von der Boxgröße, die Sie festgelegt haben, wird der Rand intern hinzugefügt. In diesem Beispiel haben wir drei Spalten (zwei benannte Bereiche und einen leeren Raum), die unseren Abstand in drei Teile unterteilen:

So berechnen Sie diese Margen: Stellen Sie sicher, dass die Summe der FR -Einheiten 12 beträgt. Teilen Sie den Gitterlücken durch die Anzahl der Spalten im übergeordneten Gitter und multiplizieren Sie sie wie folgt:

Der rechte Margin -Multiplikator von N entspricht der Summe der FR -Einheiten auf der rechten Seite von n. Der linke Rand von N entspricht der Summe der FR -Einheiten auf der linken Seite von n.

Daher beträgt der Wert für grid-template-columns 2fr 3fr 2fr 4fr 1fr :

<code> 2 3 2 4 1 0/10 2/7 5/5 7/1 11/0</code>

Wenn Sie häufig calc() schreiben, können Sie es sogar als Mixin schreiben. Hier finden Sie beispielsweise, wie Sie das innere Gitter mit dem übergeordneten Netz ausrichten können:

... Und hier ist, wie Sie die Margen automatisch berechnen, wenn der Name intern angegeben ist, die Zahl jedoch außerhalb des Netzes angegeben ist:

Ich glaube, Sie können sich andere Lösungen wie das Wechsel zu den genannten Zeilen oder beim Hinzufügen von Spalten mit extra fester Breite oder sogar alle Karten mit 12 benannten Bereichen pro Zeile vorstellen. Es gibt viele Möglichkeiten, damit umzugehen, aber ich denke, viele Methoden beseitigen die Vorteile benannter Regionen. Der Bereich bietet uns ein lesbares Layout -Diagramm mit dem, was unser zukünftiges Selbst wissen muss. Es ist Code als Dokumentation.

Um klar zu sein, ist das Designproblem, das ich zu lösen habe, nicht das Ausrichtungsproblem. Mit Grid ist die Ausrichtung einfach. Das Problem besteht nicht darin, das direkte, triviale Layoutproblem zu lösen, sondern es auf eine Weise zu lösen, die unser Ziel unterstützt, d. H. In sechs Monaten verstehen kann:

1. Welche Elemente sind in der Komponente enthalten.
2. Wie sie angelegt werden.
3. Warum wird der Code so geschrieben?

Die Netzspezifikation ist riesig und kann sich leicht in den Optionen verlaufen. Vielleicht wäre es ein besserer Plan, auf ein 12-Spal-Netz zurückzutreten und eine numerische Spezifikation zu verwenden, wenn eine absolute Ausrichtung erforderlich ist (d. H. Explizit Verknüpfung mit unserem Seitenraster, das eine numerische Spezifikation verwendet)-aber ich habe das Gefühl, dass es eine schlauer, einfachere Lösung gibt, die entdeckt werden muss. Für diese Website haben wir .o-page-grid\_\_sidebar der Klasse ein Seitengitterobjekt geschrieben und verschachtelte interne Gitterzellen hinzugefügt:.

Was denken Sie? Ich habe definitiv eine andere Sichtweise darauf voraus. ? ‍♀️

Echtes Stromnetz!

Wir können es verwenden, um einen gemeinsamen Seitentitel zu erstellen:

Alternativ können wir eine Variation der Homepage erstellen:

Was ist also mit einem Heldentitel, der über unseren Container hinausgeht? sicherlich! Oder wir können es außerhalb des Behälters zur Verfügung stellen:

Was kommt als nächstes? Ein Themen -Ereignis -Titel mit einer Informationsleiste mit vollständiger Breite (Einfügen) und einer internen Taste, die mit der Seitenleiste auf dem übergeordneten Netz ausrichtet? Das stimmt. Ich werde ein übergeordnetes Netz einfügen, damit es einfacher zu sehen ist:

Was ist also mit Suchanfragen mit zentrierter Ausrichtung? Verwenden wir die Faltspalten -Technik:

Hier finden Sie eine Demonstration all dieser Variationen als einzelner Abschnitt. Ja, es ist eine Karte! Es ist eine Verpackung!

Zustimmen

Wow, wir decken viel ab! Aber Sie können sehen, wie flexibel und selbstdokumentiert ein System wie dieses ist, oder?

1. Schriftarten werden von separaten Schriftsystemen verarbeitet.
2. Die Farben werden durch einen Themenabschnitt verarbeitet, der die zugrunde liegenden Farbregeln des Designs beschreibt, anstatt einfach die Elemente vorübergehend zu beschatten.
3. Elemente werden als so bezeichnet, wie sie sind, in englischer Sprache, und sind im Template -Mixin oben im Abschnitt enthalten. Diese Liste kann als Referenz in Zweig oder in einer Vorlage aufgenommen werden.
4. Verwenden Sie immer das richtige HTML und das Nisting brechen nicht das Netz. Dies bedeutet, dass Sie eine beliebige Anzahl verschachtelter Netze auf denselben Layout -Bereich anwenden können, indem Sie Konventionen festlegen.
5. Genauige Ausrichtung erfolgt in der numerischen Spezifikation, nicht in der Namensspezifikation (jedoch beachten Sie, dass Sie die Namensspezifikation für die Ausrichtung verwenden können).
6. Unterstützt IE 11.

Ich habe auch eine kurze Beschreibung und ein weiteres Beispiel für Komponenten, die mit den benannten Regionen erstellt wurden. In diesem Beispiel ist die Karte kein Bereich, sondern eine Komponente, die im Raster platziert ist. Daher gibt es keinen Grund, die FR -Konvention von 12 zu verwenden. Der Abschnitt Medienobjekt, den Sie erwarten können, lautet wie folgt:

 <code>.c-card { &--news { align-content: start; grid-template-areas: "image" "datetime" "title"; } &--search { justify-content: start; grid-template-columns: 1fr 3fr; grid-template-areas: "image page" "image title" "image summary"; } &--merchandise { grid-gap: 0; grid-template-columns: $b 1fr 1fr $b; grid-template-areas: "image image image image" ". title title ." ". summary summary ." ". price action ."; } &--donations { // donations thanks button is too long and must take up more space than input grid-gap: 0; grid-template-columns: $b 1fr 2fr $b; grid-template-areas: "image image image image" ". title title ." ". summary summary ." ". input action ."; } } // ...</code>