suchen
HeimWeb-FrontendCSS-TutorialEine praktische Einführung in das Material Design Lite durch Google

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> 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> 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> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span></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!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Was ist CSS Grid?Was ist CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid ist ein leistungsstarkes Tool zum Erstellen komplexer, reaktionsschneller Weblayouts. Es vereinfacht das Design, verbessert die Zugänglichkeit und bietet mehr Kontrolle als ältere Methoden.

Was ist CSS Flexbox?Was ist CSS Flexbox?Apr 30, 2025 pm 03:20 PM

In Artikel wird CSS Flexbox erörtert, eine Layoutmethode zur effizienten Ausrichtung und Verteilung des Raums in reaktionsschnellen Designs. Es erklärt die Verwendung von Flexbox, vergleicht es mit CSS -Gitter und Details Browser -Unterstützung.

Wie können wir unsere Website mit CSS reagieren?Wie können wir unsere Website mit CSS reagieren?Apr 30, 2025 pm 03:19 PM

In dem Artikel werden Techniken zum Erstellen von reaktionsschnellen Websites mithilfe von CSS erörtert, einschließlich Ansichtsfenster -Meta -Tags, flexiblen Gitter, Flüssigkeitsmedien, Medienabfragen und relativen Einheiten. Es deckt auch mit CSS -Raster und Flexbox zusammen und empfiehlt CSS -Framework

Was macht die CSS-Box-Größeneigenschaft?Was macht die CSS-Box-Größeneigenschaft?Apr 30, 2025 pm 03:18 PM

In dem Artikel wird die CSS-Box-Größeneigenschaft erörtert, in der die Berechnung der Elementabmessungen steuert. Es erklärt Werte wie Inhaltsbox, Border-Box und Padding-Box sowie deren Auswirkungen auf das Layout-Design und die Form von Formularausrichtung.

Wie können wir mit CSS animieren?Wie können wir mit CSS animieren?Apr 30, 2025 pm 03:17 PM

In Artikel wird das Erstellen von Animationen mithilfe von CSS, Schlüsseleigenschaften und Kombination mit JavaScript erläutert. Hauptproblem ist die Browserkompatibilität.

Können wir mit CSS 3D -Transformationen zu unserem Projekt hinzufügen?Können wir mit CSS 3D -Transformationen zu unserem Projekt hinzufügen?Apr 30, 2025 pm 03:16 PM

In Artikel werden CSS für 3D -Transformationen, wichtige Eigenschaften, Browserkompatibilität und Leistungsüberlegungen für Webprojekte erläutert. (Charakterzahl: 159)

Wie können wir Gradienten in CSS hinzufügen?Wie können wir Gradienten in CSS hinzufügen?Apr 30, 2025 pm 03:15 PM

In dem Artikel werden CSS -Gradienten (linear, radial, wiederholt) beschrieben, um die Website -Visuals, das Hinzufügen von Tiefe, Fokus und moderne Ästhetik zu verbessern.

Was sind Pseudoelemente in CSS?Was sind Pseudoelemente in CSS?Apr 30, 2025 pm 03:14 PM

In Artikel werden Pseudoelemente in CSS, deren Verwendung bei der Verbesserung des HTML-Stylings und der Unterschiede zu Pseudoklassen erläutert. Bietet praktische Beispiele.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

MinGW – Minimalistisches GNU für Windows

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

Dreamweaver Mac

Dreamweaver Mac

Visuelle Webentwicklungstools