Materialize CSS Installation
Materialize CSS installation can be done by following ways.
- Local installation
- Using CDN link
Local Installation
Follow the followings step to install Materialize CSS locally.
- Go to the official website of Materialize CSS and download the latest version.
- Place the downloaded minified version of CSS and
jsfile in the website project directory.
Project Structure
MyWebsite/
|--css/
| |--materialize.css
|
|--fonts/
| |--roboto/
|
|--js/
| |--materialize.js
|
|--index.html
HTML Setup
Import the downloaded materialize.min.css file inside the head section and materialize.min.js file just before the closing </body> tag. At the end, make sure that all the link is properly linked.
Source Code
Download<!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 the browser know the website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<!--JavaScript at end of the body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html> Using CDN Link
Follow the following steps to include CDN link inside the project directory.
- Step:1 Go to CDN (Content Delivery Network) link provider's website & find out the following CDN links.
CDN Link
<!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> - Step:2 Include Materialize CSS CDN link in the head section of the HTML 5 template:
Materialize CSS CDN Link
<!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> - Step:3 Include Materialize CSS Javascript CDN link in the Body section, just before the closing
</body>tag.Materialize Javascript CDN Link
<!-- Compiled and minified Js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
Source Code
Download<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<!--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 src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
×
![Modal Image]()