Share
Material Design Lite (MDL), som vi har lärt oss av tidigare tutorials, kommer med många UI-komponenter, inklusive navigering, kort och knappar, vilket gör att vi snabbt kan bygga webbplatser. Men vad händer om du bara vill ha ett eller några av dessa funktioner? I så fall är det bäst att ta bort onödiga komponenter, lätta på stylesheets och JavaScript-filerna.
Innan vi börjar se hur detta kan göras måste du ha följande verktyg installerade på ditt system:
Tuts + tutorials Hantera dina bygguppgifter med Gulp.js och kommandoraden för webbdesign: Automatisering med Gulp hjälper dig att komma igång med Gulp om det behövs.
Till att börja med måste vi ta tag i MDL Raw Source-filerna genom att kopiera dem från förvaret. Kör följande i Terminal eller Command Prompt:
git klon https://github.com/google/material-design-lite.git mdl
Kommandot hämtar alla filerna och sparar dem i en ny mapp som heter "mdl". Navigera till mappen, springa cd mdl kommando, och du borde hitta okompilerat stylesheet och JavaScript separeras till partials för varje enskild komponent, samt mixins och variabler i MDL.
Kör nu följande kommando i mappen för att dra in MDL-beroendet:
npm installera
Beroendet inkluderar Mocka, PhantomJS, tillsammans med ett antal Gulp-plugins, som gulp-sass och gulp-autoprefixer. Det här är de verktyg och bibliotek som krävs för att kompilera alla partials i ett enda användbar stilark och JavaScript-fil. När du är klar, hittar du dessa beroenden lagrade i en mapp med namnet "node_modules".
I det här exemplet använder vi navigeringskomponenten, men vi kommer också att inkludera knapparna och textfältets komponenter så att vi kan lägga till ett expanderbart sökfält i navigeringen. Dessutom kommer vi att inkludera flik komponent, helt enkelt för att vi kan använda flikar i navigeringen.
Öppna nu filen "material-design-lite.scss" och kommentera relevanta komponentstilhänvisningar från listan.
// Variabler och mixins @ import "variabler"; @import "mixins"; // Återställer och beroenden @import "återställer / återställer"; @import "typografi / typografi"; // Komponenter @ import "palett / palett"; // @import "ripple / ripple"; // //import "animation / animation"; // @import "emblem / emblem"; @import "-knapp / -knapp"; // @import "kort / kort"; // //import "kryssrutan / kryssrutan"; // //import "data-table / data-table"; // @import "footer / mega_footer"; // //import "footer / mini_footer"; // @import "ikon-växla / ikon-växla"; // @import "meny / meny"; // @import "framsteg / framsteg"; @import "layout / layout"; // //import "radio / radio"; // //import "skjutreglaget / skjutreglaget"; // @import "spinner / spinner"; // @import "switch / switch"; @import "flikar / flikar"; @import "textfält / textfält"; // //import "tooltip / tooltip"; // @import "skugga / skugga"; // @import "rutnät / rutnät";
På samma sätt, öppna "gulpfile.js" och kommentera de onödiga JS under KÄLLOR referens.
var SOURCES = [// Komponenthanterare 'src / mdlComponentHandler.js', // Polyfills / beroenden 'src / third_party / ** / *. js', // Baskomponenter 'src / button / button.js', // 'src / checkbox / checkbox.js', // 'src / ikon-växla / 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 ', // Komplexa komponenter (vilka återanvända baskomponenter)' src / layout / layout.js ' // 'src / data-table / data-table.js', // Och slutligen ripplarna // 'src / ripple / ripple.js'];
Slutligen springa klunk kommando i Terminal.
Det här kommandot sammanställer stilarket och JavaScript-filen och matar sedan den minifierade versionen till "dist" -mappen. Eftersom vi har tagit bort så många onödiga delar, är stilarket och JS-filen vardera cirka 40% lättare.
Jämför detta med standardbyggnaden (cirka 300 Kb): vår CSS är 113 Kb uncompiledTa en titt på demo; vår navigeringskomponent och mycket lite annat!
Det är helt upp till dig vad du inkluderar och ta bort från din Material Design Lite-bygg. Låt oss veta i kommentarerna vilka MDL-komponenter du vill extrahera och använda på egen hand.
Det här är den sista delen av vår Learning Material Design Lite-serie. Jag hoppas att du tyckte det var roligt och att det hjälpte dig att komma igång med MDL!
Accentsconagua