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>