Interview Questions

AJAX Interview Questions Android Interview Questions Angular 2 Interview Questions AngularJs Interview Questions Apache Presto Interview Questions Apache Tapestry Interview Questions Arduino Interview Questions ASP.NET MVC Interview Questions Aurelia Interview Questions AWS Interview Questions Blockchain Interview Questions Bootstrap Interview Questions C Interview Questions C Programming Coding Interview Questions C# Interview Questions Cakephp Interview Questions Cassandra Interview Questions CherryPy Interview Questions Clojure Interview Questions Cobol Interview Questions CodeIgniter interview Questions CoffeeScript Interview Questions Cordova Interview Questions CouchDB interview questions CSS Buttons Interview Questions CSS Interview Questions D Programming Language Interview Questions Dart Programming Language Interview Questions Data structure & Algorithm Interview Questions DB2 Interview Questions DBMS Interview Questions Django Interview Questions Docker Interview Questions DOJO Interview Questions Drupal Interview Questions Electron Interview Questions Elixir Interview Questions Erlang Interview Questions ES6 Interview Questions and Answers Euphoria Interview Questions ExpressJS Interview Questions Ext Js Interview Questions Firebase Interview Questions Flask Interview Questions Flex Interview Questions Fortran Interview Questions Foundation Interview Questions Framework7 Interview Questions FuelPHP Framework Interview Questions Go Programming Language Interview Questions Google Maps Interview Questions Groovy interview Questions GWT Interview Questions Hadoop Interview Questions Haskell Interview Questions Highcharts Interview Questions HTML Interview Questions HTTP Interview Questions Ionic Interview Questions iOS Interview Questions IoT Interview Questions Java BeanUtils Interview Questions Java Collections Interview Questions Java Interview Questions Java JDBC Interview Questions Java Multithreading Interview Questions Java OOPS Interview Questions Java Programming Coding Interview Questions Java Swing Interview Questions JavaFX Interview Questions JavaScript Interview Questions JCL (Job Control Language) Interview Questions Joomla Interview Questions jQuery Interview Questions js Interview Questions JSF Interview Questions JSP Interview Questions KnockoutJS Interview Questions Koa Interview Questions Laravel Interview Questions Less Interview Questions LISP Interview Questions Magento Interview Questions MariaDB Interview Questions Material Design Lite Interview Questions Materialize CSS Framework Interview Questions MathML Interview Questions MATLAB Interview Questions Meteor Interview Questions MongoDB interview Questions Moo Tools Interview Questions MySQL Interview Questions NodeJS Interview Questions OpenStack Interview Questions Oracle DBA Interview Questions Pascal Interview Questions Perl interview questions Phalcon Framework Interview Questions PhantomJS Interview Questions PhoneGap Interview Questions Php Interview Questions PL/SQL Interview Questions PostgreSQL Interview Questions PouchDB Interview Questions Prototype Interview Questions Pure CSS Interview Questions Python Interview Questions R programming Language Interview Questions React Native Interview Questions ReactJS Interview Questions RequireJs Interview Questions RESTful Web Services Interview Questions RPA Interview Questions Ruby on Rails Interview Questions SAS Interview Questions SASS Interview Questions Scala Interview Questions Sencha Touch Interview Questions SEO Interview Questions Servlet Interview Questions SQL Interview Questions SQL Server Interview Questions SQLite Interview Questions Struts Interview Questions SVG Interview Questions Swift Interview Questions Symfony PHP Framework Interview Questions T-SQL(Transact-SQL) Interview Questions TurboGears Framework Interview Questions TypeScript Interview Questions UiPath Interview Questions VB Script Interview Questions VBA Interview Questions WCF Interview Questions Web icon Interview Questions Web Service Interview Questions Web2py Framework Interview Questions WebGL Interview Questions Website Development Interview Questions WordPress Interview Questions Xamarin Interview Questions XHTML Interview Questions XML Interview Questions XSL Interview Questions Yii PHP Framework Interview Questions Zend Framework Interview Questions Network Architect Interview Questions

Top 14 Material Design Lite Interview Questions for 2022

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>