menu

Getting Started

Learn how to easily start using Materialize in your application.

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.


documentation/                          <-- Template Documentation
materialize-admin/                      <-- Template root folder
|--app-assets/
|  |--css/                              <-- Contains all css files generated from SASS folder in src  for LTR Direction.
|  |--css-rtl                           <-- Contains all css files gernerated from SASS folder in src for RTL Direction.
|  |--data                              <-- Dummy JSON data for chats, tables and ajax example.
|  |--fonts/                            <-- Contains font related files of Fontawesome and Material Icons.
|  |--images/                           <-- Template images for image placeholder.
|  |--js                                <-- All the generated JS files from src/js.
|  |--vendors                           <-- Folder contain all the vendors css and js files.
|--gulp-tasks/                          <-- Folder contain all the gulp task files.
|--html/                                <-- Folder contain all the HTML files. It has text-direction & template name folder, template generated html files will placed base on template name and text-direction. 
|  |--ltr                               <-- Text Direction
|    |--vertical-modern-menu-template/  <-- Template Name
|    |--(...)
|  |--rtl 
|    |--vertical-modern-menu-template/  <-- Template Name
|    |--(...)
|--src/                   
|  |--js/               <--  Folder contain all the core, menu, pages & other js files.
|  |--sass/             <--  Folder contain components, custom, layouts, pages, theme-components and themes scss files.
materialize-html-laravel-template/      <--  Laravel Template root folder (Refer the laravel documentation)

    

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.

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.

Gulp

Tip

Its is not mandatory to use Gulp 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, Gulp or SCSS.

Follow the below steps to installing Gulp & Running Gulo Task to compiling scss and minify js & css.

Step 1: Installing Node

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.

Step 2: Installing Gulp

Gulp 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 gulp task to generate the different scss files.

From the command line:

  • Install gulp-cli globally with
    npm install -g gulp-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.
Step 3: Running Gulp Commands

gulpfile.js file contain all the predefined task. Below template contain all the gulp task and usage.

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

Syntax

You must have to pass parameters to let gulp know compile theme specific scss files.Usually Layout, LayoutName and ThemeName will be same.


Generic syntax for gulp command is

             
gulp {{task}} --Layout = {{layout}} --LayoutName = {{layout-name}} --ThemeName = {{theme-name}} --TextDirection = {{text-direction}}
             
           

Example gulp command

             
gulp monitor --Layout="vertical-gradient-menu-template" --LayoutName="vertical-gradient-menu-template" --ThemeName="vertical-gradient-menu-template" --TextDirection="LTR"
             
           
Parameter Code Description
Layout --Layout = {{ layout }} In layout parameter you have to pass type of layout that you want to generate
Layout Name --LayoutName = {{ layout - name }} In layout name parameter you have to pass name of the layout that you want to generate
Theme Name --ThemeName = {{ theme - name }} In theme name parameter you have to pass the name of the theme that you want to generate
Text Direction --TextDirection = {{ text - direction }} In text direction you have to pass direction of text for template

Gulp Tasks


SASS Compile

gulp sass-compile command compiles materialize, themes, layouts and custom scss files.


gulp sass-compile --Layout={{theme-layout}} --LayoutName={{layout-name}} --ThemeName={{theme-name}} --TextDirection={{text-direction}}
                  

Generate JS

gulp dist-js task generate js files from src/js/ folder.


gulp dist-js --Layout={{theme-layout}} --LayoutName={{layout-name}} --ThemeName={{theme-name}} --TextDirection={{text-direction}}
                

Monitor

gulp monitor Watch all scss files change and compile it accordingly. With this command you need to pass the Layout parameter in gulp commands.


gulp monitor --Layout={{theme-layout}} --LayoutName={{layout-name}} --ThemeName={{theme-name}} --TextDirection={{text-direction}}
                

Generate JS and CSS

gulp distGulp task create dist folder, copy all required only files to dist folder. Generate css and js files in html files to include minifided css & js.


gulp dist --Layout={{theme-layout}} --LayoutName={{layout-name}} --ThemeName={{theme-name}} --TextDirection={{text-direction}}
                  

Layout Commands

Tip: You can use above mentioned tasks for you layout.


Vertical Modern Layout

Vertical modern menu has modern User Interface with collapsible menu, semi dark layout and fixed dark navbar and dark breadcrumbs. You can use below mentioned command to generate JS and CSS files for this layout.


