Share
Material Design Lite (MDL), som vi har lært av tidligere opplæringsprogrammer, kommer med mange UI-komponenter, inkludert navigasjon, kort og knapper, noe som gjør at vi raskt kan bygge nettsteder. Men hva om du bare vil ha en eller noen av disse funksjonene? I så fall er det best å fjerne unødvendige komponenter, lette stilarkene og JavaScript-filene.
Før vi begynner å se hvordan dette kan gjøres, må du ha følgende verktøy installert på systemet ditt:
Tuts + tutorials Administrere dine byggeoppgaver med Gulp.js, og kommandolinjen for webdesign: Automatisering med Gulp hjelper deg med å komme i gang med Gulp hvis det er nødvendig.
Til å begynne med må vi ta tak i MDL Raw Source-filene ved å kopiere dem fra depotet. Kjør følgende i Terminal eller Command Prompt:
git klon https://github.com/google/material-design-lite.git mdl
Denne kommandoen laster ned alle filene og lagrer dem i en ny mappe som heter "mdl". Naviger til mappen, kjør cd mdl kommandoen, og du bør finne ukompilert stilark og JavaScript separert i deler for hver enkelt komponent, samt mixins og variabler i MDL.
Kjør nå følgende kommando i mappen for å trekke inn MDL-avhengighetene:
npm installasjon
Avhengighetene inkluderer Mocha, PhantomJS, sammen med en rekke Gulp-plugins, for eksempel Gulp-Sass og Gulp-Autoprefixer. Dette er verktøy og biblioteker som kreves for å kompilere alle delene i et enkelt brukbart stilark og JavaScript-fil. Når du er ferdig, finner du disse avhengighetene lagret i en mappe med navnet "node_modules".
I dette eksemplet vil vi bruke navigasjonskomponenten, men vi vil også inkludere knappene og tekstfeltkomponentene, slik at vi kan legge til et utvidbart søkefelt i navigasjonen. I tillegg vil vi inkludere tab komponent, bare fordi vi kan bruke faner i navigasjonen.
Nå åpner du filen "material-design-lite.scss" og kommenterer de relevante komponent stilreferanser ut fra listen.
// Variabler og mixins @import "variabler"; @import "mixins"; // Tilbakestiller og avhenger @import "tilbakestiller / tilbakestiller"; @import "typografi / typografi"; // Komponenter @ import "palett / palett"; // @import "ripple / ripple"; // @import "animasjon / animasjon"; // @import "badge / badge"; @import "-knappen / -knappen"; // @import "kort / kort"; // @import "avkrysningsboks / boks"; // @import "data-table / data-table"; // @import "footer / mega_footer"; // @import "footer / mini_footer"; // @import "icon-toggle / icon-toggle"; // @import "meny / meny"; // @import "fremgang / fremgang"; @import "layout / layout"; // @import "radio / radio"; // @import "skyvekontroll / skyvekontroll"; // @import "spinner / spinner"; // @import "bryter / bryter"; @import "faner / faner"; @import "tekstfelt / tekstfelt"; // //import "tooltip / tooltip"; // @import "skygge / skygge"; // @import "grid / grid";
Tilsvarende åpner du "gulpfile.js" og kommenterer unødvendige JS under KILDER henvisning.
var SOURCES = [// Komponenthåndterer 'src / mdlComponentHandler.js', // Polyfills / avhengigheter 'src / third_party / ** / *. js', // Basekomponenter 'src / button / button.js', // 'src / checkbox / checkbox.js', // 'src / ikon-bytt / ikon-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 ', // Komplekse komponenter (hvilke gjenbruk basekomponenter)' src / layout / layout.js ', // 'src / data-table / data-table.js', // Og til slutt, krusninger // 'src / ripple / ripple.js'];
Til slutt, kjøre gulp kommando i Terminal.
Denne kommandoen kompilerer stilarket og JavaScript-filen, og utdataer den beregnede versjonen i "dist" -mappen. Siden vi har fjernet så mange unødvendige deler, er stilarket og JS-filen hver rundt 40% lettere.
Sammenlign dette med standardbyggingen (rundt 300 Kb): Vår CSS er 113 Kb ukompilertTa en titt på demoen; vår navigasjonskomponent og svært lite annet!
Det er helt opp til deg hva du inkluderer og fjern fra din Material Design Lite-bygge. Gi oss beskjed i kommentarene som MDL-komponenter du vil trekke ut og bruke på egen hånd.
Dette er den siste delen av vår Litteratur Design Lite-serie. Jeg håper du fant det hyggelig og at det har hjulpet deg med å komme i gang med MDL!
Accentsconagua