menu

Getting Started

Learn how to easily start using Materialize in your website.

Folder Structure

Below is the Materialize Admin Template folder structure.

After downloading materialize admin template from themeforest, extract the files into the directory where your website/localhost 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.


  materialize-admin/        <-- Template root folder
  |--css/
  |  |--custom/custom.css   <-- Write your custom css or generate custom.css using custom.scss
  |  |--layouts/            <-- Template layout specific css
  |  |--themes/
  |  |  |--collapsible-menu/style.css  <-- Collapsible menu theme css file,compiled from scss/themes/collapsible-menu/style.scss
  |  |  |--
  |  |--materialize.css     <-- compiled from scss/materialize.scss
  |
  |--fonts/                 <-- Template fonts & icon-fonts
  |  |--roboto/
  |  |--material-design-icons/
  |
  |--html/
  |  |--collapsible-menu    <-- Template html files for collapsible menu 
  |  |--fixed-menu          <-- Template html files for fixed menu 
  |  |--overlay-menu        <-- Template html files for overlay menu 
  |  |--semi-dark-menu      <-- Template html files for semi-dark menu 
  |  |--horizontal-menu     <-- Template html files for horizontal menu 
  |
  |--images/                <-- All the images of the template
  |
  |--js/
  |  |--materialize-plugins/ <-- Materialize framework core JS files
  |  |--scripts/             <-- Template html page wise js scripts
  |  |--custom-script.js     <-- Use this JS file to write your own custom JS
  |  |--materialize.js       <-- Materialize framework JS file generated from materialize-plugins/
  |  |--plugins.js           <-- Template main JS file
  |
  |--scss/
  |  |--components/          <-- Materialize framework core SCSS files
  |  |--custom/              <-- Use this SCSS file to write your own custom SCSS, It will generate css/custom/custom.css file.
  |  |--theme-components/    <-- Template components SCSS file
  |  |--themes/              <-- Template different themes SCSS file, you can create your own theme folder here !
  |  |--materialize.scss     <-- Materialize framework main SCSS files
  |  |--style.scss           <-- Template main SCSS files
  |  |--theme.scss           <-- Auto generated theme.scss file from Grunt, Generate for specific theme(i.e collapsible-menu) based on grunt commend  grunt watch --Layout="collapsible-menu"
  |
  |--vendors/                <-- All Venders JS & SCSS
  |
  getting-started/           <-- Template Getting started files for each themes to start your project development from scratch
  |
  grunt/                     <-- Grunt JS files
  |
  front-end/                 <-- Free! Included front end template
  |
  documentation/             <-- Materialize template documentation
Important

We do not recommend to change core JS & CSS/SCSS file of Materialize Framework & Template. Always use the custom.css/scss and custom.js files to write your own custom css and js code to avoid template future updates conflicts. You can also create your own custom theme under scss/themes/ folder to customize template using the framework variables.

Grunt

Tip

Its is not mandatory to use grunt to use this template, We've provided this to simplify customers development process and reduce the efforts by using SCSS. You can obviously use css files to customize template instead of using Node, Grunt or SCSS.

First, you must download and install node.js on your system. NPM stands for node packaged modules and is a way to manage development dependencies through Node.js.Download the Node.js source code or a pre-built installer for your platform, and start developing, you can download it from nodejs.org

You can check it in your terminal window using these commands node --version and npm --version.

Installing Grunt

GruntJS is a JavaScipt task runner. In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc...

Materialize template use the grunt task to generate the different scss files.

From the command line:

  • Install grunt-cli globally with 
    npm install -g grunt-cli
  • To install node packages, navigate to the root materialize-admin/directory, then run 
    npm install
    NPM use the package.json file and automatically install the required local dependencies listed in it.
Grunt Commands

Gruntfile.js file contain all the predefined task. Below template contain all the grunt task and usage.

You can modify or add your task in Gruntfile.js file.

Tip

Except Grunt dist-js command you must have to pass Layout = "{{theme-name}}" parameter to let grunt know compile theme specific scss files.

Generic syntax for grunt command is 

grunt {{task}} --Layout="{{theme-name}}"
Where task will be name of grunt task and theme-name will the theme you wish to compile scss for it.

Command Description
sass-compile Compile materialize, themes, layouts and custom scss files. 

grunt sass-compile --Layout="collapsible-menu"
dist-css Compile all scss files, auto prefix them, organize them and finally minify them in css/ folder. 

grunt dist-css --Layout="collapsible-menu"
dist-js Grunt task minify js files from js/ folder. 

grunt dist-js

server Start browser sync. 

grunt server --Layout="collapsible-menu"
monitor Watch all scss files change and compile it accordingly. In this command you need to pass the Layout parameater in grunt commands. 

grunt monitor --Layout="collapsible-menu"
dist Grunt task create dist folder, copay all required only files to dist folder. Generate minified css and js files and replace in html files to include minifided css & js. 

grunt dist --Layout="collapsible-menu"

Template Structure

General HTML structure is the same throughout the template.

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.

One last thing to note is that you have to import jQuery before importing materialize.js!