gulp {{task}} --Layout="vertical-modern-menu-template" --LayoutName="vertical-modern-menu-template" --ThemeName="vertical-modern-menu-template" --TextDirection="LTR"
                 

Vertical Nav Dark Layout

Vertical nav dark menu has collapsible menu but with fully dark gradient navbar and light menu and classic left light breadcrumbs. You can use below mentioned command for to generate JS and CSS files for this layout.


gulp {{task}} --Layout="vertical-menu-nav-dark-template" --LayoutName="vertical-menu-nav-dark-template" --ThemeName="vertical-menu-nav-dark-template" --TextDirection="LTR"
                 

Vertical Gradient Menu

Vertical gradient menu has collapsible menu and semi light layout and with gradient menu and light navbar and right light breadcrumbs.You can use below mentioned command to generate JS and CSS files for this layout.


gulp {{task}} --Layout="vertical-gradient-menu-template" --LayoutName="vertical-gradient-menu-template" --ThemeName="vertical-gradient-menu-template" --TextDirection="LTR"
                

Vertical Dark Menu

Vertical dark menu has collapsible menu but with dark menu and light navbar and dark breadcrumbs with background image.You can use below mentioned command to generate JS and CSS files for this layout.


gulp {{task}} --Layout="vertical-dark-menu-template" --LayoutName="vertical-dark-menu-template" --ThemeName="vertical-dark-menu-template" --TextDirection="LTR"
                

Horizontal Classic Menu

Horizontal classic Menu is a classic horizontal layout with gradient navbar and top icon menu and light right breadcrumbs.You can use below mentioned command to generate JS and CSS files for this layout.


gulp {{task}} --Layout="horizontal-menu-template" --LayoutName="horizontal-menu-template" --ThemeName="horizontal-menu-template" --TextDirection="LTR"
                

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 class="loading" lang="en" data-textdirection="ltr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <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, eCommerce dashboard, analytic dashboard">
  <meta name="author" content="ThemeSelect">
  <title>Blank Page | Materialize - Material Design Admin Template</title>
  <link rel="apple-touch-icon" href="../../../app-assets/images/favicon/apple-touch-icon-152x152.png">
  <link rel="shortcut icon" type="image/x-icon" href="../../../app-assets/images/favicon/favicon-32x32.png">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- BEGIN VENDOR CSS-->
  <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/vendors.min.css">
  <!-- END VENDOR CSS-->
  <!-- BEGIN THEME  CSS-->
  <!-- END THEME  CSS-->
  <!-- BEGIN Page Level CSS-->
  <link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/vertical-modern-menu-template/materialize.css">
  <link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/vertical-modern-menu-template/style.css">
  <!-- END Page Level CSS-->
  <!-- BEGIN Custom CSS-->
  <link rel="stylesheet" type="text/css" href="../../../app-assets/css/custom/custom.css">
  <!-- END Custom CSS-->
</head>

<body class="vertical-layout vertical-menu-collapsible page-header-dark vertical-modern-menu 2-columns   menu-expanded fixed-navbar" data-open="click" data-menu="vertical-modern-menu" data-color="" data-col="2-columns">
  <!--
  //////////////////////////////////////////////////////////////////////////// -->
  <!-- START HEADER -->
  <header class="page-topbar" id="header">
  </header>
  <!-- END HEADER -->
  <aside class="sidenav-main nav-expanded nav-lock nav-collapsible sidenav-light sidenav-active-square">
  </aside>
  <!--
  //////////////////////////////////////////////////////////////////////////// -->
  <!-- START MAIN -->
  <div id="main">
  <!-- START WRAPPER -->
  <div class="row">
  <!-- START LEFT SIDEBAR NAV-->
  <!-- END LEFT SIDEBAR NAV-->
  <!--
  //////////////////////////////////////////////////////////////////////////// -->
  <!-- START BREADCRUMB -->
  <section
  class="content-wrapper-before">
  <!--breadcrumbs start-->
  <div class="breadcrumbs-wrapper">
  </div>
  <!--breadcrumbs end-->
  <!--start container-->
  <div class="col s12">
  </div>
  <div class="container">
  </div>
  <!-- START RIGHT SIDEBAR NAV-->
  <aside id="right-sidebar-nav">
  </aside>
  <!-- END RIGHT SIDEBAR NAV-->
  <div class="fixed-action-btn"></div>  
  <!--end container-->
  </section>
  <!-- END CONTENT -->
  <!--
    //////////////////////////////////////////////////////////////////////////// -->
  </div>
  <!-- END WRAPPER -->
  </div>
  <!-- END MAIN -->
  <!--
    //////////////////////////////////////////////////////////////////////////// -->
  <!-- START FOOTER -->
  <footer class="page-footer footer footer-static footer-dark gradient-45deg-indigo-purple gradient-shadow navbar-border navbar-shadow">
  </footer>
  <!-- END FOOTER -->
  <!-- ================================================
    Scripts
    ================================================ -->
    <!-- BEGIN VENDOR JS-->
