Blog

  • Learn About Material Design Lite

    Posted by Prachi Ahuja | Last Updated: 14-Jan-19

    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

    
    
     
     (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

    
     
    Student Class Grade
    Mahesh Parashar VI A
    Rahul Sharma VI B
    Mohan Sood VI A

     

    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.

     

Tags: html

Mobile Applications

Video Content

Bigdata & NoSQL

SaaS Applications

Miscellaneous

Archives


Alexa Certified Site Stats for www.oodlestechnologies.com