Eine praktische Einführung in das Material Design Lite durch Google

2014 veröffentlichte Google die Materialdesignspezifikation, eine visuelle Sprache, die darauf abzielt, solide Designprinzipien zusammenzustellen, eine konsistente Benutzererfahrung auf verschiedenen Plattformen und Geräten sowie technologische und wissenschaftliche Innovationen.

Juli 2015 Saw Google Release Materials Design Lite, eine Front-End-Bibliothek, die es einfacher macht

In diesem Artikel konzentriere ich mich auf die folgenden grundlegenden Prinzipien und Komponenten des Materialdesigns und wie Sie sie mit der MDL -Bibliothek (Materials Design Lite) implementieren können:

Typografie
Farbe
Layout
Karten

Key Takeaways

Materialdesign Lite (MDL) von Google ist eine Front-End-Bibliothek, die die Implementierung der Materialdesign-Ästhetik in Webprojekte vereinfacht und die Aufrechterhaltung einer einheitlichen Benutzererfahrung auf verschiedenen Plattformen erleichtert.
MDL kann mit dem CDN von Google für CSS und JavaScript -Dateien in Ihr Projekt integriert werden oder durch das Herunterladen und Hosting der Dateien selbst mit detaillierten Setup -Anweisungen für verschiedene Umgebungen, einschließlich Bower und NPM.
• verfügbar.
• Die Bibliothek bietet ein robustes Typografiesystem mit den Roboto- und Noto -Schriftarten, unterstützt eine Vielzahl von Skripten und Bereitstellung vordefinierter Klassen für die Anwendung konsistenter typografischer Skalen.
• MDL bietet ein anpassbares Farbsystem, mit dem Entwickler eine primäre und eine Akzentfarbe aus einer vordefinierten Palette auswählen können, wodurch die visuelle Attraktivität verbessert wird und gleichzeitig Usability -Richtlinien aufrechterhalten wird.
• Schlüssel -MDL -Komponenten wie Layout, Karten und Registerkarten sind reaktionsschnell und modular und nutzen Flexbox- und BEM -Methoden, um eine strukturiertere und skalierbare CSS -Architektur zu ermöglichen.

Das Demo -Projekt

Das Demo -Projekt für diesen Artikel heißt Kaptain Kitty. Es handelt sich um eine HTML -Vorlage, die veranschaulicht, wie Sie die Materialdesignkonzepte und MDL -Komponenten anwenden können, die ich in diesem Artikel auf eine Webseite diskutiere.

Wenn Sie beim Eintauchen in den Artikel Materialdesign Lite in die Luft setzen möchten, benötigen Sie Ihren bevorzugten Code-Editor und einen modernen aktuellen Browser.

Sie können das Demo -Projekt und seinen Quellcode auf CodePen anzeigen:

Siehe die Pen -Demo -Vorlage mit Materialdesign Lite von SitePoint (@sinepoint) auf CodePen.

Beginnen wir.

einschließlich Materialdesign Lite in Ihr Projekt

Wenn es darum geht, MDL in Ihr Projekt aufzunehmen, haben Sie die folgenden Optionen:

• Laden Sie die erforderlichen CSS- und JavaScript -Dateien mithilfe von [Google CDN] (Inhaltszustellungsnetzwerk).
• Laden Sie die Minimified CSS und JavaScript -Dateien herunter und hosten Sie sie auf Ihrem Server.
• Laden und erstellen Sie den Quellcode aus dem MDL -Projekt auf GitHub.
• Wenn Sie Bower zum Verwalten Ihres Projekts verwenden, können Sie den folgenden Befehl eingeben, um die MDL-Bibliotheksdateien im Ordner bower_components zu installieren: Bower Installation Material-Design-Lite-Save
• Wenn NPM Ihr Paket-Manager der Wahl ist, führen Sie den folgenden Befehl aus, um die MDL-Dateien im Ordner node_modules zu installieren: NPM Installieren Sie Materialdesign-Lite-Save

Google empfiehlt die Verwendung der auf dem CDN gehosteten CSS- und JavaScript -Dateien. Dies ist die Methode, die Sie auf der Demo -Seite für diesen Artikel finden.

Fügen Sie im Abschnitt Ihres HTML -Dokuments zunächst Verweise auf die MDL -CSS -Datei, die Materialdesign -Symbole von Google und das Stylesheet des Projekts hinzu, wo Sie Ihre eigenen Anpassungen hinzufügen:

<span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"</span>></span> 
</span><span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="https://fonts.googleapis.com/icon?family=Material+Icons"</span>></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span>

Fügen Sie als nächstes, kurz vor dem Schließen

Das obige ist der detaillierte Inhalt vonEine praktische Einführung in das Material Design Lite durch Google. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!