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.
So let's dive in...by the way for more information on mdl check out the official site
Table of Contents
Installing and Configuring
<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.
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
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.
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.
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,