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