Material Theming: Machen Sie Material zu Ihrem Eigenen!

Das Web ist ein wunderschönes, ausdrucksstarkes Medium, das sich im Laufe der Zeit mit veränderten Trends und Technologien weiterentwickelt hat. Momente der Freude und des Flairs sind es, die Unternehmen voneinander abheben. Gleichzeitig setzen die Top-Produkte von heute auf skalierbare, komponentenbasierte Designsysteme, um eine kohärente Marke effizient zu entwickeln. Und es ist wichtiger denn je, Barrierefreiheit und eine solide Benutzererfahrung von Anfang an zu integrieren! Aber diese beiden Welten – kreatives Webdesign und systematisches Webdesign – müssen sich nicht im Streit gegenüberstehen. Im schönen, klebrigen Zentrum der Webdesign-Welt finden wir einen Weg, kreatives Webdesign mit unseren Systemen zu verschmelzen, und glücklicherweise können Sie beides haben!

Eines dieser Designsysteme heißt Material Design (das Team, dem ich gerade bei Google beigetreten bin!). Material basiert auf jahrelanger Forschung und Best Practices, um Designern und Entwicklern den Zugriff auf die Erstellung schöner, barrierefreier UIs mit dem geringstmöglichen Aufwand zu ermöglichen. Aber bei der ersten Einführung fehlte eine Sache in der Gleichung: die Fähigkeit, die Persönlichkeit einer Marke auf eine einfach zu implementierende Weise auszudrücken. Das Team hörte zwei wichtige Rückmeldungen

1. Material war stilistisch nicht flexibel genug, um den Bedürfnissen aller Produkte, Marken und Benutzer gerecht zu werden.
2. Es war nicht einfach genug, Markenerlebnisse systematisch über Produkte hinweg anzuwenden und aufzubauen.

Und seit letztem Jahr (speziell I/O 2018) hat Material neue Theming-Funktionen angekündigt! Theming ermöglicht es Entwicklern und Designern, von allen Teilen von Material zu profitieren, die es zu einem erstklassigen Designsystem machen – und es zu ihrem eigenen zu machen! Mit anderen Worten: Sie können das Aussehen und Gefühl von Material Components anpassen, indem Sie globale Änderungen an Farbe, Form und Typografie Ihres Produkts vornehmen.

Material Components sind für mehrere Systeme wie Android, iOS und Flutter konzipiert, und wir werden uns für diesen Beitrag auf das Web konzentrieren (dies ist schließlich CSS-Tricks). Beginnen wir mit einer Basis-Login-Vorlage unter Verwendung von Material Components für das Web, um zu sehen, wie einfach es sein wird, ein Theme darüber zu implementieren

Über Theming

Die aktuellen Theming-Implementierungen ermöglichen Anpassungen von Farben, Typografie und Formen, die sich auf jede Komponente Ihres Produkts auswirken. Diese drei Untersysteme klingen vielleicht nicht nach vielen Optionen, aber zusammen haben sie einen großen Einfluss auf das Design und sind ein großartiger Ausgangspunkt für weitere Designänderungen auf granularerer Ebene.

Farbe

Die erste thematisierbare Option ist Farbe. Es gibt einen großartigen Farbwähler-Tool auf Material.io, mit dem Sie Kontraste sehen und Ihren Farbauswahlprozess unterstützen können. Da dies CSS-Tricks ist, schreiben wir etwas CSS (okay, eher SCSS), um mit einem Beispiel zu beginnen. Mit wenigen Codezeilen in unserer Datei my-theme.scss können wir das Aussehen und Gefühl dieser Login-Seite komplett verändern

Wir haben festgelegt

$mdc-theme-primary: #26418f;
$mdc-theme-secondary: #d1c4e9;
$mdc-theme-background: #fdf6f9;

Obwohl wir kein $mdc-theme-on-primary angegeben haben, weiß das System, dass es dies nun weiß macht (unter Verwendung einer Sass-Kontrastfunktion), um uns zu helfen, zugängliche Farbkontraste sicherzustellen. Wir können auch die Textfarbe auf den primären und sekundären Themes mit $mdc-theme-on-primary und $mdc-theme-on-secondary überschreiben. Wenn jedoch kein Wert explizit festgelegt ist, sind diese schwarz oder weiß, basierend auf dem Hintergrund. Sehen Sie sich den Farbwähler für weitere Informationen an.

Typografie

Material richtet eine Basis-Typografie-Skala ein, die mit Theming angepasst werden kann. Sie können die Typografie für jede einzelne Überschriftenebene anpassen und sie auf zwei Arten in Ihrem Produkt anwenden

1. Verwendung von CSS-Klassen zum Anwenden der Stile. D.h. <h1 class="mdc-typography--headline1">
2. Verwendung von Mixins, um die Stile einer Header-Komponente auf eine andere zu erweitern (d.h. h1 {@include mdc-typography(headline1);}). Ein Beispiel dafür finden Sie in unserem Starter-Kit-Beispiel auf Glitch.

Eine schnelle Möglichkeit, die Schriftart zu ändern, ist die Verwendung von Google Fonts – ein wirklich schönes Verzeichnis kostenloser Webfonts. Wir machen es uns einfach und wählen eine Google-Schriftart namens Josefin Sans. Um diese in unserem Projekt zu verwenden, müssen wir sie importieren und können dann die Basistypografie so einstellen, dass sie diese verwendet

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
$mdc-typography-font-family: unquote("Josefin Sans, sans-serif");

Wir verwenden hier unquote, da die Typografie in Material in einer Map festgelegt ist. Wir können weitere Stile wie folgt festlegen

$mdc-typography-styles-button: (
 font-size: 14px,
 font-weight: 600,
 letter-spacing: 0.05em,
);

Jetzt sieht unsere Login-Seite so aus

Form

Form ist eine weitere Möglichkeit, Ihren Code ausdrucksstark zu gestalten! Was meine ich mit Form? In Material beeinflusst die Form den Eckradius von Komponenten wie Schaltflächen, Karten und Sheets. Im Produktdesign hilft die Form, Ihre Marke zu definieren. Ist sie eckig und maschinenähnlich, oder ist sie abgerundeter und organischer? Das Ändern der Form wirkt sich auf den Rest des Systems aus. Hier sind einige Beispiele für Formen in Material

Das andere Coole an der Formgebung in Material Components ist, dass man nicht auf jeder Ecke die gleiche Form haben muss, oder sogar die gleiche Komponente bei unterschiedlichen Größen. In Material gibt es kleine, mittlere und große Komponenten, und Sie können unterschiedliche Stile für diese verschiedenen Komponententypen anwenden, und Sie können es mischen und jede Ecke einzeln in einer Leerzeichen-getrennten Liste von Werten festlegen, genau wie Sie es mit border-radius tun würden.

MDC Web unterstützt derzeit keine abgeschrägten Ecken wie die anderen Plattformen, da dies bei den aktuellen Webstandards eine nicht triviale Operation ist. Dies ist ein weiterer Grund, warum ich Houdini persönlich liebe und viel Einfluss darauf in der zukünftigen CSS-Entwicklung sehe!

In dem Beispiel, an dem wir arbeiten, haben wir sowohl große als auch kleine Komponenten. Die großen Komponenten sind die Texteingabefelder und die kleine Komponente ist die "Login"-Schaltfläche. Wir können ihnen unterschiedliche Formen geben mit

$mdc-shape-small-component-radius: 12px 4px;
$mdc-shape-large-component-radius: 8px;

Und siehe da! Wir haben unsere Anwendung in 12 Zeilen Code transformiert.

Themes, Themes, überall!

Jetzt kommt der Teil, in dem Sie kreativ werden. Es gibt so viele Möglichkeiten, Elemente aus Farbe, Typografie und Form zu kombinieren, um Ihre Marke wirklich hervorzuheben. Hier sind vier sehr unterschiedliche Beispiel-Apps, die Farbtheorie, Typografie und Form verwenden, um ihre Produkte zu differenzieren, die alle auf den grundlegenden Material Components basieren

Themes IRL

Google selbst passt die grundlegenden Material Components an und erweitert sie mit seinen eigenen Produkten. Dies wird als Google Material Theme bezeichnet und wurde von einer Reihe von Produktteams definiert, darunter Gmail, Google News, Google Play und Google Home

Aber sie sind nicht das einzige Unternehmen, das Material Design und seine Prinzipien nutzt. Einige Unternehmen haben Material Components auch in ihren eigenen groß angelegten Produkten erweitert.

Lyft, ein Fahrdienstleister, ist nur ein Beispiel. Sie nutzten eine erweiterte FAB-Komponente, um wichtige Aktionen hervorzuheben, und gestalteten sie mit einem Gradienten, um ihr ein einzigartiges Gefühl zu verleihen, mit dem die Benutzer dennoch vertraut waren. Lyft nutzte auch das Höhensystem von Material in seinem eigenen Produkt.

Anchor, eine kostenlose App, die Menschen hilft, Podcasts aufzunehmen, zu vertreiben und zu hosten, ist ein weiteres großartiges Beispiel dafür, wie man Material zu seinem eigenen macht. Sie zeigen ihre kräftige Farbpalette und integrieren sie mit Auswahl-Chips, um Display-Optionen abzugrenzen, eine Liste von Karten zur Inhaltsauswahl und eine erweiterte FAB, die am unteren Rand verankert ist, um für Benutzeraktionen dauerhaft verfügbar zu bleiben.

Loslegen

Jetzt haben Sie alles, was Sie brauchen, um Ihr eigenes Material Theme mit Material Components für das Web zu erstellen. Es ist einfach, Ihr Webprojekt mit unserem Material Starter Kit zu erstellen und Theming mit dem Build a Material theme Glitch-Projekt zu erkunden, das wir gerade veröffentlicht haben. Ändern Sie die Variablen in my-theme.scss, um zu sehen, wie sie die einzelnen Komponenten anpassen können. Öffnen Sie dann eine beliebige Vorlage, fügen Sie diese Variablen in die my-theme.scss ein und beginnen Sie mit dem Erstellen.

TL;DR: Wenn Sie dachten, dass Material Design in der Vergangenheit nichts für Sie war, ist jetzt eine großartige Zeit, um es zu erkunden. Viel Spaß beim Theming!