Materialize CSS

  • Last Updated :23 Dec, 2021

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.

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/

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 [email protected]

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

My Personal Notesarrow_drop_up

Writing code in comment? Please use ide.geeksforgeeks.org, generate link and share the link here.