Material Design Interview Questions
1 .
What Is Chip In Materialize CSS? With Examples
Materialize CSS Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.
 
Contacts : Are you create a contact chip just add an img inside.
 
<div class="chip">
    <img src="https://www.freetimelearning.com/images/free-time-learn-icon.png" alt="Contact Person">
    F T L
</div>
 
Tags : Are you create a tag chip just add a close icon inside with the close class.
 
<div class="chip red white-text">
    Material Design
    <i class="close material-icons">close</i>
</div>
2 .
What is Materialize Preloader? With Example
Materialize CSS Preloader is used when you have content that will take a long time to load. For this reason we provide a number activity + progress indicators. The main preloaders are : Linear, Circular, Circular Flashing Colors.

Circular : The circular spinners should be nested in a preloader-wrapper div. The default size is medium, but you can add the classes big or small to adjust the size accordingly. You can add the classes spinner-red-only, spinner-blue-only, spinner-yellow-only and spinner-green-only.

<div class="row">
    <div class="container">

            <div class="preloader-wrapper big active">
                <div class="spinner-layer spinner-blue-only">
                  <div class="circle-clipper left">
                    <div class="circle"></div>
                  </div><div class="gap-patch">
                    <div class="circle"></div>
                  </div><div class="circle-clipper right">
                    <div class="circle"></div>
                  </div>
                </div>
             </div>

     </div>
</div>​
3 .
How to use materialize grid system? With Example
Materialize CSS provides a 12 column fluid responsive grid system. The grid helps you layout your page in an ordered, easy fashion.
 
Materialized CSS Grid System : 

  Mobile Devices
<= 600px
Tablet Devices
> 600px
Desktop Devices
> 992px
Large Desktop Devices
> 1200px
Class Prefix .s .m .l .xl
Container Width 90% 85% 70% 70%
Number of Columns 12 12 12 12

Responsive Grid Examples : 

<div class="row center-align">
    <div class="col s12 blue"><p>s12</p></div>
</div>
<div class="row center-align">
    <div class="col s12 m4 l2 purple"><p>s12 m4</p></div>
    <div class="col s12 m4 l8 red lighten-1"><p>s12 m4</p></div>
    <div class="col s12 m4 l2 purple"><p>s12 m4</p></div>
</div>
<div class="row center-align">
    <div class="col s12 m6 l3 blue"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3 amber"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3 blue"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3 yellow accent-4"><p>s12 m6 l3</p></div>
</div>

 
4 .
What is Materialize Helpers?
There are several utility classes in Materialize CSS which are used for designing needs.
 
Alignment classes : For example, .valign-wrapper, .left-align, .rightalign, .center-align, .left, .right.
 
Hiding Content classes  :  For example, .hide, .hideon-small-only, .hide-on-med-only, .hide-on-med-and-down, .hide-on-med-and-up and .hide-on-large-only.
 
Showing Content classes  :  For example, .show-on-small, .show-on-medium, .show-on-large, .show-on-medium-and-up, .show-on-medium-and-down.
5 .
What is Materialize CSS Media?
Materialize CSS Media has several classes to make images and videos responsive to different sizes.
6 .
How to use materialize css media classes?
Materialize CSS Media has several types :
 
Responsive Images : To make images resize responsively (based on the screen size) to page width, you can add the class responsive-img to your image tag.
 
Circular images : To make images appear circular, add class="circle" this class image will be displayed in circular.
 
Responsive Embeds : To make your embeds responsive, To add video-container this class.
 
Responsive Videos : To make your HTML5 Videos responsive just add the class responsive-video to the video tag.
7 .
What is Materialize Pulse? with example. 
Materialize CSS Pulse buttons with captivating effect. Add the pulse class to your button. 

Note : This is meant for floating buttons, so it may not work perfectly with every component.

Pulse Structure : 
 
<div class="row">

	<div class="col s6 m3 m20_0">
    		<a class="btn btn-floating btn-large pulse"><i class="material-icons">menu</i></a>
    	</div>

</div>
8 .
What is Materialize Shadows?
In material design has several special shadow classes to display containers as paper-like cards with shadow, everything should have a certain z-depth. These shadows make texts and images more appealing.

You can easily apply this shadow effect by adding a classes are z-depth-0, z-depth-1, z-depth-2, z-depth-3, z-depth-4 and z-depth-5 to an HTML tag. Finally z-depth-0 can be used to remove shadows from elements that have z-depths by default.

Example :

<div class="row">
    
    <div class="col s6 m4 l2">
      	<div class="amber box-demo z-depth-3">
      		<p>z-depth-3</p>
      	</div>
    </div>

</div>
9 .
What is Materialize Collections?
Materialize CSS Collections facilitate you to group list objects together. It represents various types of collections, where a collection is a group of related information items. There are Basic, Links, Active,  Headers, Secondary Content, Avatar Content, Dismissable Content and more...

Example : 

<ul class="collection">
  <li class="collection-item">HTML5</li>
  <li class="collection-item">CSS3</li>
  <li class="collection-item">Material Design</li>
  <li class="collection-item">Bootstrap 4</li>
</ul>​
10 .
What is Materialize Forms and how to use it?
Materialize Forms are the standard way to receive user inputted data. It provides a very beautiful and responsive CSS for form designing. The transitions and smoothness of these elements are very important because of the inherent user interaction associated with forms.

The forms are Input fields, Textarea, Select, Radio Buttons, Checkboxes, Switches, File Input, Range, Date Picker, Time Picker, Character Counter, Autocomplete etc,..

Example : 

<form class="col s12">
  <div class="row">
    <div class="input-field col s6">
      <input placeholder="Placeholder" id="first_name" type="text" class="validate">
      <label for="first_name">First Name</label>
    </div>
    <div class="input-field col s6">
      <input id="last_name" type="text" class="validate">
      <label for="last_name">Last Name</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <input disabled value="I am not editable" id="disabled" type="text" class="validate">
      <label for="disabled">Disabled</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <input id="password" type="password" class="validate">
      <label for="password">Password</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <input id="email" type="email" class="validate">
      <label for="email">Email</label>
    </div>
  </div>
  <div class="row">
    <div class="col s12">
      This is an inline input field:
      <div class="input-field inline">
        <input id="email" type="email" class="validate">
        <label for="email" data-error="wrong" data-success="right">Email</label>
      </div>
    </div>
  </div>
</form>​