Quick Tip: Pick ‘n’ Mix MDL Components with Gulp

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:

  1. Git.
  2. Node Package Manager (NPM).
  3. Gulp

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:

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:

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.

Similarly, open “gulpfile.js” and comment out the unnecessary JS under the SOURCES reference.

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.

Compare this to the standard build (around 300 Kb): our CSS is 113 Kb uncompiled

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!