- Materialize Tutorial
- Materialize - Home
- Materialize - Overview
- Materialize - Environment Setup
- Materialize - Colors
- Materialize - Grids
- Materialize - Helpers
- Materialize - Media
- Materialize - Shadows
- Materialize - Tables
- Materialize - Typography
- Materialize - Badges
- Materialize - Buttons
- Materialize - Breadcrumb
- Materialize - Cards
- Materialize - Chips
- Materialize - Collections
- Materialize - Footer
- Materialize - Form
- Materialize - Icons
- Materialize - Navbar
- Materialize - Pagination
- Materialize - Preloader
- Materialize - Collapsible
- Materialize - Dialogs
- Materialize - Dropdowns
- Materialize - Tabs
- Materialize - Waves
- Materialize Useful Resources
- Materialize - Quick Guide
- Materialize - Useful Resources
- Materialize - Discussion
Materialize - Environment Setup
How to Use Materialize?
There are two ways to use Materialize −
Local Installation − You can download the materialize.min.css and materialize.min.js files on your local machine and include it in your HTML code.
CDN Based Version − You can include the materialize.min.css and materialize.min.js files into your HTML code directly from the Content Delivery Network (CDN).
Local Installation
Go to https://materializecss.com/getting-started.html to download the latest version available.
Then, put the downloaded materialize.min.js file in a directory of your website, e.g. /js and materialize.min.css in /css.
Example
Include the css and js file in your HTML file as follows.
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="materialize.min.js"></script>
</head>
<body>
<div class="card-panel teal lighten-2"><h3>Hello World!</h3></div>
</body>
</html>
It will produce the following result.
CDN Based Version
You can include the materialize.min.js and materialize.min.css files into your HTML code directly from the Content Delivery Network (CDN). cdnjs.cloudflare.com provides content for the latest version.
We are using cdnjs.cloudflare.com CDN version of the library throughout this tutorial.
Example
Rewrite the above example using materialize.min.css and materialize.min.js from cdnjs.cloudflare.com CDN.
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
</head>
<body>
<div class="card-panel teal lighten-2"><h3>Hello World!</h3></div>
</body>
</html>
It will produce the following result.
