Materialize | Introduction and Installation

Difficulty Level : Basic
Last Updated : 31 Dec, 2019

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

Why Materialize ?

It is Easier to use.
It makes the web-page dynamic and responsive.
It makes the web-page which is compatible in Mobile, Tablets, Laptop as well.
Freely available on materializecss.com

Materialized comprises of mainly three components:

HTML
CSS
Javascript

Basic HTML Template:

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Learning Materialize</title>  
    <meta name="description" content="Hello World">  
</head>  
  
<body>  
    <div> Hello World!</div>  
    <div> You're learning Materialize on Geeksforgeeks.org</div>  
</body>  
</html>  

Installing Materialize: There are two methods to install the Materialize.

Method 1: Copy the link and add the head section on HTML Template.

<!-- 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 2: Use the Materialize Starter Template.

<!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" /> 
    <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> 
  
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0" /> 
</head> 
  
<body> 
    <div> Hello World!</div> 
    <div> You're learning Materialize on Geeksforgeeks.org</div> 
  
    <!--JavaScript at end of body for optimized loading-->
    <script type="text/javascript" src="js/materialize.min.js"></script> 
</body> 
  
</html> 

Output:

My Personal Notes

Related Articles