Materialize CSS Framework

A modern responsive front-end framework based on Material Design. Create beautiful, consistent interfaces with Google's Material Design principles.

Why Choose Materialize?

Materialize is a modern responsive CSS framework based on Material Design by Google. It provides a set of components and animations that follow Material Design principles, making it easy to create beautiful, consistent web applications.

Material Design

Based on Google's Material Design principles

Responsive

Mobile-first framework with responsive grid

Components

Rich set of pre-built components and animations

Grid System

Key Features:

  • 12-Column Grid - Standard 12-column responsive grid system
  • Mobile-First - Designed with mobile-first approach
  • Screen Sizes - s (mobile), m (tablet), l (desktop) breakpoints
  • Offset & Push/Pull - Advanced grid positioning options
  • Container System - Centered container with proper margins

Grid System Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Grid System</title>
  <!-- Materialize CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <!-- Material Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <style>
    .demo-col {
      background: #26a69a;
      color: white;
      padding: 15px;
      border: 2px solid white;
      text-align: center;
      margin-bottom: 10px;
    }
    .demo-row {
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="center-align">Materialize Grid System</h1>

    <!-- Basic Grid -->
    <div class="card">
      <div class="card-content">
        <h2 class="card-title">Basic 12-Column Grid</h2>
        <div class="row demo-row">
          <div class="col s12 demo-col">s12 (full width)</div>
        </div>
        <div class="row demo-row">
          <div class="col s6 demo-col">s6 (half)</div>
          <div class="col s6 demo-col">s6 (half)</div>
        </div>
        <div class="row demo-row">
          <div class="col s4 demo-col">s4 (third)</div>
          <div class="col s4 demo-col">s4 (third)</div>
          <div class="col s4 demo-col">s4 (third)</div>
        </div>
        <div class="row demo-row">
          <div class="col s3 demo-col">s3 (quarter)</div>
          <div class="col s3 demo-col">s3 (quarter)</div>
          <div class="col s3 demo-col">s3 (quarter)</div>
          <div class="col s3 demo-col">s3 (quarter)</div>
        </div>
      </div>
    </div>

    <!-- Responsive Grid -->
    <div class="card">
      <div class="card-content">
        <h2 class="card-title">Responsive Grid</h2>
        <div class="row demo-row">
          <div class="col s12 m6 l4 demo-col">
            s12 (mobile)<br>
            m6 (tablet)<br>
            l4 (desktop)
          </div>
          <div class="col s12 m6 l4 demo-col">
            Responsive column
          </div>
          <div class="col s12 m6 l4 demo-col">
            Adapts to screen size
          </div>
        </div>
      </div>
    </div>

    <!-- Offset Columns -->
    <div class="card">
      <div class="card-content">
        <h2 class="card-title">Offset Columns</h2>
        <div class="row demo-row">
          <div class="col s6 offset-s3 demo-col">s6 offset-s3 (centered)</div>
        </div>
        <div class="row demo-row">
          <div class="col s4 offset-s4 demo-col">s4 offset-s4</div>
        </div>
        <div class="row demo-row">
          <div class="col s4 demo-col">s4</div>
          <div class="col s4 offset-s4 demo-col">s4 offset-s4</div>
        </div>
      </div>
    </div>

    <!-- Push and Pull -->
    <div class="card">
      <div class="card-content">
        <h2 class="card-title">Push and Pull (Column Reordering)</h2>
        <div class="row demo-row">
          <div class="col s7 push-s5 demo-col">s7 push-s5 (moved right)</div>
          <div class="col s5 pull-s7 demo-col">s5 pull-s7 (moved left)</div>
        </div>
      </div>
    </div>

    <!-- Section Divider -->
    <div class="divider"></div>

    <!-- Grid with Sections -->
    <div class="section">
      <h2>Grid with Sections</h2>
      <div class="row">
        <div class="col s12 m4">
          <div class="card-panel teal lighten-2">
            <span class="white-text">Section 1</span>
          </div>
        </div>
        <div class="col s12 m4">
          <div class="card-panel teal">
            <span class="white-text">Section 2</span>
          </div>
        </div>
        <div class="col s12 m4">
          <div class="card-panel teal darken-2">
            <span class="white-text">Section 3</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Materialize JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

Components

Component Library:

ButtonsCardsNavbarCollectionsBadgesChipsFooterIcons

Components Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Components</title>
  <!-- Materialize CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <!-- Material Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <style>
    body {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    main {
      flex: 1 0 auto;
    }
    .component-demo {
      margin: 20px 0;
    }
  </style>
</head>
<body>
  <!-- Navigation -->
  <nav>
    <div class="nav-wrapper teal">
      <div class="container">
        <a href="#" class="brand-logo">Materialize</a>
        <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
          <li><a href="#">Home</a></li>
          <li><a href="#">Components</a></li>
          <li><a href="#">JavaScript</a></li>
          <li><a href="#">Mobile</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <ul class="sidenav" id="mobile-demo">
    <li><a href="#">Home</a></li>
    <li><a href="#">Components</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">Mobile</a></li>
  </ul>

  <main>
    <div class="container">
      <h1 class="center-align">Materialize Components</h1>

      <!-- Buttons -->
      <div class="card component-demo">
        <div class="card-content">
          <h2 class="card-title">Buttons</h2>
          <div class="section">
            <a class="waves-effect waves-light btn">Default</a>
            <a class="waves-effect waves-light btn teal"><i class="material-icons left">cloud</i>Button</a>
            <a class="waves-effect waves-light btn disabled">Disabled</a>
            <a class="waves-effect waves-light btn-large">Large</a>
            <a class="waves-effect waves-light btn-small">Small</a>
            <a class="waves-effect waves-light btn-flat">Flat</a>
            <a class="waves-effect waves-light btn-floating pulse"><i class="material-icons">add</i></a>
          </div>
        </div>
      </div>

      <!-- Cards -->
      <div class="card component-demo">
        <div class="card-content">
          <h2 class="card-title">Cards</h2>
          <div class="row">
            <div class="col s12 m6">
              <div class="card blue-grey darken-1">
                <div class="card-content white-text">
                  <span class="card-title">Card Title</span>
                  <p>I am a very simple card. I am good at containing small bits of information.
                  I am convenient because I require little markup to use effectively.</p>
                </div>
                <div class="card-action">
                  <a href="#">This is a link</a>
                  <a href="#">This is a link</a>
                </div>
              </div>
            </div>
            <div class="col s12 m6">
              <div class="card">
                <div class="card-image">
                  <img src="https://materializecss.com/images/sample-1.jpg">
                  <span class="card-title">Card Title</span>
                  <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
                </div>
                <div class="card-content">
                  <p>I am a very simple card. I am good at containing small bits of information.
                  I am convenient because I require little markup to use effectively.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Collections -->
      <div class="card component-demo">
        <div class="card-content">
          <h2 class="card-title">Collections</h2>
          <ul class="collection">
            <li class="collection-item">Alvin</li>
            <li class="collection-item">Alvin</li>
            <li class="collection-item">Alvin</li>
            <li class="collection-item">Alvin</li>
          </ul>
        </div>
      </div>

      <!-- Badges -->
      <div class="card component-demo">
        <div class="card-content">
          <h2 class="card-title">Badges</h2>
          <a class="waves-effect waves-light btn">Inbox <span class="new badge">4</span></a>
          <a class="waves-effect waves-light btn">Notifications <span class="new badge blue" data-badge-caption="new">4</span></a>
        </div>
      </div>

      <!-- Chips -->
      <div class="card component-demo">
        <div class="card-content">
          <h2 class="card-title">Chips</h2>
          <div class="chip">
            Tag 1
            <i class="close material-icons">close</i>
          </div>
          <div class="chip">
            Tag 2
            <i class="close material-icons">close</i>
          </div>
          <div class="chip">
            Tag 3
            <i class="close material-icons">close</i>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- Footer -->
  <footer class="page-footer teal">
    <div class="container">
      <div class="row">
        <div class="col l6 s12">
          <h5 class="white-text">Footer Content</h5>
          <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
        </div>
        <div class="col l4 offset-l2 s12">
          <h5 class="white-text">Links</h5>
          <ul>
            <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
            <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
            <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
            <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
      © 2024 Materialize CSS
      <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
      </div>
    </div>
  </footer>

  <!-- Materialize JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
    // Initialize components
    document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.sidenav');
      var instances = M.Sidenav.init(elems);
    });
  </script>
