Materialize CSS Installation

In this Materialize CSS installation tutorial, you will learn how to install Materialize in the project. The followings are the installation methods to get started with Materialize CSS.

Local installation
Using CDN link
Using NPM
Sass Setup

Local Installation

Follow the following Materialize installation instructions 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 js file 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

     
      <!DOCTYPE html>
<html lang="en">
  <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" />
    <meta name="description" content="">
  </head>
  <body>
    <!--JavaScript at end of the body for optimized loading-->
    <script type="text/javascript" src="js/materialize.min.js"></script>
  </body>
</html>

Try it yourself

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

     
      <!DOCTYPE html>
<html lang="en">
  <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>

Try it yourself

Install Materialize Using NPM

Before Materialize installation, make sure that your system must have installed node.js and npm and then run npm install materialize-css command. You will get source files as well as the compiled CSS and Javascript files.


    npm install materialize-css@next

Sass Setup

This section is only relevant if you want to download the Sass version of Materialize.

Compiling Sass

Materialize Sass mainly consists of SCSS files. By selecting this version, user has more control over which component to use. Since, browser does not support SCSS hence an external Sass compiler is needed.

Project Structure
	
   MyWebsite/
  |--css/
  |  |--materialize.css <-- compiled from scss/materialize.scss
  |
  |--font/
  |  |--material-design-icons/
  |  |--roboto/
  |
  |--js/
  |  |--materialize.js
  |
  |--scss/
  |  |--materialize.scss
  |  |--components/
  |
  |--index.html
	
 

Conclusion

It is clear that the Materialize CSS installation process can be done by locally, via CDN, or through NPM. You can also use its Sass setup in the project, but keep in mind that an external compiler is needed to compile SCSS to CSS because browsers do not understand SCSS.

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS