Creating Material Design UI

Hi Guys, these days material based approach is being followed and standardized by Tech Giants like Google.

There are a couple of Reason why we should use Material Design for developing UI in our applications.

1. Consistency

2. Simplicity

3. Intuitive

Initially, Material Design was introduced by Google and Now's it's being constantly updated.

Now, We'll Look at free/open source libraries that we can use to develop Material Design based UI.there are couple of them.

1. Materialize http://materializecss.com/

2. MDL bootstrap https://mdbootstrap.com

3. Daemonite https://github.com/Daemonite/material

4. Bootstrap-material-design https://fezvrasta.github.io/bootstrap-material-design

For this example we'll be using Materialize Materialize is a modern responsive front-end framework based on Material Design. It

1. Speeds up development

2. User Experience Focused

3. Easy to work with

4. Heavily Customizable Now, Let's see how we can use Materialize to make UI Components.

Let's Start

1. First, we'll download the Materialize from http://materializecss.com/getting-started.html or we could also use CDN links in our html page.

2. Make sure you have jquery imported before you import materialize.

3. Following would be the project structure

 MyWebsite/
  |--css/
  |  |--materialize.css
  |
  |--fonts/
  |  |--roboto/
  |
  |--js/
  |  |--materialize.js
  |
  |--index.html
          

4. Once you set up the project Structure, you just need to visit http://materializecss.com and find the relevant component you want to use.

Then simply copy and paste the HTML from Materialise Documentation page. Below is an example of simple HTML page loaded with Materialize.
 

Regards
Mohit