1) What is Material Design Lite?
2) What are the features of Material Design Lite?
Material Design Lite features are:
- It is used to create responsive design.
- It provides Standard CSS.
- It provides cards, button, boxes, text and many more.
- It can be used without any library or development environment.
3) How many ways to use Material Design Lite?
There are two ways to use Material Design Lite:
- Via Local Installation.
- Via CDN( Content Delivery Network) Based version.
4) How can we use <link> and <script> in MDL?
We can use <link> and <script> in MDL by using following code:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
5) What is naming conversion used by MDL?
Material Design Lite used BEM ( Block Element Modifier ). It is method used to construct CSS class-name.
6) What are the various CSS classes in Material Design Lite?
There are various CSS classes of Material Design Lite:
- mdl-layout--fixed-header etc.
7) What is Material Design Lite tab?
Material Design Lite tab is user interface component. It is used to show multiple screens in a single space in a proper manner.
8) What is Material Design Lite Badges?
Material Design Lite Badges is used to emphasize the number of items. It is a component that provides onscreen notification.
9) What is the additional MDL class to create template fixed header and fixed drawer?
Fixed header and fixed drawer classes of MDL is:
- .mdl-layout--fixed-drawer: It is used to make the drawer always visible and open in larger screens.
- .mdl-layout--fixed-header: It is used to make the header always visible, even in small screens.
10) What are the button classes and their effects?
The following button classes and their effects are:
||It is used to set the button as an MDL component.
||It is used to set raised display effect..
||It is used to set fab ( Circular) effect.
||It is used to set the color effect.
11) What is the spinner class in MDL?
In MDL, the spinner classes is: mdl-spinner.
<div class = "mdl-spinner mdl-js-spinner is-active"></div>
<h4>Single Color Spinner</h4>
<div class = "mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
12) What are the classes of Material Design Lite Menu?
Material Design Lite Menu classes are:
- mdl-menu--top-right etc.
13) What are the browsers supported by MDL?
Material Design Light supports various browsers.
- Mobile Safari
- Chrome (Android)
- Chrome etc.
14) How can we create raised button and colored FAB?
We can create raised button and colored Fav by using following codes:
<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">