###### Introduction

Material Dash is a responsive HTML template that is based on Material Components for the web (MDC Web) and it is built with Sass. Sass compiler makes it easier to code and customize. Material Components for the web helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects. All of MDC Web components have been modified to fit the style of Material Dash and provide a consistent look throughout the template.

Before you start working with the template, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.

Note: We are trying our best to document how to use the template. If you think that something is missing from the documentation, please do not hesitate to tell us about it. If you have any questions or issues regarding this theme please email us at support@bootstrapdash.com

###### File Structure

You can directly use the compiled and ready-to-use the version of the template. But in case you plan to customize the template extensively the template allows you to do so.

Once you have download the package you will see the following folder structure inside the folder.

    Material Dash/
      ├ documentation/
      ├ template/
          ├ assets/
              ├ css/
              ├ fonts/
              ├ images/
              ├ js/
              ├ scss/
              ├ vendors/
          ├ demo/
              ├ pages/
              ├ partials/
              ├ index.html
          ├ gulp-tasks/
          ├ gulpfile.js
          ├ index.html
          ├ package.json
      ├ CHANGELOG.md

Note: The root folder denoted further in this documentation refers to the 'template' folder inside the downloaded folder

info

We have bundled up the vendor files needed for demo purpose into a folder 'vendors', you may not need all those vendors in your application. If you want to make any change in the vendor package files, you need to change the src path for related tasks in the file gulpfile.js and run the task `bundleVendors` to rebuild the vendor files.

###### Installation

You need to install package files/Dependencies for this project if you want to customize it. To do this, you must have node and npm installed in your computer.

Installation guide of the node can be found here. As npm comes bundled with a node, a separate installation of npm is not needed.

If you have installed them, just go to the root folder and run the following command in your command prompt or terminal (for the mac users).

    npm install

This will install the dev dependencies in the local node_modules folder in your root directory.

Then you will need to install Gulp. We use the Gulp task manager for the development processes. Gulp will watch for changes to the SCSS files and automatically compile the files to CSS.

Getting started with Gulp is pretty simple. The Gulp site is a great place to get information on installing Gulp if you need more information. You need to first install Gulp-cli in your machine using the below command.

    npm install -g gulp-cli

This installs Gulp-cli globally to your machine. The other thing that Gulp requires, which, is really what does all the work, is the gulpfile.js. In this file, you set up all of your tasks that you will run.

Don't worry. We have this file already created for you!

To run this project in development mode enter the following command below. This will start the file watch by gulp and whenever a file is modified, the SCSS files will be compiled to create the CSS file.

    gulp serve

infoIt is important to run `gulp serve` command from the directory where the gulpfile.js is located.

###### Basic structure

