Open In App

Materialize CSS Introduction and Installation

Improve
Improve
Like Article
Like
Save
Share
Report

Materialize CSS is a design language that combines the classic principles of successful design along with innovation and technology.

Materialize CSS

Materialize CSS is a modern front-end framework that enables developers to create visually appealing and responsive web applications with ease. Inspired by Google’s Material Design principle, It’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=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
    <script type="text/javascript"
src="https://code.jquery.com/jquery-2.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
    </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:

Summary

Materialize CSS is indeed a CSS framework. It provides pre-designed CSS styles and components that developers can easily use to build responsive and visually appealing websites. In addition to CSS, Materialize also includes JavaScript components and plugins to enhance interactivity and functionality. Overall, Materialize CSS serves as a comprehensive toolkit for front-end development, offering a wide range of features to simplify the process of building modern web applications.



Last Updated : 19 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads