Thanks!

Introduction

Materialize is a Material Design Admin Template is the excellent responsive and multipurpose Admin Theme.

Materialize has a huge collection of material design animation & widgets, UI Elements, jQuery plugins and works seamlessly on all major web browsers, tablets and phones. User friendly, intuitive, and fun to use.

Getting Started

This part of the doc will help you to quick start your project and will you a basic idea about how materialize admin theme work. For you to get start visit the "Get Started" folder in your download package.

What's Included

Materialize admin theme comes in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations

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

Whats Inside getting_started

This folder is a boilerplate template to help you start your project from. You will find the following folder structure...

css: Folder contain all the custom, layout, plugins and generated code css from scss.

Custom css folder contain blank custom-style.css file, for those who do not know scss and want to make any css change we suggest you to add new css in this file. It will help you to get in sync with new updated without losing your changes.

Layouts folder contains provided predefined layout css files like style-fullscreen.css and style-horizontal.css. You can create your own layout too by adding your own new css layout file.

Plugins folder contains the css files of used plugins, it can be third party css files. If you want to use any new third party css you can add all of theme in this folder.

And the rest materialize.css & style.css are the main files generated from the scss folder. materialize.css files contain the code material design css and style.css contains the admin theme as well as the newly added third party plugins css support.

font: Folder contain the fonts used by this theme. We have used material-design-icons as font icons & roboto as primary fonts. You can also use your own custom fonts by adding those manually in this folder.

images: Folder contain the images used in theme, you can also add new images you want to use for your custom theme.

js: Folder contain the materialize-plugins and plugins folders. Folder materialize-plugins generates materialize.js core js file, We suggest you to do not edit the core js files in this folders.

Folder plugins contains all the third party js library which are used in this theme, plugin.js file contain the usage code of all those third party js library. You can add any of third party js library in plugins folder and use them for your own custom theme. We suggest you to do not edit plugins.js file. To add your own custom js code you can use custom-script.js file.

sass: Folder contain all the scss files. The components folder contain all the materialize framework core scss files. The materialize.scss file includes all the files from this folders to generate generate materialize.css file inside css/ folder. We suggest you to do not edit any file from this folder.

The theme-components folder contain all the theme custom css and third party used plugins css, It will generate style.css file inside css/ folder. We suggest you to do not edit any file from this folder, you may edit _variables.scss files for styling purpose by taking back-up.

Folder themes contain 8 predefined themes, you can use any of theme and also you can add new theme by creating new folder.

You can change theme by changing the theme path from materialize.scss file

materialize.scss

            
@charset "UTF-8";

// Mixins
@import "components/prefixer";
@import "components/mixins";
@import "components/color";

// Theme;
/*
  Tip: You can change the theme name here to generate new default style, you can also create your own !
*/
@import "themes/default/theme";

// Reset
@import "components/normalize";
....
           

index.html: File is the getting start html file ready to start with fresh new page.

Whats Inside demo

This folder contains all the demo files that we have shown in the live version for reference, you may wish to import code to your project from that. This is only used for reference and we do no recommend to start your project from demo files.

Whats Inside grunt

Materialize admin theme support popular build systems called Grunt.

Working with SASS

SASS is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions. Materialize admin theme supports SASS and is pure built on top of SASS.

SASS Files are found under getting_started/sass

The components folder contain all the materialize framework core scss files. The materialize.scss file includes all the files from this folders to generate generate materialize.css file inside css/ folder.

The theme-components folder contain all the theme custom css and third party used plugins css, It will generate style.css file inside css/ folder.

The themes folder contain 8 predefined themes, you can use any of theme and also you can add new theme by creating new folder.

Variables

Variables help to generate themes, you can custom build you very own theme. The variables will be include inside a specific theme

e.g: sass/themes/default/_variables.scss by changing the a few 5 main primary & secondary color variables you can create your own theme.

Mixins

We have made a wide variety of mixins that can be used in sass

Mixins can be found under sass/components/_mixins.scss

Compiling

Using Grunt use the following commands on your terminal

This command will automatically compile the scss to css on file and save it.

$ grunt watch
          

This command will compile the scss to css on main project location.

$ grunt sass:main
          

To compile and save it in dist, it will minified also your css file.

$ grunt sass:dist
          

Working with Grunt

In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile. Material admin theme supports Grunt to make it even easier for developers, this allows us to implement a powerful command line interface for pages. Here are some of the things that we have added using grunt

Installing Grunt

To install grunt first you must have NodeJs installed, NodeJS will have npm (node packaged modules)
Run the following commands

• Install grunt-cli globally by running the following command npm install -g grunt-cli
• In you downloaded package from themeforest, navigate to grunt/ directory and copy both package.json gruntfile.js to your project root. e.g : getting_started folder
• Navigate to the root directory of your project, then run npm install.

Once you have successfully setup now you can use pages Grunt CLI commands to automate your task

Commands

Grunt Build: This will automatically minify your assets resources like css and js into a folder called dist, this is the ready to go folder for your project release.

Grunt Watch: This will automatically detect any file change and compile it on runt time, you just need to refresh the page to check the change effects.

Troubleshooting

Should you encounter problems with installing dependencies or running Grunt commands, first delete the /node_modules/ directory generated by npm. Then, rerun npm install.

Angular UI

Ready to use number of Angular directives, which makes sure that the components in materialize.js, which are mainly initialized on document ready, are handled by Angular in the right way.

To support materialize admin template Angular directives you need to include js/plugins/angular-materialize.js file in your page.

For detailed information of using those directives please refer angular-ui.html.

Template Stracture

After unzip the Theme files you can see materialize/blank.html folder. That file contain the following common structure.

By using blank.html you are free to modify depending on the customization you require. If you would like to add/edit UI elements, Widget, Data Tables or charts.

The Header

<!DOCTYPE html>
<html lang="en">

<!--================================================================================
  Item Name: Materialize - Material Design Admin Template
  Version: 2.2
  Author: GeeksLabs
  Author URL: http://www.themeforest.net/user/geekslabs
================================================================================ -->

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <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" media="screen,projection">
  <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection">


  <!-- INCLUDED PLUGIN CSS ON THIS PAGE -->
  <link href="css/prism.css" type="text/css" rel="stylesheet" media="screen,projection">
  <link href="js/plugins/perfect-scrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet" media="screen,projection">
  <link href="js/plugins/chartist-js/chartist.min.css" type="text/css" rel="stylesheet" media="screen,projection">
</head>
            

The Body

<!-- START MAIN -->
  <div id="main">
    <!-- START WRAPPER -->
    <div class="wrapper">

      <!-- START LEFT SIDEBAR NAV-->
      <aside id="left-sidebar-nav">
          <ul id="slide-out" class="side-nav fixed leftside-navigation">
              <li class="user-details cyan darken-2">
                  <div class="row">
                      <div class="col col s4 m4 l4">
                          <img src="images/avatar1.jpg" alt="" class="circle responsive-img valign profile-image">
                      </div>
                      <div class="col col s8 m8 l8">
                          <ul id="profile-dropdown" class="dropdown-content">
                              <li><a href="#"><i class="mdi-action-face-unlock"></i> Profile</a>
                              </li>
                              <li><a href="#"><i class="mdi-action-settings"></i> Settings</a>
                              </li>
                              <li><a href="#"><i class="mdi-communication-live-help"></i> Help</a>
                              </li>
                              <li class="divider"></li>
                              <li><a href="#"><i class="mdi-action-lock-outline"></i> Lock</a>
                              </li>
                              <li><a href="#"><i class="mdi-hardware-keyboard-tab"></i> Logout</a>
                              </li>
                          </ul>
                          <a class="btn-flat dropdown-button waves-effect waves-light white-text profile-btn" href="#" data-activates="profile-dropdown">John Doe<i class="mdi-navigation-arrow-drop-down right"></i></a>
                          <p class="user-roal">Administrator</p>
                      </div>
                  </div>
              </li>
              <li class="bold"><a href="index.html" class="waves-effect waves-cyan"><i class="mdi-action-dashboard"></i> Dashboard</a>
              </li>
              <li class="bold"><a href="app-email.html" class="waves-effect waves-cyan"><i class="mdi-communication-email"></i> Mailbox <span class="new badge">4</span></a>
              </li>
              <li class="bold"><a href="app-calendar.html" class="waves-effect waves-cyan"><i class="mdi-editor-insert-invitation"></i> Calender</a>
              </li>
              <li class="no-padding">
                  <ul class="collapsible collapsible-accordion">
                      <li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-action-invert-colors"></i> CSS</a>
                          <div class="collapsible-body">
                              <ul>
                                  <li><a href="css-typography.html">Typography</a>
                                  </li>                                        
                                  <li><a href="css-icons.html">Icons</a>
                                  </li>
                                  <li><a href="css-shadow.html">Shadow</a>
                                  </li>
                                  <li><a href="css-media.html">Media</a>
                                  </li>
                                  <li><a href="css-sass.html">Sass</a>
                                  </li>
                              </ul>
                          </div>
                      </li>
                      <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-image-palette"></i> UI Elements</a>
                          <div class="collapsible-body">
                              <ul>
                                  <li><a href="ui-buttons.html">Buttons</a>
                                  </li>
                                  <li><a href="ui-badges.html">Badges</a>
                                  </li>
                                  <li><a href="ui-cards.html">Cards</a>
                                  </li>
                                  <li><a href="ui-collections.html">Collections</a>
                                  </li>
                                  <li><a href="ui-accordions.html">Accordian</a>
                                  </li>                                        
                                  <li><a href="ui-navbar.html">Navbar</a>
                                  </li>
                                  <li><a href="ui-pagination.html">Pagination</a>
                                  </li>
                                  <li><a href="ui-preloader.html">Preloader</a>
                                  </li>
                                  <li><a href="ui-modals.html">Modals</a>
                                  </li>
                                  <li><a href="ui-media.html">Media</a>
                                  </li>
                                  <li><a href="ui-toasts.html">Toasts</a>
                                  </li>
                                  <li><a href="ui-tooltip.html">Tooltip</a>
                                  </li>
                              </ul>
                          </div>
                      </li>
                      <li class="bold"><a href="app-widget.html" class="waves-effect waves-cyan"><i class="mdi-device-now-widgets"></i> Widgets <span class="new badge"></span></a>
                      </li>
                      <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-editor-border-all"></i> Tables</a>
                          <div class="collapsible-body">
                              <ul>
                                  <li><a href="table-basic.html">Basic Tables</a>
                                  </li>
                                  <li><a href="table-data.html">Data Tables</a>
                                  </li>
                              </ul>
                          </div>
                      </li>
                      <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-editor-insert-comment"></i> Forms</a>
                          <div class="collapsible-body">
                              <ul>
                                  <li><a href="form-elements.html">Form Elements</a>
                                  </li>
                                  <li><a href="form-layouts.html">Form Layouts</a>
                                  </li>
                              </ul>
                          </div>
                      </li>
                      <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-social-pages"></i> Pages</a>
                          <div class="collapsible-body">
                              <ul>                                        
                                  <li><a href="page-login.html">Login</a>
                                  </li>
                                  <li><a href="page-register.html">Register</a>
                                  </li>
                                  <li><a href="page-lock-screen.html">Lock Screen</a>
                                  </li>
                                  <li><a href="page-invoice.html">Invoice</a>
                                  </li>
                                  <li><a href="page-404.html">404</a>
                                  </li>
                                  <li><a href="page-500.html">500</a>
                                  </li>
                                  <li><a href="page-blank.html">Blank</a>
                                  </li>
                              </ul>
                          </div>
                      </li>
                      <li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-editor-insert-chart"></i> Charts</a>
                          <div class="collapsible-body">
                              <ul>
                                  <li><a href="charts-chartjs.html">Chart JS</a>
                                  </li>
                                  <li><a href="charts-chartist.html">Chartist</a>
                                  </li>
                                  <li><a href="charts-morris.html">Morris Charts</a>
                                  </li>
                                  <li><a href="charts-xcharts.html">xCharts</a>
                                  </li>
                                  <li><a href="charts-flotcharts.html">Flot Charts</a>
                                  </li>
                                  <li><a href="charts-sparklines.html">Sparkline Charts</a>
                                  </li>
                              </ul>
                          </div>
                      </li>
                  </ul>
              </li>
              <li class="li-hover"><div class="divider"></div></li>
              <li class="li-hover"><p class="ultra-small margin more-text">MORE</p></li>
              <li><a href="css-grid.html"><i class="mdi-image-grid-on"></i> Grid</a>
              </li>
              <li><a href="css-color.html"><i class="mdi-editor-format-color-fill"></i> Color</a>
              </li>
              <li><a href="css-helpers.html"><i class="mdi-communication-live-help"></i> Helpers</a>
              </li>
              <li><a href="changelogs.html"><i class="mdi-action-swap-vert-circle"></i> Changelogs</a>
              </li>
              <li><a href="css-helpers.html"><i class="mdi-maps-rate-review"></i> Documentation</a>
              </li>
              <li class="li-hover"><div class="divider"></div></li>
              <li class="li-hover"><p class="ultra-small margin more-text">Daily Sales</p></li>
              <li class="li-hover">
                  <div class="row">
                      <div class="col s12 m12 l12">
                          <div class="sample-chart-wrapper">                            
                              <div class="ct-chart ct-golden-section" id="ct2-chart"></div>
                          </div>
                      </div>
                  </div>
              </li>
          </ul>
          <a href="#" data-activates="slide-out" class="sidebar-collapse btn-floating btn-medium waves-effect waves-light hide-on-large-only darken-2"><i class="mdi-navigation-menu" ></i></a>
      </aside>
      <!-- END LEFT SIDEBAR NAV-->

      <!-- //////////////////////////////////////////////////////////////////////////// -->

      <!-- START CONTENT -->
      <section id="content">
        
        <!--breadcrumbs start-->
        <div id="breadcrumbs-wrapper" class=" grey lighten-3">
          <div class="container">
            <div class="row">
              <div class="col s12 m12 l12">
                <h5 class="breadcrumbs-title">Blank Page</h5>
                <ol class="breadcrumb">
                    <li><a href="index.html">Dashboard</a></li>
                    <li><a href="#">Pages</a></li>
                    <li class="active">Blank Page</li>
                </ol>
              </div>
            </div>
          </div>
        </div>
        <!--breadcrumbs end-->
        

        <!--start container-->
        <div class="container">
          <div class="section">

            <p class="caption">A Simple Blank Page to use it for your custome design and elements.</p>
            <div class="divider"></div>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
          </div>
        </div>
        <!--end container-->
      </section>
      <!-- END CONTENT -->

      <!-- //////////////////////////////////////////////////////////////////////////// -->
      <!-- START RIGHT SIDEBAR NAV-->
      <aside id="right-sidebar-nav">
        <ul id="chat-out" class="side-nav rightside-navigation">
            <li class="li-hover">
            <a href="#" data-activates="chat-out" class="chat-close-collapse right"><i class="mdi-navigation-close"></i></a>
            <div id="right-search" class="row">
                <form class="col s12">
                    <div class="input-field">
                        <i class="mdi-action-search prefix"></i>
                        <input id="icon_prefix" type="text" class="validate">
                        <label for="icon_prefix">Search</label>
                    </div>
                </form>
            </div>
            </li>
            <li class="li-hover">
                <ul class="chat-collapsible" data-collapsible="expandable">
                <li>
                    <div class="collapsible-header teal white-text active"><i class="mdi-social-whatshot"></i>Recent Activity</div>
                    <div class="collapsible-body recent-activity">
                        <div class="recent-activity-list chat-out-list row">
                            <div class="col s3 recent-activity-list-icon"><i class="mdi-action-add-shopping-cart"></i>
                            </div>
                            <div class="col s9 recent-activity-list-text">
                                <p>just now</p>
                                <p>Jim Doe Purchased new equipments for zonal office.</p>
                            </div>
                        </div>
                        <div class="recent-activity-list chat-out-list row">
                            <div class="col s3 recent-activity-list-icon"><i class="mdi-device-airplanemode-on"></i>
                            </div>
                            <div class="col s9 recent-activity-list-text">
                                <p>Yesterday</p>
                                <p>Your Next flight for USA will be on 15th August 2015.</p>
                            </div>
                        </div>
                        <div class="recent-activity-list chat-out-list row">
                            <div class="col s3 recent-activity-list-icon"><i class="mdi-action-settings-voice"></i>
                            </div>
                            <div class="col s9 recent-activity-list-text">
                                <p>5 Days Ago</p>
                                <p>Natalya Parker Send you a voice mail for next conference.</p>
                            </div>
                        </div>
                        <div class="recent-activity-list chat-out-list row">
                            <div class="col s3 recent-activity-list-icon"><i class="mdi-action-store"></i>
                            </div>
                            <div class="col s9 recent-activity-list-text">
                                <p>Last Week</p>
                                <p>Jessy Jay open a new store at S.G Road.</p>
                            </div>
                        </div>
                        <div class="recent-activity-list chat-out-list row">
                            <div class="col s3 recent-activity-list-icon"><i class="mdi-action-settings-voice"></i>
                            </div>
                            <div class="col s9 recent-activity-list-text">
                                <p>5 Days Ago</p>
                                <p>Natalya Parker Send you a voice mail for next conference.</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="collapsible-header light-blue white-text active"><i class="mdi-editor-attach-money"></i>Sales Repoart</div>
                    <div class="collapsible-body sales-repoart">
                        <div class="sales-repoart-list  chat-out-list row">
                            <div class="col s8">Target Salse</div>
                            <div class="col s4"><span id="sales-line-1"></span>
                            </div>
                        </div>
                        <div class="sales-repoart-list chat-out-list row">
                            <div class="col s8">Payment Due</div>
                            <div class="col s4"><span id="sales-bar-1"></span>
                            </div>
                        </div>
                        <div class="sales-repoart-list chat-out-list row">
                            <div class="col s8">Total Delivery</div>
                            <div class="col s4"><span id="sales-line-2"></span>
                            </div>
                        </div>
                        <div class="sales-repoart-list chat-out-list row">
                            <div class="col s8">Total Progress</div>
                            <div class="col s4"><span id="sales-bar-2"></span>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="collapsible-header red white-text"><i class="mdi-action-stars"></i>Favorite Associates</div>
                    <div class="collapsible-body favorite-associates">
                        <div class="favorite-associate-list chat-out-list row">
                            <div class="col s4"><img src="images/avatar1.jpg" alt="" class="circle responsive-img online-user valign profile-image">
                            </div>
                            <div class="col s8">
                                <p>Eileen Sideways</p>
                                <p class="place">Los Angeles, CA</p>
                            </div>
                        </div>
                        <div class="favorite-associate-list chat-out-list row">
                            <div class="col s4"><img src="images/avatar1.jpg" alt="" class="circle responsive-img online-user valign profile-image">
                            </div>
                            <div class="col s8">
                                <p>Zaham Sindil</p>
                                <p class="place">San Francisco, CA</p>
                            </div>
                        </div>
                        <div class="favorite-associate-list chat-out-list row">
                            <div class="col s4"><img src="images/avatar1.jpg" alt="" class="circle responsive-img offline-user valign profile-image">
                            </div>
                            <div class="col s8">
                                <p>Renov Leongal</p>
                                <p class="place">Cebu City, Philippines</p>
                            </div>
                        </div>
                        <div class="favorite-associate-list chat-out-list row">
                            <div class="col s4"><img src="images/avatar1.jpg" alt="" class="circle responsive-img online-user valign profile-image">
                            </div>
                            <div class="col s8">
                                <p>Weno Carasbong</p>
                                <p>Tokyo, Japan</p>
                            </div>
                        </div>
                        <div class="favorite-associate-list chat-out-list row">
                            <div class="col s4"><img src="images/avatar1.jpg" alt="" class="circle responsive-img offline-user valign profile-image">
                            </div>
                            <div class="col s8">
                                <p>Nusja Nawancali</p>
                                <p class="place">Bangkok, Thailand</p>
                            </div>
                        </div>
                    </div>
                </li>
                </ul>
            </li>
        </ul>
      </aside>
      <!-- LEFT RIGHT SIDEBAR NAV-->

    </div>
    <!-- END WRAPPER -->

  </div>
  <!-- END MAIN -->              
            