</body>
</html>

Forms

Form Features:

  • Input Fields - Beautiful animated input fields with labels
  • Validation - Built-in validation states and helper text
  • Select Menus - Enhanced select dropdowns with search
  • Checkboxes & Radios - Material Design styled form controls
  • Date Pickers - Interactive date and time pickers
  • File Inputs - Styled file upload components

Forms Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Forms</title>
  <!-- Materialize CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <!-- Material Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1 class="center-align">Materialize Forms</h1>

    <!-- Basic Form -->
    <div class="card">
      <div class="card-content">
        <h2 class="card-title">Contact Form</h2>
        <form>
          <!-- Text Inputs -->
          <div class="row">
            <div class="input-field col s6">
              <input id="first_name" type="text" class="validate">
              <label for="first_name">First Name</label>
            </div>
            <div class="input-field col s6">
              <input id="last_name" type="text" class="validate">
              <label for="last_name">Last Name</label>
            </div>
          </div>

          <!-- Email Input -->
          <div class="row">
            <div class="input-field col s12">
              <input id="email" type="email" class="validate">
              <label for="email">Email</label>
              <span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
            </div>
          </div>

          <!-- Textarea -->
          <div class="row">
            <div class="input-field col s12">
              <textarea id="textarea1" class="materialize-textarea"></textarea>
              <label for="textarea1">Message</label>
            </div>
          </div>

          <!-- Select -->
          <div class="row">
            <div class="input-field col s12">
              <select>
                <option value="" disabled selected>Choose your option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
              </select>
              <label>Materialize Select</label>
            </div>
          </div>

          <!-- Checkboxes -->
          <div class="row">
            <div class="col s12">
              <p>
                <label>
                  <input type="checkbox" class="filled-in" checked="checked" />
                  <span>Filled in</span>
                </label>
              </p>
              <p>
                <label>
                  <input type="checkbox" />
                  <span>Default</span>
                </label>
              </p>
            </div>
          </div>

          <!-- Radio Buttons -->
          <div class="row">
            <div class="col s12">
              <p>Choose your favorite color:</p>
              <p>
                <label>
                  <input name="group1" type="radio" checked />
                  <span>Red</span>
                </label>
              </p>
              <p>
                <label>
                  <input name="group1" type="radio" />
                  <span>Yellow</span>
                </label>
              </p>
              <p>
                <label>
                  <input class="with-gap" name="group1" type="radio" />
                  <span>Green</span>
                </label>
              </p>
            </div>
          </div>

          <!-- Switches -->
          <div class="row">
            <div class="col s12">
              <p>Switches</p>
              <div class="switch">
                <label>
                  Off
                  <input type="checkbox">
                  <span class="lever"></span>
                  On
                </label>
              </div>
              <div class="switch">
                <label>
                  No
                  <input type="checkbox" checked>
                  <span class="lever"></span>
                  Yes
                </label>
              </div>
            </div>
          </div>

          <!-- File Input -->
          <div class="row">
            <div class="file-field input-field col s12">
              <div class="btn">
                <span>File</span>
                <input type="file">
              </div>
              <div class="file-path-wrapper">
                <input class="file-path validate" type="text" placeholder="Upload one or more files">
              </div>
            </div>
          </div>

          <!-- Range Slider -->
          <div class="row">
            <div class="col s12">
              <p>Range</p>
              <form action="#">
                <p class="range-field">
                  <input type="range" id="test5" min="0" max="100" />
                </p>
              </form>
            </div>
          </div>

          <!-- Date Picker -->
          <div class="row">
            <div class="input-field col s12">
              <input type="text" class="datepicker">
              <label for="birthdate">Birthdate</label>
            </div>
          </div>

          <!-- Buttons -->
          <div class="row">
            <div class="col s12">
              <button class="btn waves-effect waves-light" type="submit" name="action">Submit
                <i class="material-icons right">send</i>
              </button>
              <button class="btn waves-effect waves-light teal lighten-2" type="reset" name="action">Reset</button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!-- Input Variations -->
    <div class="card">
      <div class="card-content">
        <h2 class="card-title">Input Variations</h2>
        
        <!-- Character Counter -->
        <div class="row">
          <div class="input-field col s12">
            <input id="input_text" type="text" data-length="10" class="validate">
            <label for="input_text">Text with character limit</label>
          </div>
        </div>

        <!-- Icons -->
        <div class="row">
          <div class="input-field col s12">
            <i class="material-icons prefix">account_circle</i>
            <input id="icon_prefix" type="text" class="validate">
            <label for="icon_prefix">First Name with Icon</label>
          </div>
        </div>

        <!-- Prefilled Input -->
        <div class="row">
          <div class="input-field col s12">
            <input id="prefilled" type="text" class="validate" value="I am prefilled">
            <label for="prefilled">Prefilled Text</label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Materialize JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
    // Initialize form components
    document.addEventListener('DOMContentLoaded', function() {
      // Select
      var elems = document.querySelectorAll('select');
      var instances = M.FormSelect.init(elems);

      // Datepicker
      var datepickers = document.querySelectorAll('.datepicker');
      var dateInstances = M.Datepicker.init(datepickers, {
        format: 'yyyy-mm-dd',
        autoClose: true
      });

      // Character counter
      var charCounters = document.querySelectorAll('#input_text');
      var charInstances = M.CharacterCounter.init(charCounters);
    });
  </script>