The below snippet shows the basic HTML structure of Material Dash Admin. Please note that all the stylesheets and script files in the below snippet should be included to render Material Dash Admin styles.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Material Dash</title> <!-- plugins:css --> <link rel="stylesheet" href="../../../assets/vendors/mdi/css/materialdesignicons.min.css"> <link rel="stylesheet" href="../../../assets/vendors/css/vendor.bundle.base.css"> <!-- endinject --> <!-- Plugin css for this page --> <!-- End plugin css for this page --> <!-- Layout styles --> <link rel="stylesheet" href="../../../assets/css/demo/style.css"> <!-- End layout styles --> <link rel="shortcut icon" href="../../../assets/images/favicon.png" /> </head> <body> <script src="../assets/js/preloader.js"></script> <div class="body-wrapper"> <!-- partial:../../partials/_sidebar.html --> <aside class="mdc-drawer mdc-drawer--dismissible mdc-drawer--open"> <div class="mdc-drawer__header"> <a href="../../index.html" class="brand-logo"> <img src="../../../assets/images/logo.svg" alt="logo"> </a> </div> <div class="mdc-drawer__content"> <div class="user-info"> <p class="name">Clyde Miles</p> <p class="email">clydemiles@elenor.us</p> </div> <div class="mdc-list-group"> <nav class="mdc-list mdc-drawer-menu"> <div class="mdc-list-item mdc-drawer-item"> <a class="mdc-drawer-link" href="../../index.html"> <i class="material-icons mdc-list-item__start-detail mdc-drawer-item-icon" aria-hidden="true">home</i> Dashboard </a> </div> <div class="mdc-list-item mdc-drawer-item"> <a class="mdc-drawer-link" href="../../pages/forms/basic-forms.html"> <i class="material-icons mdc-list-item__start-detail mdc-drawer-item-icon" aria-hidden="true">track_changes</i> Forms </a> </div> <div class="mdc-list-item mdc-drawer-item"> <a class="mdc-expansion-panel-link" href="#" data-toggle="expansionPanel" data-target="ui-sub-menu"> <i class="material-icons mdc-list-item__start-detail mdc-drawer-item-icon" aria-hidden="true">dashboard</i> UI Features <i class="mdc-drawer-arrow material-icons">chevron_right</i> </a> <div class="mdc-expansion-panel" id="ui-sub-menu"> <nav class="mdc-list mdc-drawer-submenu"> <div class="mdc-list-item mdc-drawer-item"> <a class="mdc-drawer-link" href="../../pages/ui-features/buttons.html"> Buttons </a> </div> <div class="mdc-list-item mdc-drawer-item"> <a class="mdc-drawer-link" href="../../pages/ui-features/typography.html"> Typography </a> </div> </nav> </div> </div> <div class="mdc-list-item mdc-drawer-item"> <a class="mdc-drawer-link" href="../../pages/tables/basic-tables.html"> <i class="material-icons mdc-list-item__start-detail mdc-drawer-item-icon" aria-hidden="true">grid_on</i> Tables </a> </div> <div class="mdc-list-item mdc-drawer-item"> <a class="mdc-drawer-link" href="../../pages/charts/chartjs.html"> <i class="material-icons mdc-list-item__start-detail mdc-drawer-item-icon" aria-hidden="true">pie_chart_outlined</i> Charts </a> </div> <div class="mdc-list-item mdc-drawer-item"> <a class="mdc-expansion-panel-link" href="#" data-toggle="expansionPanel" data-target="sample-page-submenu"> <i class="material-icons mdc-list-item__start-detail mdc-drawer-item-icon" aria-hidden="true">pages</i> Sample Pages <i class="mdc-drawer-arrow material-icons">chevron_right</i> </a> <div class="mdc-expansion-panel" id="sample-page-submenu"> <nav class="mdc-list mdc-drawer-submenu"> <div class="mdc-list-item mdc-drawer-item"> <a class="mdc-drawer-link" href="../../pages/samples/blank-page.html"> Blank Page </a> </div> <div class="mdc-list-item mdc-drawer-item"> <a class="mdc-drawer-link" href="../../pages/samples/403.html"> 403 </a> </div> <div class="mdc-list-item mdc-drawer-item"> <a class="mdc-drawer-link" href="../../pages/samples/404.html"> 404 </a> </div> <div class="mdc-list-item mdc-drawer-item"> <a class="mdc-drawer-link" href="../../pages/samples/500.html"> 500 </a> </div> <div class="mdc-list-item mdc-drawer-item"> <a class="mdc-drawer-link" href="../../pages/samples/505.html"> 505 </a> </div> <div class="mdc-list-item mdc-drawer-item"> <a class="mdc-drawer-link" href="../../pages/samples/login.html"> Login </a> </div> <div class="mdc-list-item mdc-drawer-item"> <a class="mdc-drawer-link" href="../../pages/samples/register.html"> Register </a> </div> </nav> </div> </div> <div class="mdc-list-item mdc-drawer-item"> <a class="mdc-drawer-link" href="https://www.bootstrapdash.com/demo/material-admin-free/jquery/documentation/documentation.html" target="_blank"> <i class="material-icons mdc-list-item__start-detail mdc-drawer-item-icon" aria-hidden="true">description</i> Documentation </a> </div> </nav> </div> <div class="profile-actions"> <a href="javascript:;">Settings</a> <span class="divider"></span> <a href="javascript:;">Logout</a> </div> <div class="mdc-card premium-card"> <div class="d-flex align-items-center"> <div class="mdc-card icon-card box-shadow-0"> <i class="mdi mdi-shield-outline"></i> </div> <div> <p class="mt-0 mb-1 ml-2 font-weight-bold tx-12">Material Dash</p> <p class="mt-0 mb-0 ml-2 tx-10">Pro available</p> </div> </div> <p class="tx-8 mt-3 mb-1">More elements. More Pages.</p> <p class="tx-8 mb-3">Starting from $25.</p> <a href="https://www.bootstrapdash.com/product/material-design-admin-template/" target="_blank"> <span class="mdc-button mdc-button--raised mdc-button--white">Upgrade to Pro</span> </a> </div> </div> </aside> <!-- partial --> <div class="main-wrapper mdc-drawer-app-content"> <!-- partial:../../partials/_navbar.html --> <header class="mdc-top-app-bar"> <div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button sidebar-toggler">menu</button> <span class="mdc-top-app-bar__title">Greetings Clyde!</span> <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon search-text-field d-none d-md-flex"> <i class="material-icons mdc-text-field__icon">search</i> <input class="mdc-text-field__input" id="text-field-hero-input"> <div class="mdc-notched-outline"> <div class="mdc-notched-outline__leading"></div> <div class="mdc-notched-outline__notch"> <label for="text-field-hero-input" class="mdc-floating-label">Search..</label> </div> <div class="mdc-notched-outline__trailing"></div> </div> </div> </div> <div class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end mdc-top-app-bar__section-right"> <div class="menu-button-container menu-profile d-none d-md-block"> <button class="mdc-button mdc-menu-button"> <span class="d-flex align-items-center"> <span class="figure"> <img src="../../../assets/images/faces/face1.jpg" alt="user" class="user"> </span> <span class="user-name">Clyde Miles</span> </span> </button> <div class="mdc-menu mdc-menu-surface" tabindex="-1"> <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical"> <li class="mdc-list-item" role="menuitem"> <div class="item-thumbnail item-thumbnail-icon-only"> <i class="mdi mdi-account-edit-outline text-primary"></i> </div> <div class="item-content d-flex align-items-start flex-column justify-content-center"> <h6 class="item-subject font-weight-normal">Edit profile</h6> </div> </li> <li class="mdc-list-item" role="menuitem"> <div class="item-thumbnail item-thumbnail-icon-only"> <i class="mdi mdi-settings-outline text-primary"></i> </div> <div class="item-content d-flex align-items-start flex-column justify-content-center"> <h6 class="item-subject font-weight-normal">Logout</h6> </div> </li> </ul> </div> </div> <div class="divider d-none d-md-block"></div> <div class="menu-button-container d-none d-md-block"> <button class="mdc-button mdc-menu-button"> <i class="mdi mdi-settings"></i> </button> <div class="mdc-menu mdc-menu-surface" tabindex="-1"> <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical"> <li class="mdc-list-item" role="menuitem"> <div class="item-thumbnail item-thumbnail-icon-only"> <i class="mdi mdi-alert-circle-outline text-primary"></i> </div> <div class="item-content d-flex align-items-start flex-column justify-content-center"> <h6 class="item-subject font-weight-normal">Settings</h6> </div> </li> <li class="mdc-list-item" role="menuitem"> <div class="item-thumbnail item-thumbnail-icon-only"> <i class="mdi mdi-progress-download text-primary"></i> </div> <div class="item-content d-flex align-items-start flex-column justify-content-center"> <h6 class="item-subject font-weight-normal">Update</h6> </div> </li> </ul> </div> </div> <div class="menu-button-container"> <button class="mdc-button mdc-menu-button"> <i class="mdi mdi-bell"></i> </button> <div class="mdc-menu mdc-menu-surface" tabindex="-1"> <h6 class="title"> <i class="mdi mdi-bell-outline mr-2 tx-16"></i> Notifications</h6> <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical"> <li class="mdc-list-item" role="menuitem"> <div class="item-thumbnail item-thumbnail-icon"> <i class="mdi mdi-email-outline"></i> </div> <div class="item-content d-flex align-items-start flex-column justify-content-center"> <h6 class="item-subject font-weight-normal">You received a new message</h6> <small class="text-muted"> 6 min ago </small> </div> </li> <li class="mdc-list-item" role="menuitem"> <div class="item-thumbnail item-thumbnail-icon"> <i class="mdi mdi-account-outline"></i> </div> <div class="item-content d-flex align-items-start flex-column justify-content-center"> <h6 class="item-subject font-weight-normal">New user registered</h6> <small class="text-muted"> 15 min ago </small> </div> </li> <li class="mdc-list-item" role="menuitem"> <div class="item-thumbnail item-thumbnail-icon"> <i class="mdi mdi-alert-circle-outline"></i> </div> <div class="item-content d-flex align-items-start flex-column justify-content-center"> <h6 class="item-subject font-weight-normal">System Alert</h6> <small class="text-muted"> 2 days ago </small> </div> </li> <li class="mdc-list-item" role="menuitem"> <div class="item-thumbnail item-thumbnail-icon"> <i class="mdi mdi-update"></i> </div> <div class="item-content d-flex align-items-start flex-column justify-content-center"> <h6 class="item-subject font-weight-normal">You have a new update</h6> <small class="text-muted"> 3 days ago </small> </div> </li> </ul> </div> </div> <div class="menu-button-container"> <button class="mdc-button mdc-menu-button"> <i class="mdi mdi-email"></i> <span class="count-indicator"> <span class="count">3</span> </span> </button> <div class="mdc-menu mdc-menu-surface" tabindex="-1"> <h6 class="title"><i class="mdi mdi-email-outline mr-2 tx-16"></i> Messages</h6> <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical"> <li class="mdc-list-item" role="menuitem"> <div class="item-thumbnail"> <img src="../../../assets/images/faces/face4.jpg" alt="user"> </div> <div class="item-content d-flex align-items-start flex-column justify-content-center"> <h6 class="item-subject font-weight-normal">Mark send you a message</h6> <small class="text-muted"> 1 Minutes ago </small> </div> </li> <li class="mdc-list-item" role="menuitem"> <div class="item-thumbnail"> <img src="../../../assets/images/faces/face2.jpg" alt="user"> </div> <div class="item-content d-flex align-items-start flex-column justify-content-center"> <h6 class="item-subject font-weight-normal">Cregh send you a message</h6> <small class="text-muted"> 15 Minutes ago </small> </div> </li> <li class="mdc-list-item" role="menuitem"> <div class="item-thumbnail"> <img src="../../../assets/images/faces/face3.jpg" alt="user"> </div> <div class="item-content d-flex align-items-start flex-column justify-content-center"> <h6 class="item-subject font-weight-normal">Profile picture updated</h6> <small class="text-muted"> 18 Minutes ago </small> </div> </li> </ul> </div> </div> <div class="menu-button-container d-none d-md-block"> <button class="mdc-button mdc-menu-button"> <i class="mdi mdi-arrow-down-bold-box"></i> </button> <div class="mdc-menu mdc-menu-surface" tabindex="-1"> <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical"> <li class="mdc-list-item" role="menuitem"> <div class="item-thumbnail item-thumbnail-icon-only"> <i class="mdi mdi-lock-outline text-primary"></i> </div> <div class="item-content d-flex align-items-start flex-column justify-content-center"> <h6 class="item-subject font-weight-normal">Lock screen</h6> </div> </li> <li class="mdc-list-item" role="menuitem"> <div class="item-thumbnail item-thumbnail-icon-only"> <i class="mdi mdi-logout-variant text-primary"></i> </div> <div class="item-content d-flex align-items-start flex-column justify-content-center"> <h6 class="item-subject font-weight-normal">Logout</h6> </div> </li> </ul> </div> </div> </div> </div> </header> <!-- partial --> <div class="page-wrapper mdc-toolbar-fixed-adjust"> <main class="content-wrapper"> </main> <!-- partial:../../partials/_footer.html --> <footer> <div class="mdc-layout-grid"> <div class="mdc-layout-grid__inner"> <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-6-desktop"> <span class="tx-14">Copyright © 2019 <a href="https://www.bootstrapdash.com/" target="_blank">BootstrapDash</a>. All rights reserved.</span> </div> <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-6-desktop d-flex justify-content-end"> <div class="d-flex align-items-center"> <a href="">Documentation</a> <span class="vertical-divider"></span> <a href="">FAQ</a> </div> </div> </div> </div> </footer> <!-- partial --> </div> </div> </div> <!-- plugins:js --> <script src="../../../assets/vendors/js/vendor.bundle.base.js"></script> <!-- endinject --> <!-- Plugin js for this page--> <!-- End plugin js for this page--> <!-- inject:js --> <script src="../../../assets/js/material.js"></script> <script src="../../../assets/js/misc.js"></script> <!-- endinject --> <!-- Custom js for this page--> <!-- End custom js for this page--> </body> </html>

###### Credits

- Material components web

  https://material.io/develop/web/

- Chart.js

  https://www.chartjs.org/

- Codemirror

  https://codemirror.net/

- Flag icons

  http://lipis.github.io/flag-icon-css/

- Gulp

  https://gulpjs.com/

- JQuery

  https://jquery.com/

- Material Design Icons

  https://materialdesignicons.com/

- Moment.js

  https://momentjs.com/

- Perfect scrollbar

  http://utatti.github.io/perfect-scrollbar/

###### Customer Support

We will assist you any problem you encounter while buidling your dashboard via Material Dash.

Email: support@bootstrapdash.com