Getting Started
Learn how to easily start using Materialize in your website.
Download
Materialize
This is the standard version that comes with both the minified and unminified CSS and JavaScript files. This option requires little to no setup. Use this if you are unfamiliar with Sass.
Materializechevron_rightSass
This version contains the source SCSS files. By choosing this version you have more control over which components to include. You will need a Sass compiler if you choose this option.
Sourcechevron_rightCDN
Please download the following compiled files as the links are not permanent.
Copied!
content_copy
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://exho-g.github.io/materialize/dist/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://exho-g.github.io/materialize/dist/js/materialize.min.js"></script>
Thanks for Downloading!
Setup
Project Structure
After downloading, extract the files into the directory where your website is located. Your directory will look something like this.
You'll notice that there are two sets of the files. The min
means that the file is "compressed" to reduce load times. These minified files are usually used
in production while it is better to use
the unminified files during development.
MyWebsite/
|--css/
| |--materialize.css
|
|--fonts/
| |--roboto/
|
|--js/
| |--materialize.js
|
|--index.html
HTML Setup
Next you just have to make sure you link the files properly in your webpage. Generally it is wise to import javascript files at the end of the body to reduce page load time. Follow the example below on how to import Materialize into your webpage.
Copied!
content_copy
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
Templates
Starter Template
This is the simplest starter page with a Header, Call-to-Action, and Icon Features.
Demo search Downloadfile_downloadParallax Template
This is the simplest starter page with a Header, Call-to-Action, and Icon Features.
Demosearch Downloadfile_downloadSass Setup
Compiling Sass
Instead of having a css folder, you will find that the download instead contains many .scss files which contain the styles of individual components. Unfortunately, the browser cannot interpret Sass, so you must have your Sass compiler compile the scss/materialize.scss into a regular CSS file. At this point you can link this newly outputted file in your HTML page.
MyWebsite/
|--css/
| |--materialize.css <-- compiled from scss/materialize.scss
|
|--js/
| |--materialize.js
|
|--scss/
| |--materialize.scss
| |--components/
|
|--index.html