Getting started with Material Design Lite (Part One)

What's Material Design

If you have been following up on the race for more interactive interface designs, you must have heard of material design, Material design is this new rave of design created by Google intended to be a world-wide standard in web design and development.

The MDL(Material Design Lite) is a set of css and javascript libraries curated by Google to help implement material Design on the web.

So let's dive in...by the way for more information on mdl check out the official site

Installing and Configuring

Hosted

To work with MDL you can include the links to the CDN link on your pages, to link to the css and javascript codes

Note: the MDL helps you add the Material Design look and feel. it doesn't rely on any javascript frameworks

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>

This is best for production servers.

Download

When developing you'll likely want to work more interactively with the code, therefore to include the mdl package into your project, you could download its minified css and javascript from the offical site or click here to download, refer to these files in your html files.

You could add material icon fonts via the cdn link to include material icons to your projects.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Using the OpenSource repository

Compiling via NPM

If you are familiar with gulp and build dependency tool, you could build the source on the git repository, you'll need to download the code and build it.

just run the following commands in the shell

git clone https://material-design-lite.git

navigate via your terminal or shell to the repo's folder, install the various dependencies via npm

npm install && npm install -g gulp

After npm updates the packages, run the gulp command to compile the source.

gulp

Installing Via Bower

If you are familiar with package dependency manager on front-end development like Bower and NPM, Then you could install the mdl framework via bower using the shell commands

bower install mdl-lite --save

You can refer to the files in you html

<link rel="stylesheet" href="/bower_components/material-design-lite/material.min.css">
<script src="/bower_components/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Installing Via NPM

Also you could install the mdl framework via NPM using the shell commands

npm install material-design-lite --save

easy right?, you could also append the --save-dev to the shell command to save it as a development package..

npm install material-design-lite --save-dev

This will install the Material Design Lite library files in your project's node_modules folder.

To refer to the files in your html

<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
<script src="/node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

The Web Starter Kit

If you are looking to fully bootstrap the mdl library, check out the web starter kit. Its a cross-browser, that can be used by anyone to create more productive, portable and usable web pages.

Conclusion

In this section we only reviewed the process of installing and setting up a project to work with the MDL, In the next post, I'd walk us through the process of using the components of MDL,

Thanks