</body>
</html>

JavaScript Components

Interactive Components:

  • Modal - Dialog prompts with flexible content
  • Collapsible - Expandable/collapsible content sections
  • Dropdown - Contextual overlays for displaying links
  • Tabs - Dynamic tabbed content navigation
  • Carousel - Responsive image and content sliders
  • Tooltips - Small popup boxes with information
  • Material Box - Lightbox functionality for images

JavaScript Components Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize JavaScript Components</title>
  <!-- Materialize CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <!-- Material Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1 class="center-align">Materialize JavaScript Components</h1>

    <!-- Modal -->
    <div class="card">
      <div class="card-content">
        <h2 class="card-title">Modal</h2>
        <!-- Modal Trigger -->
        <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal Demo</a>

        <!-- Modal Structure -->
        <div id="modal1" class="modal">
          <div class="modal-content">
            <h4>Modal Header</h4>
            <p>A bunch of text</p>
          </div>
          <div class="modal-footer">
            <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
            <a href="#!" class="modal-close waves-effect waves-red btn-flat">Close</a>
          </div>
        </div>
      </div>
    </div>

    <!-- Collapsible -->
    <div class="card">
      <div class="card-content">
        <h2 class="card-title">Collapsible</h2>
        <ul class="collapsible">
          <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
          </li>
          <li>
            <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
          </li>
          <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
          </li>
        </ul>
      </div>
    </div>

    <!-- Dropdown -->
    <div class="card">
      <div class="card-content">
        <h2 class="card-title">Dropdown</h2>
        <!-- Dropdown Trigger -->
        <a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>

        <!-- Dropdown Structure -->
        <ul id='dropdown1' class='dropdown-content'>
          <li><a href="#!">one</a></li>
          <li><a href="#!">two</a></li>
          <li class="divider" tabindex="-1"></li>
          <li><a href="#!">three</a></li>
        </ul>
      </div>
    </div>

    <!-- Tabs -->
    <div class="card">
      <div class="card-content">
        <h2 class="card-title">Tabs</h2>
        <div class="row">
          <div class="col s12">
            <ul class="tabs">
              <li class="tab col s3"><a href="#test1">Test 1</a></li>
              <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
              <li class="tab col s3"><a href="#test3">Test 3</a></li>
              <li class="tab col s3"><a href="#test4">Test 4</a></li>
            </ul>
          </div>
          <div id="test1" class="col s12">Test 1 Content</div>
          <div id="test2" class="col s12">Test 2 Content</div>
          <div id="test3" class="col s12">Test 3 Content</div>
          <div id="test4" class="col s12">Test 4 Content</div>
        </div>
      </div>
    </div>

    <!-- Carousel -->
    <div class="card">
      <div class="card-content">
        <h2 class="card-title">Carousel</h2>
        <div class="carousel">
          <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
          <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
          <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
          <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
          <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
        </div>
      </div>
    </div>

    <!-- Tooltips -->
    <div class="card">
      <div class="card-content">
        <h2 class="card-title">Tooltips</h2>
        <a class="btn tooltipped" data-position="bottom" data-tooltip="I am a tooltip">Hover me!</a>
        <a class="btn tooltipped" data-position="top" data-tooltip="I am a tooltip on top">Top Tooltip</a>
        <a class="btn tooltipped" data-position="left" data-tooltip="I am a left tooltip">Left Tooltip</a>
        <a class="btn tooltipped" data-position="right" data-tooltip="I am a right tooltip">Right Tooltip</a>
      </div>
    </div>

    <!-- Material Box -->
    <div class="card">
      <div class="card-content">
        <h2 class="card-title">Material Box (Lightbox)</h2>
        <img class="materialboxed" width="250" src="https://lorempixel.com/250/250/nature/1" data-caption="A beautiful nature image">
      </div>
    </div>

    <!-- Feature Discovery -->
    <div class="card">
      <div class="card-content">
        <h2 class="card-title">Feature Discovery</h2>
        <!-- Tap Target Trigger -->
        <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
          <a id="menu" class="btn btn-floating btn-large cyan">
            <i class="material-icons">menu</i>
          </a>
        </div>

        <!-- Tap Target Structure -->
        <div class="tap-target cyan" data-target="menu">
          <div class="tap-target-content">
            <h5>Title</h5>
            <p>A bunch of text</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Materialize JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
    // Initialize all JavaScript components
    document.addEventListener('DOMContentLoaded', function() {
      // Modal
      var modals = document.querySelectorAll('.modal');
      var modalInstances = M.Modal.init(modals);

      // Collapsible
      var collapsibles = document.querySelectorAll('.collapsible');
      var collapsibleInstances = M.Collapsible.init(collapsibles);

      // Dropdown
      var dropdowns = document.querySelectorAll('.dropdown-trigger');
      var dropdownInstances = M.Dropdown.init(dropdowns);

      // Tabs
      var tabs = document.querySelectorAll('.tabs');
      var tabInstances = M.Tabs.init(tabs);

      // Carousel
      var carousels = document.querySelectorAll('.carousel');
      var carouselInstances = M.Carousel.init(carousels);

      // Tooltips
      var tooltips = document.querySelectorAll('.tooltipped');
      var tooltipInstances = M.Tooltip.init(tooltips);

      // Materialbox
      var materialboxes = document.querySelectorAll('.materialboxed');
      var materialboxInstances = M.Materialbox.init(materialboxes);

      // Tap Target
      var tapTargets = document.querySelectorAll('.tap-target');
      var tapTargetInstances = M.TapTarget.init(tapTargets);
    });
  </script>
</body>
</html>

Quick Start Guide

CDN Method (Easiest)

<!-- Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Materialize JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Package Manager (npm)

# Install via npm
npm install materialize-css

# Import in your JavaScript
import M from 'materialize-css';

# Import CSS
import 'materialize-css/dist/css/materialize.min.css';

# Initialize components
document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.modal');
  var instances = M.Modal.init(elems);
});

Best Practices

✅ Do This

  • Use container class - Wrap content in container for proper spacing
  • Initialize JavaScript - Always initialize components after DOM load
  • Follow Material Design - Stick to Material Design principles
  • Use Material Icons - Leverage Google's Material Icons
  • Mobile-first approach - Design for mobile then enhance for desktop

❌ Avoid This

  • Forgetting JavaScript init - Components need initialization
  • Overriding core styles - Use SASS variables for customization
  • Ignoring breakpoints - Always consider responsive design
  • Mixing design systems - Stick to Material Design patterns
  • Complex nesting - Keep HTML structure clean and semantic

Ready to Build with Materialize?

Start creating beautiful, Material Design compliant websites with this modern CSS framework that combines aesthetics with functionality.

< PreviousNext >