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
Table of Contents
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