Share
Material Design Lite (MDL) enthält, wie wir aus früheren Tutorials gelernt haben, zahlreiche UI-Komponenten wie Navigation, Karten und Schaltflächen, mit denen sich Websites schnell erstellen lassen. Was aber, wenn Sie nur eine oder einige dieser Funktionen wünschen? In diesem Fall sollten Sie nicht mehr benötigte Komponenten entfernen und die Stylesheets und die JavaScript-Dateien aufhellen.
Bevor wir wissen, wie dies möglich ist, müssen auf Ihrem System die folgenden Tools installiert sein:
Tuts + Tutorials Verwalten Sie Ihre Build-Aufgaben mit Gulp.js und Die Befehlszeile für Webdesign: Automatisierung mit Gulp hilft Ihnen bei Bedarf, mit Gulp zu beginnen.
Zunächst müssen wir die MDL-Rohquelldateien durch Kopieren aus dem Repository übernehmen. Führen Sie Folgendes in Terminal oder Eingabeaufforderung aus:
git clone https://github.com/google/material-design-lite.git mdl
Dieser Befehl lädt alle Dateien herunter und speichert sie in einem neuen Ordner mit dem Namen „mdl“. Navigieren Sie zu dem Ordner und führen Sie die aus cd mdl Befehl, und Sie sollten das finden nicht kompiliert Stylesheet und das JavaScript in Partials für jede einzelne Komponente sowie die Mixins und Variablen in MDL getrennt.
Führen Sie nun den folgenden Befehl innerhalb des Ordners aus, um die MDL-Abhängigkeiten abzurufen:
npm installieren
Zu den Abhängigkeiten gehören Mocha, PhantomJS sowie eine Reihe von Gulp-Plugins, wie gulp-sass und gulp-autoprefixer. Dies sind die Tools und Bibliotheken, die erforderlich sind, um alle Partials zu einem einzigen verwendbaren Stylesheet und einer JavaScript-Datei zusammenzustellen. Sobald Sie fertig sind, finden Sie diese Abhängigkeiten in einem Ordner mit dem Namen "node_modules"..
In diesem Beispiel verwenden wir die Navigationskomponente, fügen jedoch auch die Schaltflächen und Textfeldkomponenten hinzu, damit wir ein erweiterbares Suchfeld in die Navigation einfügen können. Zusätzlich fügen wir die ein Tab Komponente, einfach weil wir Registerkarten in der Navigation anwenden können.
Öffnen Sie nun die Datei "material-design-lite.scss" und kommentieren Sie die relevanten Komponentenstilreferenzen aus der Liste aus.
// Variablen und Mixins @import "variables"; @import "mixins"; // Resets und Abhängigkeiten @import "resets / resets"; @import "Typografie / Typografie"; // Komponenten @import "Palette / Palette"; // @import "Ripple / Ripple"; // @import "animation / animation"; // @import "badge / badge"; @import "button / button"; // @import "karte / karte"; // @import "checkbox / checkbox"; // @import "Datentabelle / Datentabelle"; // @import "footer / mega_footer"; // @import "footer / mini_footer"; // @import "icon-toggle / icon-toggle"; // @import "menu / menu"; // @import "Fortschritt / Fortschritt"; @import "layout / layout"; // @import "Radio / Radio"; // @import "slider / slider"; // @import "Spinner / Spinner"; // @import "wechseln / wechseln"; @import "tabs / tabs"; @import "Textfeld / Textfeld"; // @import "tooltip / tooltip"; // @import "Schatten / Schatten"; // @import "grid / grid";
Öffnen Sie in ähnlicher Weise "gulpfile.js" und kommentieren Sie die nicht benötigten JS unter QUELLEN Referenz.
var SOURCES = [// Komponentenhandler 'src / mdlComponentHandler.js', // Polyfills / Abhängigkeiten 'src / third_party / ** / *. js', // Basiskomponenten 'src / button / button.js', // 'src / checkbox / checkbox.js', // 'src / icon-toggle / icon-toggle.js', // 'src / menu / menu.js', // 'src / progress / progress.js', // 'src / radio / radio.js', // 'src / slider / slider.js', // 'src / spinner / spinner.js', // 'src / switch / switch.js', 'src /tabs/tabs.js ',' src / textfield / textfield.js ', //' src / tooltip / tooltip.js ', // komplexe Komponenten (die Basiskomponenten wiederverwenden)' src / layout / layout.js ', // 'src / data-table / data-table.js', // Und schließlich die Wellen // 'src / ripple / ripple.js'];
Zum Schluss die Schluck Befehl im Terminal.
Dieser Befehl kompiliert das Stylesheet und die JavaScript-Datei und gibt die minimierte Version in den Ordner „dist“ aus. Da wir so viele unnötige Teile entfernt haben, sind das Stylesheet und die JS-Datei jeweils um 40% leichter.
Vergleichen Sie dies mit dem Standard-Build (ca. 300 Kb): Unser CSS ist 113 Kb unkompiliertSchauen Sie sich die Demo an. unsere Navigationskomponente und sehr wenig anderes!
Es liegt ganz bei Ihnen, was Sie hinzufügen und aus Ihrem Material Design Lite-Build entfernen. Teilen Sie uns in den Kommentaren mit, welche MDL-Komponenten Sie selbst extrahieren und verwenden möchten.
Dies ist die letzte Ausgabe unserer Learning Material Design Lite-Serie. Ich hoffe, Sie fanden es angenehm und es hat Ihnen geholfen, mit MDL zu beginnen!
Accentsconagua