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
0.100.0
0.100.1
0.100.2
0.62
0.68
0.69
0.81
0.82
0.9
0.91
0.92.0
0.92.1
0.93.0
0.93.1
0.94.0
0.94.1
0.94.2
0.95.0
0.95.1
0.95.2
0.95.3
0.96.0
0.96.1
0.97.0
0.97.1
0.97.2
0.97.3
0.97.4
0.97.5
0.97.6
0.97.7
0.97.8
0.98.0
0.98.1
0.98.2
0.99.0
*** 1.0.0
1.0.0-alpha.1
1.0.0-alpha.2
1.0.0-alpha.3
1.0.0-alpha.4
1.0.0-beta
1.0.0-rc.1
1.0.0-rc.2