Get started with materialize CDN

MIT licensed

Materialize CSS: Build responsive sites with this framework, featuring JS for Material Design elements.

Tags:
  • css
  • js
  • sass
  • mobile-first
  • responsive
  • front-end
  • framework
  • ux
  • material
  • design

Stable version

Copied!

How to start using materialize CDN


<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.cdnhub.io/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
    <nav>
        <div class="nav-wrapper blue darken-4">
            <a href="#!" class="brand-logo">Logo</a>
            <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>

    <div class="container">
        <h1 class="header center">Materialize Example</h1>
        <p class="center">This is an example using Materialize CSS framework.</p>

        <div class="row">
            <div class="col s6 offset-s3">
                <div id="text-field" class="input-field col s12">
                    <input id="autocomplete-input" type="text" class="autocomplete">
                    <label for="autocomplete-input">Autocomplete</label>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var elements = document.querySelectorAll('.autocomplete');
            var instances = M.Autocomplete.init(elements, { data: [
                'Apple', 'Banana', 'Mango'
            ]});
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions