Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

Materialize CSS Introduction and Installation

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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 a 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>
    <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
Last Updated : 24 Mar, 2022
Like Article
Save Article
Similar Reads
Related Tutorials