The Footer

 <!-- START FOOTER -->
  <footer class="page-footer">
    <div class="footer-copyright">
      <div class="container">
        <span>Copyright © 2015 <a class="grey-text text-lighten-4" href="http://themeforest.net/user/geekslabs/portfolio?ref=geekslabs" target="_blank">GeeksLabs</a> All rights reserved.</span>
        <span class="right"> Design and Developed by <a class="grey-text text-lighten-4" href="http://geekslabs.com/">GeeksLabs</a></span>
        </div>
    </div>
  </footer>
  <!-- END FOOTER -->



    <!-- ================================================
    Scripts
    ================================================ -->
    
    <!-- jQuery Library -->
    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>    
    <!--materialize js-->
    <script type="text/javascript" src="js/materialize.js"></script>
    <!--prism-->
    <script type="text/javascript" src="js/prism.js"></script>
    <!--scrollbar-->
    <script type="text/javascript" src="js/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
    <!-- chartist -->
    <script type="text/javascript" src="js/plugins/chartist-js/chartist.min.js"></script>   
    
    <!--plugins.js - Some Specific JS codes for Plugin Settings-->
    <script type="text/javascript" src="js/plugins.js"></script>
    
</body>

</html>              
            

Materialize Colors

materializes & Credits

We've used following materializes & credits

• jQuery
• materializecss
• D3JS
• chartjs
• chartist js
• morrisjs
• flotcharts
• sparkline
• xcharts
• jvectormap
• fullcalendar
• datatables
• perfect scrollbar
• Roboto font
• unsplash