Material Design Lite (MDL), as we have learned from previous tutorials, comes with plenty of UI components including navigation, cards, and buttons, which enable us to rapidly build websites. But what if you want just one, or a few of these features? In that case it’s best to remove unnecessary components, lightening the stylesheets and the JavaScript files.
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.
Get the MDL Source
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:
1 |
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 cd mdl command, and you should find the uncompiled stylesheet and the JavaScript separated into partials for each single component, as well as the mixins and variables in MDL.
MDL Dependencies
Now, run the following command within the folder to pull in the MDL dependencies:
1 |
npm install
|
The dependencies include Mocha, PhantomJS, along with a number of Gulp plugins, such as gulp-sass and gulp-autoprefixer. These are the tools and libraries which are required to compile all the partials into a single usable stylesheet and JavaScript file. Once completed, you’ll find these dependencies stored in a folder named “node_modules”.
Customize
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.
1 |
// Variables and mixins |
2 |
@import "variables"; |
3 |
@import "mixins"; |
4 |
|
5 |
// Resets and dependencies |
6 |
@import "resets/resets"; |
7 |
@import "typography/typography"; |
8 |
|
9 |
// Components |
10 |
@import "palette/palette"; |
11 |
// @import "ripple/ripple"; |
12 |
// @import "animation/animation"; |
13 |
// @import "badge/badge"; |
14 |
@import "button/button"; |
15 |
// @import "card/card"; |
16 |
// @import "checkbox/checkbox"; |
17 |
// @import "data-table/data-table"; |
18 |
// @import "footer/mega_footer"; |
19 |
// @import "footer/mini_footer"; |
20 |
// @import "icon-toggle/icon-toggle"; |
21 |
// @import "menu/menu"; |
22 |
// @import "progress/progress"; |
23 |
@import "layout/layout"; |
24 |
// @import "radio/radio"; |
25 |
// @import "slider/slider"; |
26 |
// @import "spinner/spinner"; |
27 |
// @import "switch/switch"; |
28 |
@import "tabs/tabs"; |
29 |
@import "textfield/textfield"; |
30 |
// @import "tooltip/tooltip"; |
31 |
// @import "shadow/shadow"; |
32 |
// @import "grid/grid"; |
Similarly, open “gulpfile.js” and comment out the unnecessary JS under the SOURCES reference.
1 |
var SOURCES = [ |
2 |
// Component handler |
3 |
'src/mdlComponentHandler.js',
|
4 |
// Polyfills/dependencies |
5 |
'src/third_party/**/*.js',
|
6 |
// Base components |
7 |
'src/button/button.js',
|
8 |
// 'src/checkbox/checkbox.js',
|
9 |
// 'src/icon-toggle/icon-toggle.js',
|
10 |
// 'src/menu/menu.js',
|
11 |
// 'src/progress/progress.js',
|
12 |
// 'src/radio/radio.js',
|
13 |
// 'src/slider/slider.js',
|
14 |
// 'src/spinner/spinner.js',
|
15 |
// 'src/switch/switch.js',
|
16 |
'src/tabs/tabs.js',
|
17 |
'src/textfield/textfield.js',
|
18 |
// 'src/tooltip/tooltip.js',
|
19 |
// Complex components (which reuse base components) |
20 |
'src/layout/layout.js',
|
21 |
// 'src/data-table/data-table.js',
|
22 |
// And finally, the ripples |
23 |
// 'src/ripple/ripple.js'
|
24 |
]; |
Build
Lastly, run the gulp command in Terminal.
This command compiles the stylesheet and the JavaScript file, then outputs the minified version into the “dist” folder. As we’ve removed so many unnecessary parts, the stylesheet and the JS file are each around 40% lighter.
Take a look at the demo; our navigation component and very little else!
Conclusion
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!
