Related Articles

Related Articles

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!-- Compiled and minified CSS -->
        <link rel="stylesheet" 
              href=
      
        <!-- Compiled and minified JavaScript -->
        <script src=
        </script>

    chevron_right

    
    

  • Method 2: Use the Materialize Starter Template.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <!--Import Google Icon Font-->
              rel="stylesheet">
      
        <!--Import materialize.css-->
        <link type="text/css"
              rel="stylesheet"
              href="css/materialize.min.css"
              media="screen, projection" />
        <link rel="stylesheet"
              href=
      
        <!-- Compiled and minified JavaScript -->
        <script src=
      </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>

    chevron_right

    
    

    Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :