Materialize CSS Introduction and Installation (original) (raw)

Last Updated : 12 Jul, 2025

**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 –> <!– Compiled and minified JavaScript –>

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

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

HTML `

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

Toasts

Emphasized Alert!!

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

**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.