1) What is Material Design Lite?
Material Design Lite is UI component Library. It is created with CSS, JavaScript and HTML. It is used for design purpose. It is developed by Google in 2014.
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
- mdl-js-layout
- mdl-navigation
- 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:
| Button Classes |
Description |
| mdl-button |
It is used to set the button as an MDL component. |
| mdl-button--raised |
It is used to set raised display effect.. |
| mdl-button--fab |
It is used to set fab ( Circular) effect. |
| mdl-button--colored |
It is used to set the color effect. |
11) What is the spinner class in MDL?
In MDL, the spinner classes is:
mdl-spinner.
Example:
<body>
<h4>Default Spinner</h4>
<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>
</body>
12) What are the classes of Material Design Lite Menu?
Material Design Lite Menu classes are:
- mdl-button
- mdl-js-button
- mdl-button—icon
- mdl-menu
- mdl-menu--top-left
- mdl-menu--top-right etc.
13) What are the browsers supported by MDL?
Material Design Light supports various browsers.
- Mobile Safari
- Chrome (Android)
- Safari
- Firefox
- Opera
- 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">
Button
</button>
<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
