1) What is Materialize?
Materialize is a CSS framework that contains library file. It is created with CSS, JavaScript and HTML. It helps to create attractive, reliable and functional web pages and web apps. It was released on 8 November 2015.
2) What are the features of Materialize?
There are various features of Materialize that are given below:
- It is in-built responsive design.
- It is standard CSS with minimal footprint.
- It includes new versions of common UI controls. such as buttons
- It provides feature like cards, tabs, navigation bars, toasts, and so on.
- It requires jQuery, JavaScript library to function properly.
- It helps to create reusable web component.
- It is free to use.
3) How can we use Materialize?
We can use Materialize in two ways:
- Local Installation - we can download the materialize.min.css and materialize.min.js files on our local machine and include it in our HTML code.
- CDN Based Version - we can include the materialize.min.css and materialize.min.js files into our HTML code directly from the Content Delivery Network (CDN).
4) What are the Materialize project setup directories?
Materialize project setup directory are given below.
MyWebsite/
|--css/
| |--materialize.css
|
|--fonts/
| |--roboto/
|
|--js/
| |--materialize.js
|
|--index.html
5) What are the utility classes in Materialize?
Materialize provides different utility classes that are given below:
- 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) What are the classes to create responsive image and video in Materialize?
There are following classes to create responsive and video that are listed table:
- responsive-img: This class is used to create an responsive image.
- video-container: It is used to create responsive container. That has embedded videos.
- responsive-video: It is used to create HTML5 videos responsive.
7) What are the classes of table in Materialize?
Materialize provides different types of classes that are given below:
| Class Name |
Description |
| None |
It is used to represents a basic table without any border. |
| stripped |
It is used to display a stripped table. |
| bordered |
It is used to create border in table. |
| highlight |
It is used to highlight the table. |
| centered |
It is used to create all the text in center aligns. |
| responsive-table |
It is used to create responsive table |
8) What are Badges and its class in Materialize?
A badge is a component that provides 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:
- badge: It identifies element as an MDL badge component.
- new: It is used to add a new class to badge component.
9) What is the class of BreadCrumb in Materialize?
Materialize provides two classes that are:
- 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?
Chip is component of Materialize that represent small set of information. Like: a contact, tag etc.
Example:
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Chips Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript"
src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
</head>
<body class="container">
<div class="chip">
<img alt="HTML5" src="html5-mini-logo.jpg">HTML 5
</div>
<div class="chip">
HTML 5<i class="material-icons">close</i>
</div>
</body>
</html>
11) What are Collections and its classes of Materialize?
Collection is a group of related information items. There are following Collections classes table listed below.
| Class Name |
Description |
| collection |
It is used to set the div or ul container as collection. |
| collection-item |
It is used to set the a or li item as collection item. |
| active |
It shows the a or li item as active collection item. |
| with-header |
It is used to mark the collection to have header. |
| collection-header |
It is a set the a or li item as collection header. |
| avatar |
It is a set the a or li item as avatar item. |
| dismissible |
It enables collection items to be swiped away. Works on touch screen devices only. |
12) How to we create Pagination in Materialize?
In Materialize, we can create Pagination by using
pagination class. Its class is used with
ul element.
Example:
<ul class="pagination">
<li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
<li class="active"><a href="#!">1</a></li>
<li class="waves-effect"><a href="#!">2</a></li>
<li class="waves-effect"><a href="#!">3</a></li>
<li class="waves-effect"><a href="#!">4</a></li>
<li class="waves-effect"><a href="#!">5</a></li>
<li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
</ul>
13) What do you mean by Dialogs in materialize?
Materialize provides various method to show unremarkable alerts. It also provides a term toast form them. Following is given syntax:
- Materialize.toast(message, displayLength, className, completeCallback);
Where
- message: It is used to displayed Message to the user.
- displayLength: Duration of the message after it will disappear.
- className: Style class to be applied to the toast. For example, 'rounded'.
- completeCallback: This Callback method to be called once toast is dismissed.
14) What are the Materialize classes of Dropdowns?
Materialize provides two dropdown classes that are given below:
- dropdown-content: It Identifies <u> HTML tag as an materialize dropdown component.
- data-activates: It is id of the dropdown ul element.
Example:
<body class="container">
<h3>Drop Down Demo</h3>
<ul id="dropdown" class="dropdown-content">
<li><a href="#">Inbox<span class="badge">12</span></a></li>
<li><a href="#!">Unread<span class="new badge">4</span></a></li>
<li><a href="#">Sent</a></li>
<li class="divider"></li>
<li><a href="#">Outbox<span class="badge">14</span></a></li>
</ul>
<a class="btn dropdown-button" href="#" data-activates="dropdown">Mail Box
<i class="mdi-navigation-arrow-drop-down right"></i></a>
</body>
