Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Materialize | Introduction and Installation

  • Difficulty Level : Basic
  • Last Updated : 08 Dec, 2021

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.

Features:

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

Installing Materialize: There are following two ways to install materialize.

Method 1: Go to the official documentation of the Materialize CSS 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 also install it using the CDN versions. Include the following CDN links inside the script 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>

Now let’s understand the working of Materialize using an example.

Example: The below example shows the implementation of dialogs in Materialize CSS.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
    <script type="text/javascript"
    <script src=
    </script>
  
    <script>
        function Toast1(string, timeLength) {
            Materialize.toast(
                '<em>' + string + '</em>', timeLength
            );
        }
        function Toast2(string, timeLength) {
            Materialize.toast(
                '<b>' + string + '</b>', timeLength, 'rounded'
            );
        }
        function Toast3(string, timeLength) {
            Materialize.toast(
                '<u>' + string + '<u>', timeLength
            );
        }
    </script>
</head>
  
<body>
    <body class="container">
        <h4>Toasts</h4>
        <a class="btn" onclick=
            "Toast1('Emphasized Alert!', 1500)">
            Emphasized Alert!!
        </a><br><br>
  
        <a class="btn" onclick=
            "Toast2('Bold N rounded Alert!', 1500)">
            Bold N rounded Alert!!
        </a><br><br>
  
        <a class="btn" onclick=
            "Toast3('Underlined Alert!', 1500)">
            Underlined Alert!!
        </a><br><br>
    </body>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!