Erstellen Sie mit Material Design Lite eine statische Site
Material Design Lite ist ein Frontend Website-Vorlage Auf diese Weise können Sie Ihren Projekten auf einfache Weise ein Material Design-Erscheinungsbild hinzufügen. MDL wurde für statische Websites entwickelt, da wir wollten, dass es Framework- und Toolset-unabhängig ist. Dies bedeutet jedoch nicht, dass Sie es nicht für Ihre eigenen anpassen können Website-Layout Bedürfnisse - MDL ist nur der Ausgangspunkt. In diesem Tutorial erstellen wir eine einfache Portfolio-Website mit einem Blog, einem Abschnitt 'Über' und einem Kontaktformular.
Erstes HTML-Setup
Erstellen Sie zunächst eine leere HTML-Seite und fügen Sie im Dokument Tags zur Schrift Roboto, zur MDL-CSS-Datei und zur Schriftart des MD-Symbols hinzu, beginnend mit dem Schriftarten-Stylesheet.
Fügen Sie als Nächstes das MDL-CSS-Dokument hinzu, das alle verwendeten Stile enthält.
Die Material Design-Farbschemata basieren auf einer Primärfarbe und Akzentfarben. Diese werden im CSS-Dateinamen wie folgt angegeben: Material. {Primary} - {Akzent} .min.css. Unser CDN bietet eine Reihe von Kombinationen, die auf gängigen Material Design-Farben basieren. Hier haben wir Grau und Pink verwendet:
Für einige Komponenten sind Symbole erforderlich. Fügen Sie daher auch hier einen Link dazu hinzu.
Die letzte Datei, auf die verlinkt wird, ist die JavaScript-Datei. Dies sollte am Ende unserer HTML-Seite unmittelbar vor dem schließenden Tag hinzugefügt werden.
Schließlich müssen wir das Ansichtsfenster-Tag in unsere Seite aufnehmen, damit mobile Geräte korrekt gerendert werden.
MDL-Layout-Komponente
MDL besteht aus verschiedenen Komponenten, die gemeinsam oder einzeln verwendet werden können. Das Layout wird als Komponente betrachtet, die an Ihre Bedürfnisse angepasst werden kann und sich automatisch an verschiedene Browser, Bildschirmgrößen und Geräte anpasst.
Die Grundstruktur einer Seite hat eine mit den CSS-Klassen mdl-layout und mdl-js-layout. Diese Klassen enthalten alle Daten auf der Seite. Fügen Sie im Hauptcontainer ein Tag für die Navigation mit einer mdl-layout__header-Klasse hinzu. Schreiben Sie abschließend eine mit einer mdl-layout__header-Zeile, die den Header-Inhalt enthält.
Fügen Sie als Nächstes Inhalt zu mdl-layout__header-row hinzu. Erstellen Sie zunächst ein div mit einer mdl-layout__title-Klasse und fügen Sie den Website-Titel hinzu. Fügen Sie dann ein Navigations-Tag mit einer MDL-Navigationsklasse hinzu und fügen Sie hier ein href-Tag für jeden Ihrer Links hinzu. Jeder Link benötigt eine MDL-Navigationsklasse.
Simple portfolio website Portfolio Blog About Contact Beachten Sie, dass die Navigation links neben dem Titel ausgerichtet ist. Wenn Sie möchten, dass es rechts sitzt, fügen Sie einen Abstandhalter zwischen Titel und Navigation ein.
Zuletzt fügen wir die Layout-Schublade hinzu. Dadurch wird der herausziehbare Inhalt gespeichert, der auf kleineren Bildschirmen angezeigt wird und mit dem Menüsymbol auf jeder Bildschirmgröße geöffnet werden kann. Dafür replizieren Sie so ziemlich das, was wir in der Navigation haben, außer dass der Abstandshalter jetzt außerhalb des Tags sitzen muss.
Simple Layout Portfolio Blog About Contact Wenn Sie bereits Inhalte auf der Seite haben, werden Sie feststellen, dass auf mobilen Bildschirmen die Schubladenschaltfläche über dem Inhalt schwebt. Auf diese Weise können Entwickler definieren, wie viel Rand / Abstand über dem Inhalt angezeigt wird. Um den Inhalt nach unten zu verschieben, müssen Sie MDL mitteilen, dass der Header repariert werden muss, indem Sie dem anfänglichen Container die Klasse mdl-layout - fixed-header hinzufügen.
Um die Seite fertigzustellen, müssen Sie ein Tag hinzufügen, das den gesamten primären Inhalt enthält. Die Grundstruktur sollte folgendermaßen aussehen:
Hello world!
Die Gitterkomponente
Das MDL-Raster wurde entwickelt, um den üblichen Codierungsaufwand für das Layout von Inhalten für mehrere Bildschirmgrößen zu verringern. Das Raster wird definiert und in ein Containerelement mit der CSS-Klasse mdl-grid eingeschlossen. Es verfügt über 12 Spalten für den Desktop, acht für Tablets und vier für Mobilgeräte, wobei jede Größe vordefinierte Ränder und Dachrinnen aufweist.
Um das Raster zu verwenden, fügen Sie in Ihrem Inhaltscontainer ein Element mit der angehängten mdl-grid-Klasse hinzu.
Hello world!
Die Zellen / Spalten werden innerhalb des Rasters definiert. Hier können zwei CSS-Klassen hinzugefügt werden: die allgemeine Zellklasse mdl-cell und die mdl-cell - COLUMNS-col-Klasse, wobei COLUMNS die Zellenbreite angibt.
Hello world!
Cell 1 Cell 2 Cell 3 In diesem Beispiel die erste Zeile 'Hallo Welt!' ist in voller Breite (12 Spalten) und die zweite Zeile hat vier Zellen (drei Spalten). Diese zweite Zeile bleibt als Drei-mal-Drei-Spalten-Raster erhalten, bis sie weniger als 480 Pixel erreicht.
Sie können hier Geräte mit bestimmten Klassen als Ziel festlegen, indem Sie die Klasse mdl-cell - COLUMNS-col-DEVICE hinzufügen. Wenn Ihr Tablet-Layout einem Desktop-Layout ähneln soll, sollten Sie diese Klassen hinzufügen, damit die letzten beiden Zellen als zwei Spalten mit einer vollen Breite davor angezeigt werden:
Cell 1 Cell 2 Cell 3 Fusszeile
Es gibt zwei Arten von Fußzeilen: eine Mega- und eine Mini-Fußzeile. In diesem Beispiel verwenden wir eine Mini-Fußzeile mit einer Inhaltsstruktur aus linken und rechten Abschnitten mit jeweils CSS-Klassen (mdl-mini-footer__left-section bzw. mdl-mini-footer__right-section). Im Inneren haben wir eine für unser Logo / Titel und eine für unsere Linkliste, die als Zeile angezeigt wird.
Wo wir die Fußzeile in das Markup einfügen, hängt vom gewünschten Effekt ab. Wenn wir möchten, dass die Fußzeile repariert wird, müssen wir sie nach dem Tag hinzufügen. Wenn wir möchten, dass es nach unserem Inhalt gescrollt und angezeigt wird, fügen wir es dem Tag hinzu.
Portfolio website Layout anpassen
Sie können das Layout anpassen, indem Sie den mdl-layout__drawer auf dem Desktop ausblenden. Fügen Sie dazu dem Schubladencontainer die mdl-layout - Klasse nur für kleine Bildschirme hinzu. Entfernen Sie anschließend den mdl-layout-spacer aus dem. Um den Titel und die Navigation zu zentrieren, platzieren Sie das Navi in einer eigenen mdl-layout__header-Zeile und schreiben Sie dann ein benutzerdefiniertes CSS.
.mdl-layout__header-row { padding: 0; justify-content: center; }Um die Navigation beim Scrollen auf der Seite auszublenden, können Sie jetzt eine Wasserfalltechnik auf die anwenden, indem Sie der Klasse mdl-layout__header - waterfall hinzufügen. Auf diese Weise können sich Benutzer ausschließlich auf den Inhalt konzentrieren (denken Sie daran, dass dies nur funktioniert, wenn genügend Inhalt zum Scrollen vorhanden ist).
Die endgültige Struktur sollte folgendermaßen aussehen:
Simple Portfolio Layout Portfolio Blog About Contact Die Kartenkomponente
In diesem Beispiel werden auf der Portfolio-Seite alle Entwurfsarbeiten über MDL-Karten angezeigt. Die Kartenkomponente ist ein virtuelles Blatt Papier, das Text, Bilder und Links enthält.
Das Standardraster für MDL ist drei Karten hintereinander für den Desktop, zwei für das Tablet und eine für das Handy in voller Breite. Wenn dies das Raster ist, nach dem Sie suchen, müssen Sie keine mdl-cell - COLUMNS-col nummerierten Klassen hinzufügen. Wir können diese Spaltenzellenklassen sogar ohne separaten Container direkt auf die Karten hinzufügen.
Verwenden Sie mdl-shadow - 2dp class, um einen Schatten für die Karte hinzuzufügen. Die dp-Zahl in der Klasse reicht von 2 bis 24 und steuert die Tiefe des Schattens.
Example Title
Text Read more Um dem Raster eine maximale Breite hinzuzufügen, müssen Sie etwas mehr benutzerdefiniertes CSS hinzufügen. Die Karten reagieren standardmäßig, sodass Sie die Klasse zum übergeordneten Raster hinzufügen können und sie automatisch angepasst werden.
.portfolio-max-width { max-width: 900px; margin: auto; }Einzelne Seiten
Für die einzelnen Portfolio-Seiten können Sie dieselbe Kartenkomponente wie zuvor mit Zellen voller Breite verwenden. Im folgenden Code gibt es ein zusätzliches Raster für die Kopie und die Bilder, um jeden Abschnitt aufzuteilen, und ein Dienstprogramm ohne Auffüllen, um unerwünschten Speicherplatz zu entfernen.
Introduction
Text
Verwenden Sie die Tooltip-Komponente, um jedem Beitrag Schaltflächen für soziale Freigaben hinzuzufügen. Die IDs sollten eindeutig sein, da sie für jeden Tooltip auf den Container verweisen.
share Share your content
via social media Die letzte Seite ist das Kontaktformular. Schauen wir uns die Textfeldkomponente an, die im Wesentlichen eine erweiterte Version von und ist. Es gibt einige Übergänge, die Sie auf das Textfeld anwenden können (z. B. Erweitern der Eingabe, wenn eine Taste gedrückt wird). Sie können der und der zugehörigen Fehlermeldung in a auch ein Musterattribut und einen Wert hinzufügen.
Name... Letters and spaces only Die letzte Komponente ist eine Schaltfläche für das Formular. Es gibt viele Variationen dieser Komponente, einschließlich erhöhter, Symbol- und flacher Schaltflächen. Hier haben wir einen einfachen, erhöhten Submit-Button, der beim Drücken einen Ripple-Effekt zeigt. Die verschiedenen Klassen geben die mit der Schaltfläche verbundenen Effekte an.
Submit FERTIG
Nachdem Ihr Layout fertig ist, können Sie damit beginnen, bestimmte Designelemente hinzuzufügen. Alternativ können Sie zuerst ein neues Layout skizzieren und versuchen, es mithilfe des Rasters neu zu erstellen. Auf der MDL-Website finden Sie eine Reihe von Vorlagen, auf die Sie verweisen können. Es gibt viele Utility-Klassen auf der getmdl.io Website für jede Komponente, überprüfen Sie diese also zuerst, bevor Sie mit dem Schreiben Ihres eigenen benutzerdefinierten CSS beginnen. Jetzt loslegen!
Der Autor hat zu diesem Tutorial einen exklusiven Screencast erstellt:
Dieser Artikel erschien ursprünglich in Ausgabe 277 des Netzmagazins; Abonnieren Sie hier .
Zum Thema passende Artikel:
- Steve Fisher zeigt, wie man Design- und Content-Sprints durchführt
- Erstellen Sie Produktsymbole in Illustrator
- Der Überlebensleitfaden des UX-Designers
