Share
Material Design Lite (MDL), așa cum am învățat din tutorialele anterioare, vine cu o mulțime de componente UI, inclusiv navigație, cărți și butoane, care ne permit să construim rapid site-uri web. Dar dacă vrei doar una sau câteva dintre aceste caracteristici? În acest caz, este mai bine să eliminați componentele inutile, luminând foile de stil și fișierele JavaScript.
Înainte de a începe să vedem cum se poate face acest lucru, va trebui să aveți instalate următoarele instrumente în sistemul dvs.:
Tuts + tutoriale Gestionarea sarcinilor dvs. de construire cu Gulp.js și Linia de comandă pentru Web Design: Automatizarea cu Gulp vă va ajuta să începeți cu Gulp dacă este necesar.
În primul rând, trebuie să luăm fișierele sursă MDL brut prin copierea lor din depozit. Rulați următoarele în Terminal sau Command Prompt:
git clone https://github.com/google/material-design-lite.git mdl
Această comandă va descărca toate fișierele și le va salva într-un folder nou numit "mdl". Navigați la dosar, rulați cd mdl comanda, și ar trebui să găsiți necompilat foaia de stil și JavaScript sunt separate în partiale pentru fiecare componentă, precum și mixurile și variabilele în MDL.
Acum, executați următoarea comandă în dosarul pentru a trage în dependențele MDL:
npm install
Dependențele includ Mocha, PhantomJS, împreună cu un număr de pluginuri Gulp, cum ar fi gulp-sass și gulp-autoprefixer. Acestea sunt instrumentele și bibliotecile care trebuie să compileze toate partialele într-o singură foaie de stil și fișier JavaScript. După ce ați terminat, veți găsi aceste dependențe stocate într-un folder numit "node_modules".
În acest exemplu, vom folosi componenta de navigare, dar vom include și butoanele și componentele câmpului text, astfel încât să putem adăuga un câmp de căutare extensibil în navigație. În plus, vom include fila componente, pur și simplu pentru că putem aplica file în navigație.
Deschideți acum fișierul "material-design-lite.scss" și comentați din listă referințele relevante ale stilului componentelor.
// variabile și mixuri @ import "variabile"; @import "mixins"; // Resetări și dependențe @import "resetează / resetează"; @import "tipografie / tipografie"; // Componente @import "paletă / paletă"; // @import "ripple / ripple"; // @import "animație / animație"; // @import "insigna / insigna"; @import "buton / buton"; // @import "card / card"; // @import "caseta de selectare / caseta de selectare"; // @import "tabel de date / tabel de date"; // @import "footer / mega_footer"; // @import "footer / mini_footer"; // @import "icon-comutare / icon-comutare"; // @import "meniu / meniu"; // @import "progres / progres"; @import "layout / layout"; // @import "radio / radio"; // @import "cursor / cursor"; // @import "spinner / spinner"; // @import "comutator / comutator"; @import "filele / filele"; @import "textfield / textfield"; // @import "tooltip / tooltip"; // @import "umbra / umbra"; // @import "grilă / grilă";
În mod similar, deschideți "gulpfile.js" și comentați JS-urile inutile în cadrul SURSE referinţă.
var SOURCES = [// Componenta de manipulare 'src / mdlComponentHandler.js', // Polyfills / dependencies 'src / third_party / ** / *. js', // Componentele de bază '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 ', // Componente complexe (care refolosesc componentele de baza)' src / layout / layout.js ', // 'src / data-table / data-table.js', // Și în cele din urmă, ripples // 'src / ripple / ripple.js'];
În cele din urmă, rulați înghiţitură comandă în Terminal.
Această comandă compilează foaia de stil și fișierul JavaScript, apoi scoate versiunea minimizată în dosarul "dist". Întrucât am eliminat atât de multe părți inutile, foaia de stil și fișierul JS sunt fiecare în jur de 40% mai ușoare.
Comparați aceasta cu cea standard (aproximativ 300 Kb): CSS-ul nostru este de 113 Kb necomplicatAruncați o privire la demo; componenta noastră de navigație și foarte puțin!
Depinde în întregime de ceea ce includeți și eliminați din materialele de construcție Lite construite. Spuneți-ne în comentariile despre componentele MDL pe care le-ați extrage și le utilizați singure.
Aceasta este ultima tranșă a seriei noastre de Materiale de Design Lite. Sper că ați găsit-o plăcută și că v-ați ajutat să începeți cu MDL!
Accentsconagua