Materialize CSS

Last Updated : 27 Sep, 2023

Materialize CSS is a design language that combines the classic principles of successful design along with innovation and technology. It is created and designed by Google. Google’s goal is to develop a system of design that allows for a unified user experience across all its products on any platform.

Materialize CSS

Materialize CSS

Why Materialize CSS?

  • It is easier to use and makes the web page dynamic and responsive.
  • It makes the web-page which is compatible in Mobile, Tablets, laptops as well.
  • Freely available on https://materializecss.com/
Materialize CSS

Materialize CSS

Installing Materialize CSS:

Method 1: Go to the official documentation of the Materialize https://materializecss.com/getting-started.html and download the latest version available. After that put the downloaded materialize.min.js and materialize.min.css file in a directory of your project.

 

Method 2: You can use CDN link to run the code without installing it. Include the following CDN links inside the head tag.

<!– Compiled and minified CSS –>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css”>

<!– Compiled and minified JavaScript –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js”></script>

Method 3: Install Materialize using npm. Before installing it, first install node.js and npm and then run the following command:

npm install materialize-css@next

Method 4: You can install Materialize using Bower package manager. Use the following command to install it.

bower install materialize

Now let’s understand the working of Materialize using an example.

Example: In this example, we have created a simple breadcrumb with the current location BreadCrumb. It means you are on the BreadCrumb page and it is under Materialize category and HTML5 points HTML5 page.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>BreadCrumb</title>
    <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>
    <style>
        .container {
            height: 64px;
            display: flex;
            align-items: center;
        }

        h1 {
            justify-content: center;
            text-align: center;
        }

        div {
            display: flex;
            align-items: center;
            color: white;
            background-color: green;
        }

        span {
            font-family: Roboto;
            font-weight: 300;
            font-size: 20px;
            color: white;
        }

        i {
            margin: 0 8px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div>
            <span>HTML5
                <i class="material-icons">double_arrow</i>
        </div>
        <div>
            <span>Materialize
                <i class="material-icons">double_arrow</i>
        </div>
        <div>
            <span>BreadCrumb
                <i class="material-icons">double_arrow</i>
        </div>
    </div>
    <h1>GeeksForGeeks</h1>
</body>

</html>

Output:

Learn More about Materialize CSS:

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above


Share your thoughts in the comments

Similar Reads

Primer CSS
Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns are steady and interoperable with every other. Its a
3 min read
Pure CSS
Pure CSS is a CSS framework. It is a set of free and open-source tools for building responsive websites and web applications. Yahoo developed this, which is used to make websites that are quicker, more elegant, and more responsive. It is a viable alternative to Bootstrap. Pure CSS is designed with keeping responsive design in mind. So we get prebui
3 min read
Learn CSS - Free Course
CSS, or Cascading Style Sheets, is a language that simplifies web page presentation. It allows you to apply styles to web pages independently i.e. you can define colors, fonts, spacing, and more, to make your website look the way you desire.
3 min read
Materialize CSS Preloader
Preloaders are used for providing symbolic messages that tells users about the website status like "Loading" or "Not crashed". Materialize provides CSS classes to give various types of preloaders. The following are the available classes provided by Materialize CSS. Linear: It identifies an element as a progress bar class required for "div" element.
5 min read
Explain Dialogs in Materialize CSS
Dialogs in Materialize CSS provide users additional information to users if needed by them. These are directly not visible on the web-page. The dialog transitions are related to the information that is required at that point of time. Materialize provides various methods to show dialogs. Syntax: Materialize.toast(string, time, styleClass,callback);
2 min read
Materialize CSS Colors
It is created with HTML, CSS, and JavaScript, and designed by Google. Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Color: Here is a color palette based on the material design base colors. Each of these colors is defined with a base color class and an optional li
2 min read
Materialize CSS Grids
There are 12 standard columns fluid responsive grid systems that helps you to layout your page in an ordered and easy way. It uses the row and column style classes to define rows and columns respectively. Rows are used to specify a padding-less container to be used for responsive columns and col are used to specify a column with sub-classes. There
3 min read
Materialize CSS | Tables
Tables are nice and easy way to organize a lot of data. Materialize CSS provides a few utility classes to style table. In addition to improve mobile experience, all tables on mobile-screen widths are centered automatically. Following are the styles for table: Stripped Table: C/C++ Code &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head
3 min read
Materialize CSS Helpers
There are several helpers in materialize CSS that are used for designing needs such as: AlignmentHiding/Showing contentFormatting 1. Alignment: Content can be aligned horizontally or vertically by using the following classes: Vertical Align: It can be easily done by adding the class valign-wrapper to the container holding the items that you want to
3 min read
Materialize CSS Badges
Materialize badge is a component that is used to notify, if there are new or unread messages or notifications display. Adding a new class to a badge component gives it a background. There are different ways of using badge component: Badges in Collections: &lt;div class="collection"&gt; &lt;a href="#!" class="collection-item"&gt;&lt;span class="badg
4 min read