How to use Materialize CSS ?

Last Updated : 14 Sep, 2021

Materialize CSS is a design language that is used to develop the system of design that allows for a unified user experience across all products on any platform.

Materialize CSS comes in two different forms, any of them can be used by simply downloading that file, you can use the Materialize CSS into your system.

Materialize: This is the standard version that comes with both the minified and non-minified CSS and JavaScript files. You can download this file from this link https://github.com/Dogfalo/materialize/releases/download/1.0.0/materialize-v1.0.0.zip
Sass: This version contains the source SCSS files. If you choose this version you have more control over which components to include but you need a Sass compiler for this. You can download this file from this link https://github.com/Dogfalo/materialize/releases/download/1.0.0/materialize-src-v1.0.0.zip

Note: We can use CDN links or install Materialize through NPM and Bower.

Using CDN Link:

<!– 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>

NPM Install Command:

npm install materialize-css@next

Bower Install Command:

bower install materialize

Materialize Setup: After downloading the file, simply unzip the file in your project folder. Your Materialize folder will look like the below image.

SASS

Materialize

HTML Setup: Now simply create an HTML file where you need to import the Materialize, we use the Materialize standard version.

Example 1: In this example, we will simply use text color as well as the background color. To make the correct alignment we will use col and flow class. Use the above libraries in your code or use them in the local folder as given below.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  
    <!--Import Google Icon Font-->
    <link href= 
"https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet"> 
  
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet"
        href="css/materialize.min.css" 
        media="screen,projection" /> 
  
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
</head> 
  
<body> 
    <h1 class="green-text text-darken-1"> 
        GeeksforGeeks 
    </h1> 
      
    <div class="row"> 
        <div class="col s12"> 
            <span class="flow-text green darken-1"> 
                A Computer Science Portal for Geeks 
            </span> 
        </div> 
    </div> 
  
    <!--JavaScript at end of body for  
        optimized loading-->
    <script type="text/javascript" 
        src="js/materialize.min.js"> 
    </script> 
</body> 
  
</html> 

Output:

Example 2: In this example, we will simply use text color as well as classes col and flow-text for nice visual design.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!--Import Google Icon Font-->
    <link href= 
"https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet"> 
  
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" 
        href="css/materialize.min.css" 
        media="screen,projection" /> 
  
    <!--Let browser know website is  
        optimized for mobile-->
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
</head> 
  
<body> 
    <h1 class="green-text text-darken-2"> 
        GeeksforGeeks 
    </h1> 
      
    <div class="row"> 
        <div class="col s12"> 
            <span class="flow-text"> 
                This is simple example off how to  
                use Materialize in your website 
            </span> 
        </div> 
  
        <div class="col s6 offset-s6"> 
            <span class="flow-text"> 
                Materialize CSS 
            </span> 
        </div> 
    </div> 
    <!--JavaScript at end of body for  
        optimized loading-->
    <script type="text/javascript" 
        src="js/materialize.min.js"> 
    </script> 
</body> 
  
</html> 