materialize
  1. materialize-installing-materialize
PreviousNext

Installing Materialize

To use Materialize in your web project, you need to include the Materialize CSS and JavaScript files in your HTML file. There are several ways to install Materialize:

CDN installation

CDN installation is the easiest way to include Materialize in your project. You need to paste the following code in the <head> section of your HTML file:

<!--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">

<!--Import jQuery before materialize.js-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

NPM installation

If you prefer a local installation, you can use NPM (Node Package Manager) to install Materialize. Here's how:

  1. Install Node.js on your system.
  2. Open your terminal or command prompt and navigate to your project's root directory.
  3. Run the following command to install Materialize:
npm install materialize-css
  1. Once installation is complete, you can include the Materialize CSS and JavaScript files in your HTML file as follows:
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!--Import materialize.css-->
<link rel="stylesheet" href="./node_modules/materialize-css/dist/css/materialize.min.css">

<!--Import jQuery before materialize.js-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./node_modules/materialize-css/dist/js/materialize.min.js"></script>

You can also import individual components by including their specific CSS and JavaScript files in your HTML file.

Summary

Installing Materialize is essential in order to use it in your web project. You can install it either via CDN or using NPM. After installation, include the Materialize CSS and JavaScript files in your HTML file.

MaterializeColor
Published on: