Before we begin to see how this can be done, you will need to have the following tools installed on your system:
Tuts+ tutorials Managing Your Build Tasks With Gulp.js, and The Command Line for Web Design: Automation with Gulp will help you get started with Gulp if need be.
To begin with, we have to grab the MDL raw source files by copying them from the repository. Run the following in Terminal or Command Prompt:
git clone https://github.com/google/material-design-lite.git mdl
This command will download the all the files and save them in a new folder called “mdl”. Navigate to the folder, run the
Now, run the following command within the folder to pull in the MDL dependencies:
In this example, we will use the navigation component, but we’ll also include the buttons and the text field components so that we can add an expandable search field in the navigation. Additionally, we’ll include the tab component, simply because we can apply tabs in the navigation.
Now open the “material-design-lite.scss” file and comment the relevant component style references out from the list.
// Variables and mixins @import "variables"; @import "mixins"; // Resets and dependencies @import "resets/resets"; @import "typography/typography"; // Components @import "palette/palette"; // @import "ripple/ripple"; // @import "animation/animation"; // @import "badge/badge"; @import "button/button"; // @import "card/card"; // @import "checkbox/checkbox"; // @import "data-table/data-table"; // @import "footer/mega_footer"; // @import "footer/mini_footer"; // @import "icon-toggle/icon-toggle"; // @import "menu/menu"; // @import "progress/progress"; @import "layout/layout"; // @import "radio/radio"; // @import "slider/slider"; // @import "spinner/spinner"; // @import "switch/switch"; @import "tabs/tabs"; @import "textfield/textfield"; // @import "tooltip/tooltip"; // @import "shadow/shadow"; // @import "grid/grid";
Similarly, open “gulpfile.js” and comment out the unnecessary JS under the
var SOURCES = [ // Component handler 'src/mdlComponentHandler.js', // Polyfills/dependencies 'src/third_party/**/*.js', // Base components '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', // Complex components (which reuse base components) 'src/layout/layout.js', // 'src/data-table/data-table.js', // And finally, the ripples // 'src/ripple/ripple.js' ];
Lastly, run the
gulp command in Terminal.
Take a look at the demo; our navigation component and very little else!
It is entirely up to you what you include and remove from your Material Design Lite build. Let us know in the comments which MDL components you’d extract and use on their own.
This is the last instalment of our Learning Material Design Lite series. I hope you found it enjoyable and that it’s helped you get started with MDL!