<script src="../../../app-assets/js/vendors.min.js" type="text/javascript"></script>
<!-- BEGIN VENDOR JS-->
<!-- BEGIN PAGE VENDOR JS-->
<!-- END PAGE VENDOR JS-->
<!-- BEGIN THEME  JS-->
<script src="../../../app-assets/js/plugins.js" type="text/javascript"></script>
<script src="../../../app-assets/js/search.js" type="text/javascript"></script>
<script src="../../../app-assets/js/custom/custom-script.js" type="text/javascript"></script>
<!-- END THEME  JS-->
<!-- BEGIN PAGE LEVEL JS-->
<!-- END PAGE LEVEL JS-->
      
</body> 
</html>

SASS

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

Important

We do not recommend to change core & CSS/SCSS file of Materialize Framework & Template. Always use the custom.css/scss file to write your own custom scss 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.


materialize-admin/        <-- Template root folder
|--app-assets/
|  |--css
|    |--custom/
|    |  |-custom.css   <-- Write your custom css or generate custom.css using custom.scss
|    |--layouts/            <-- Folder contains Template layout specific css
|    |--page/               <-- Folder contains Page specific css  
|    |--themes/
|    |  |--vertical-modern-menu-template  <-- Modern menu template contains css files,compiled from scss/themes/modern-menu/theme.scss
|    |  |  |-materialize.css <-- Core Materialize Framework file compiled from scss/materialize.scss
|    |  |  |-style.css       <-- Template's main CSS files
|    |  |--vertical-gradient-menu-template <-- Gradient menu template contains css files,compiled from scss/themes/gradient-menu/theme.scss 
|    |  |--(...)           
|  |--css-rtl
|    |--themes/
|    |  |--vertical-modern-menu-template  <-- Modern menu template contains css files,compiled from scss/themes/modern-menu/theme.scss
|    |  |  |-materialize.css <-- Core Materialize Framework file compiled from scss/materialize.scss
|    |  |  |-style.css       <-- Template's main CSS files
|    |  |--vertical-gradient-menu-template <-- Gradient menu template contains css files,compiled from scss/themes/gradient-menu/theme.scss 
|    |  |--(...)             <-- Contains all css files gernerated from SASS folder in src for RTL Direction.
|    |--style-rtl.css        <--Template's main CSS files for RTL version


|--scss/
|  |--components/          <-- Materialize framework core SASS files
|  |--custom/              <-- Use this SASS file to write your own custom SASS, It will generate css/custom/custom.css file.
|  |--layouts/             <-- Folder contains Layout specific SASS files
|  |--pages/               <-- Folder contains page specific SASS files 
|  |--theme-components/    <-- This folder contains extended components SCSS files.
|  |--themes/              <-- This folder contains theme specific SASS files.
|  |  |--vertical-modern-menu-template  <-- Modern menu template contains theme.scss which imports all the necessary files for this theme.
|  |  |  |-_theme-variables.scss <-- Theme spacific variable SASS file
|  |  |  |-_theme.scss           <-- Theme specific style SASS file
|  |  |  |-_variables.scss       <-- Materialize core variable override as per theme SASS file
|  |  |  |-materialize.scss <-- Materialize framework main SASS file
|  |  |  |-style.scss       <-- Template main SASS file
|  |  |--vertical-gradient-menu-template <-- Gradient menu template contains contains theme.scss which imports all the necessary files for this theme.
|  |  |--(...)               
|  |--style-rtl.scss       <-- Contains Template RTL version related CSS. 
    
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.
page This folder contains all page specific scss files
theme-components This folder contains extended components 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 (Shouldn't be modified)
style.scss Template's main SCSS files
style-rtl.scss Contains Template RTL version related CSS
theme.scss Auto generated theme.scss file using gulp
;