What are basic Materialize CSS Interview Questions?

1) What is Materialize CSS?

Materialize CSS is a CSS framework which contains library files. It is created with CSS, JavaScript and HTML. It is used to create attractive, reliable, and functional webpages and web apps.

2) When was Materialize CSS released?

Materialized CSS was released on 8 November 2015.

3) What are the salient features of Materialize CSS?

Following is a list of some salient features of Materialize CSS:

1. It contains In-built responsive designing.
2. It provides standard CSS with minimal footprint.
3. It provides new versions of common user interface controls such as buttons, checkboxes, and text fields adapted to follow Material Design concepts.
4. It facilitates enhanced and specialized features such as cards, tabs, navigation bars, toasts, and so on.
5. It is free to use and requires jQuery JavaScript library to function properly.
6. It is cross-browser supported, and can be used to create reusable web components.

4) How do we use Materialize CSS?

There are two methods to use Materialize CSS:

Local Installation: It is achieved by downloading the materialize.min.css and materialize.min.js files on our local machine and include them in your HTML code.

CDN Based Version: By including the materialize.min.css and materialize.min.js files into our HTML code directly from the Content Delivery Network (CDN).

5) Which are the different Utility classes in Materialize CSS?

A list of different Utility classes in Materialize CSS:

Color utility classes: Examples: .red, .green, .grey etc.

Alignment utility classes: Examples: .valign-wrapper, .left-align, .right-align, .center-align, .left, .right etc.

Hiding Content utility classes as per device size: Examples: .hide, .hide-on-small-only, .hide-on-med-only etc.

Formatting utility classes: Examples: truncate, hoverable etc.

6) Which classes are used to create responsive images and videos in Materialize CSS?

List of classes used to create responsive images and videos in Materialize CSS:

responsive-img: This class is used to create an responsive image.

video-container: This class is used to create responsive container. That has embedded videos.

responsive-video: This class is used to create HTML5 videos responsive.

7) What are the different classes of table in Materialize CSS?

Different classes of table in Materialize CSS:

Index	Class name	Description
1)	none	It is used to represents a basic table without any border.
2)	stripped	It is used to display a stripped table.
3)	bordered	It is used to create border in table.
4)	highlight	It is used to highlight the table.
5)	centered	It is used to create all the text in center aligns.
6)	responsive-table	It is used to create responsive table.

8) What is badge in Materialize CSS? What is the use of badges classes?

A badge is a component which is used to provide an onscreen notification. It can be a number or icon. It is used to emphasize the number of items.

The following classes of Badges are used in Materialize CSS:

• badge: It identifies element as an MDL badge component.
• new: It is used to add a new class to badge component.

9) What are the classes of BreadCrumb in Materialize CSS?

Materialize CSS provides two classes for BreadCrumb:

• nav-wrapper: It is used to set the nav component as breadcrumb/nav bar wrapper.
• breadcrumb: It is used to set the anchor element as breadcrumb.

10) What is chip in Materialize CSS?

Chip is a component of Materialize CSS which represents a small set of information like a tag does.

11) What is Collection in Materialize CSS? Also specify the classes of the collection.

Collection is a group of items having the related information. Following is a list of collection classes in Materialize CSS:

Index	Collection class	Description
1)	collection	It is used to set the div or ul container as collection.
2)	collection-item	It is used to set the a or li item as collection item.
3)	active	It shows the a or li item as active collection item.
4)	with-header	It is used to mark the collection to have header.
5)	collection-header	It is a set the a or li item as collection header.
6)	avatar	It is a set the a or li item as avatar item.
7)	dismissible	it enables collection items to be swiped away. It works on touch screen devices only.

12) How can you create a pagination in Materialize CSS?

You can create a pagination in Materialize CSS by using pagination class. This class is used with ul element.

Example:

1. <ul class="pagination">    
2.    <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>    
3.    <li class="active"><a href="#!">1</a></li>    
4.    <li class="waves-effect"><a href="#!">2</a></li>    
5.    <li class="waves-effect"><a href="#!">3</a></li>    
6.    <li class="waves-effect"><a href="#!">4</a></li>    
7.    <li class="waves-effect"><a href="#!">5</a></li>    
8.    <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>    
9.     </ul>  

13) What are the dropdown classes in Materialize CSS?

There are two types of dropdown classes in Materialize CSS:

• dropdown-content: It Identifies <u> HTML tag as an materialize dropdown component.
• data-activates: It is id of the dropdown ul element.