Learn About Material Design Lite

Introduction-

Material Design Lite is a library of User Interface created with Html, CSS and Javascript. It helps in creating attractive and functional web pages with browser portability. Material Design Lite uses classes in such a way so that the design can look good at any device size.

Salient features of MDL-

1. Classes used in MDL makes the design fit to different device sizes.

2.MDL is browser compatible

3.MDL uses new versions of common user interface controls.

Ways to use MDL -

1.Local Installation

Download the latest version of material javascript and CSS file and then include the files in the HTML page under the head tag.

2.CDN Based Version

We can directly include the javascript and CSS files from the Content Delivery Network.

storage.googleapis.com – it provides the content for the latest version.

Material Design Lite Components

Let's have a look at some components of MDL to understand the way of using it-

1- Default Slider  & slider with starting value

2- Snackbar

Show Snackbar

 (function() {
  'use strict';
  var snackbarContainer = document.querySelector('#demo-snackbar-example');
  var showSnackbarButton = document.querySelector('#demo-show-snackbar');
  var handler = function(event) {
    showSnackbarButton.style.backgroundColor = '';
  };
  showSnackbarButton.addEventListener('click', function() {
    'use strict';
    showSnackbarButton.style.backgroundColor = '#' +
        Math.floor(Math.random() * 0xFFFFFF).toString(16);
    var data = {
      message: 'Button color changed.',
      timeout: 2000,
      actionHandler: handler,
      actionText: 'Undo'
    };
    snackbarContainer.MaterialSnackbar.showSnackbar(data);
  });
}());

3- DataTable

4- Badges

         account_box    
      account_box	
      Unread Messages
      Rating
      Inbox       
        

Use of MDL on Dynamic websites -

MDL automatically renders all elements on page load which are marked with MDL Classes.

Here is a code how we can create a button dynamically-

  
var button = document.createElement('button'); 
var textNode = document.createTextNode('Click Me!'); 
button.appendChild(textNode); 
button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect'
componentHandler.upgradeElement(button);
document.getElementById('container').appendChild(button); 
  

MDL Grids-

MDL Grids are used to fit the content in the varying screen sizes. MDL grid is one of the components which is enclosed by a container element. MDL provides us with some CSS classes for some visual enhancements to the grids.

Grid component of MDL has-

12 columns for desktop size

8 columns for tablet size

4 columns for phone size

This example will surely help to understand the use of various grids for different modes-

  
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
6
4
2

                  6 on desktop, 8 on tablet

                  4 on desktop, 6 on tablet

                  2 on desktop, 4 on phone
       

Conclusion

In such a way we can use Material design lite and use the components to get good user interface experience in terms of its responsiveness and its look to make the UI fully interactive and functional.