<!DOCTYPE html>
<html lang="en">
<!--================================================================================
  Item Name: Materialize - Material Design Admin Template
  Version: 4.0
  Author: PIXINVENT
  Author URL: https://themeforest.net/user/pixinvent/portfolio
  ================================================================================ -->

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="description" content="Materialize is a Material Design Admin Template,It's modern, responsive and based on Material Design by Google. ">
  <meta name="keywords" content="materialize, admin template, dashboard template, flat admin template, responsive admin template,">
  <title>Page Blank | Materialize - Material Design Admin Template</title>
  <!-- Favicons-->
  <link rel="icon" href="../../images/favicon/favicon-32x32.png" sizes="32x32">
  <!-- Favicons-->
  <link rel="apple-touch-icon-precomposed" href="../../images/favicon/apple-touch-icon-152x152.png">
  <!-- For iPhone -->
  <meta name="msapplication-TileColor" content="#00bcd4">
  <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
  <!-- For Windows Phone -->
  <!-- CORE CSS-->
  <link href="../../css/materialize.css" type="text/css" rel="stylesheet">
  <link href="../../css/themes/collapsible-menu/style.css" type="text/css" rel="stylesheet">
  <!-- Custome CSS-->
  <link href="../../css/custom/custom.css" type="text/css" rel="stylesheet">
  <!-- INCLUDED PLUGIN CSS ON THIS PAGE -->
  <link href="../../vendors/perfect-scrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet">
  <link href="../../vendors/flag-icon/css/flag-icon.min.css" type="text/css" rel="stylesheet">
</head>

<body>
  <!-- Start Page Loading -->
  <div id="loader-wrapper">    
  </div>
  <!-- End Page Loading -->
  <!-- //////////////////////////////////////////////////////////////////////////// -->
  <!-- START HEADER -->
  <header id="header" class="page-topbar">  

  </header>
  <!-- END HEADER -->
  <!-- //////////////////////////////////////////////////////////////////////////// -->
  <!-- START MAIN -->
  <div id="main">
    <!-- START WRAPPER -->
    <div class="wrapper">
      <!-- START LEFT SIDEBAR NAV-->
      <aside id="left-sidebar-nav" class="nav-expanded nav-lock nav-collapsible">
      </aside>
      <!-- END LEFT SIDEBAR NAV-->
      <!-- //////////////////////////////////////////////////////////////////////////// -->
      <!-- START CONTENT -->
      <section id="content">
        <!--breadcrumbs start-->
        <div id="breadcrumbs-wrapper">          
        </div>
        <!--breadcrumbs end-->
        <!--start container-->
        <div class="container">        
        </div>
        <!--end container-->
      </section>
      <!-- END CONTENT -->
      <!-- //////////////////////////////////////////////////////////////////////////// -->
      <!-- START RIGHT SIDEBAR NAV-->
      <aside id="right-sidebar-nav">        
      </aside>
      <!-- END RIGHT SIDEBAR NAV-->
    </div>
    <!-- END WRAPPER -->
  </div>
  <!-- END MAIN -->
  <!-- //////////////////////////////////////////////////////////////////////////// -->
  <!-- START FOOTER -->
  <footer class="page-footer">
  </footer>
  <!-- END FOOTER -->
  <!-- ================================================
        Scripts
  ================================================ -->
  <!-- jQuery Library -->
  <script type="text/javascript" src="../../vendors/jquery-3.2.1.min.js"></script>
  <!--materialize js-->
  <script type="text/javascript" src="../../js/materialize.min.js"></script>
  <!--scrollbar-->
  <script type="text/javascript" src="../../vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
  <!--plugins.js - Some Specific JS codes for Plugin Settings-->
  <script type="text/javascript" src="../../js/plugins.js"></script>
  <!--custom-script.js - Add your own theme custom JS-->
  <script type="text/javascript" src="../../js/custom-script.js"></script>
</body>

</html>

Sass

This section is only relevant if you chose to use the Sass version of Materialize.


materialize-admin/        <-- Template root folder
  |--css/
  |  |--custom/custom.css   <-- Write your custom css or generate custom.css using custom.scss
  |  |--layouts/            <-- Template layout specific css
  |  |--themes/
  |  |  |--collapsible-menu/style.css  <-- Collapsible menu theme css file,compiled from scss/themes/collapsible-menu/style.scss
  |  |  |--
  |  |--materialize.css     <-- compiled from scss/materialize.scss
  |
  |
  |--scss/
  |  |--components/          <-- Materialize framework core SCSS files
  |  |--custom/              <-- Use this SCSS file to write your own custom SCSS, It will generate css/custom/custom.css file.
  |  |--theme-components/    <-- Template components SCSS file
  |  |--themes/              <-- Template different themes SCSS file, you can create your own theme folder here !
  |  |--materialize.scss     <-- Materialize framework main SCSS files
  |  |--style.scss           <-- Template main SCSS files
  |  |--theme.scss           <-- Auto generated theme.scss file from Grunt, Generate for specific theme(i.e collapsible-menu) based on grunt commend  grunt watch --Layout="collapsible-menu"
  |
Folder/Files Description
components Materialize framework components SCSS files, this folder contain core SCSS files of Materialize Framework
custom Use this SCSS file to write your own custom SCSS, It will generate css/custom/custom.css file.
theme-components Template components SCSS files, this folder also contain Template pages & layouts SCSS files.
themes Folder contain Template different Themes folder, Materialize Admin Template provides 5 built in themes. You can create your theme folder and customize it by using the typography.scss & variables.scss files.
materialize.scss Materialize framework main SCSS files
style.scss Template main SCSS files
theme.scss Auto generated theme.scss file from Grunt, Generate for specific theme(i.e collapsible-menu) based on grunt commend grunt watch --Layout="collapsible-menu"