Thank you for purchasing. Feel free to contact me if you have any questions.

Also, email me if you have any feature requests or advices, I'll be glad to know.

Rate it if you like it, it helps for more updates, thank you so much!

Material is a fully responsive admin web app template built with Bootstrap & AngularJS. It uses Sass CSS which makes it easy to customize.

Within the download you'll find the following file structure and contents

Once downloaded, unzip the compressed folder and you'll see something like this:

Material/
├── Material/                       ───> Contains the develop version of Material Admin Template.
│   ├── client/                           └──> All front end files (source code) are in this folder.
│   │     ├── app/                            └──> All the custom JS scripts and HTML markup
│   │     ├── assets/                         └──> All the assets, including images, fonts, i18n data
│   │     ├── styles/                         └──> All the custom stylesheets (Scss files)
│   │     ├── vendors/                        └──> Third party libaries
│   │     ├── favicon.ico
│   │     └── index.html
│   ├── .bowerrc
│   ├── .editorconfig
│   ├── .gitattributes
│   ├── .jshintrc
│   ├── .travis.yml
│   ├── bower.json
│   ├── gulp.config.js
│   ├── gulpfile.js
│   └── package.json
├── CHANGELOG.md                  ───> The change log
├── dist/                         ───> The distribution version of Material Admin (Only for demo purpose, not development)
├── documentation/                ───> Where the help documentation is.
└── landing/                      ───> The landing page template

Introduction to some important files:

".bowerrc"

file is hidden, and is used for configure Twitter Bower

"bower.json"

is the JSON file of Twitter Bower (You can click the link to know more).

"gulp.config.js"

contains the global configuration variables of Gulp tasks

"gulpfile.js"

is the configure file of Gulp (You can click the link to know more). It is used to configure or define tasks and load Gulp plugins.

"package.json"

is the JSON file of NPM (You can click the link to know more). This file is used by npm to store metadata for projects published as npm modules.

You'll need to put the files on a server to run it.

So you can upload the "dist/" folder to your server to run it. Or you can build a server locally.

Then how to build a server locally?

You can build a locally server using WAMP or MAMP (if you uses PHP). Also it's pretty easy to build one with Python or Ruby (if you prefer Python or Ruby). And here we'll build a local server with NodeJS

Preparation:

You'll need to install Node.js (NPM comes along with it) and node-static (an NPM package)

Steps:

It's easy if you are familiar with Node. Download Node.js here then install it, and install node-static with one command line

$ npm install -g node-static

The usage of node-static is simple. Just enter the "dist" directory with command line

$ cd dist/

and type:

$ static

It'll return something like this:

serving "." at http://127.0.0.1:8080

Then you can view the template on http://127.0.0.1:8080 with your browser

Bower is a front-end package manager for the web by Twitter.

Material use Bower to manage all the front end dependencies, make things clean, tidy and simple. However if you are not familiar with command line tool, it may be a bit scary for you, but don't worry, it's simple.

If you haven't try Bower before, then give it a shot, it makes life easier, you'll fall in love with it.

Inside the bower.json file of Bower, you'll see the list dependencies (package name and version):

If you want to know more about the packages, you can click here. Search the package and click the link to know more.

  "dependencies": {
    "jquery": "^3.2.1",
    "angular": "~1.6.6",
    "angular-animate": "~1.6.6",
    "angular-aria": "~1.6.6",
    "angular-messages": "~1.6.6",
    "angular-ui-router": "~1.0.6",
    "angular-translate": "~2.15.1",
    "angular-translate-loader-static-files": "~2.15.1",
    "angular-scroll": "~1.0.0",
    "jquery.slimscroll": "~1.3.3",
    "oclazyload": "^1.0.9",
    "webfontloader": "^1.6.27",
    "angular-material": "1.1.4",
    "font-awesome": "~4.7.0",
    "angular-validation-match": "~1.9.0",
    "textAngular": "~1.5.0",
    "angular-material-data-table": "^0.10.9",
    "echarts": "~3.7.0",
    "angular-wizard": "~1.1.1",
    "ngECharts": "ngecharts#^0.2.0",
    "ngmap": "~1.18.4"
 }

Gulp is a JavaScript task runner (Automation), save yourself from repetitive tasks.

It's probably a bit complex to you if it's your first time using Gulp. However, you'll fail in love with it once you get up and running, it saves you from repetitive tasks. Project like jQuery, Bootstrap and many more use and love task automation tools.

By the way, be sure to check out this Getting Started guide, it will help you get up and running.

"gulp.config.js"

contains the global configuration variables of Gulp tasks

"gulpfile.js"

is the configure file of Gulp (You can click the link to know more). It is used to configure or define tasks and load Gulp plugins.

"package.json"

is the JSON file of NPM (You can click the link to know more). This file is used by npm to store metadata for projects published as npm modules.

Inside package.json file, you'll see all the Gulp plugins that help to automate the tasks.

And all the plugins are configured in gulpfile.js file.

If you want to know more about the plugins, you can click here.

 "devDependencies": {
    "browser-sync": "^2.12.10",
    "del": "^3.0.0",
    "gulp": "~3.9.0",
    "gulp-angular-filesort": "~1.1.1",
    "gulp-angular-templatecache": "~2.0.0",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-concat": "^2.6.0",
    "gulp-csso": "^3.0.0",
    "gulp-filter": "^5.0.0",
    "gulp-if": "~2.0.0",
    "gulp-imagemin": "^3.2.0",
    "gulp-inject": "^4.1.0",
    "gulp-jscs": "~4.0.0",
    "gulp-jshint": "^2.0.0",
    "gulp-less": "^3.1.0",
    "gulp-load-plugins": "^1.2.4",
    "gulp-ng-annotate": "~2.0.0",
    "gulp-open": "~2.0.0",
    "gulp-plumber": "~1.1.0",
    "gulp-print": "~2.0.0",
    "gulp-pug": "~3.3.0",
    "gulp-rev": "^8.0.0",
    "gulp-rev-replace": "^0.4.3",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.0",
    "gulp-task-listing": "~1.0.0",
    "gulp-uglify": "^3.0.0",
    "gulp-useref": "^3.0.5",
    "gulp-util": "~3.0.4",
    "jshint": "^2.8.0",
    "jshint-stylish": "^2.1.0",
    "wiredep": "^4.0.0",
    "yargs": "^8.0.2"
 }

In order to do development with it, first you need to have the following tools installed:

And you'll need to know how some basis about them, click the links to learn more if you not familiar with these yet. If it's your first time using these tools, it's probably too complex or even overwhelming for you. You'd better find someone to help you.

By the way, just a tip here, after you installed NodeJS (NPM comes along with it), you can use one command line to install Yeoman, Bower and Gulp instead of installing them one by one

$ npm install -g yo bower gulp

If you already know how to use them, then just do a few things to start developing:

1. Enter "Material" folder with your command line tool.

2. Install all the NPM packages (for development) with NPM:

$ npm install

3. Install all the front end packages with Twitter Bower:

$ bower install

4. Then type gulp serve and you are ready to go.

$ gulp serve

Tip: By the way, if you want to build a distribution (production) version, simply run

$ gulp serve-dist

The basic structure of template (index.html) is quiet simple. It contains 3 parts: The header, which load all the stylesheets. The body, which contains the content of App. The footer, which load all the scripts.

The Header

<!doctype html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title>Web Application</title>
        <meta name="description" content="Responsive Admin Web App with Bootstrap and AngularJS">
        <meta name="keywords" content="angularjs admin, admin templates, admin themes, bootstrap admin">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-touch-fullscreen" content="yes">
 
        <!-- google fonts -->
        <script type="text/javascript">
            WebFontConfig = {
                google: { families: [ 'Roboto:100,300,400,400italic,500,700:latin' ] }
            };
            (function() {
                var wf = document.createElement('script');
                wf.src = 'bower_components/webfontloader/webfontloader.js';
                wf.type = 'text/javascript';
                wf.async = 'true';
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(wf, s);
            })(); 
        </script>
 
 
        <!-- Needs images, font... therefore can not be part of main.css -->
        <link rel="stylesheet" href="styles/loader.css">
        <link rel="stylesheet" href="vendors/material-design-icons/iconfont/material-icons.css" rel="stylesheet" >
        <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
        <!-- end Needs images -->
 
            
            <!-- build:css({.tmp,client}) styles/main.css -->
            <link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css">
            <link rel="stylesheet" href="styles/bootstrap.css">
            <link rel="stylesheet" href="styles/ui.css">
            <link rel="stylesheet" href="styles/app.css">
            <!-- endbuild -->
    </head>

The Body

    <body data-ng-app="app"
          id="app"
          class="app"
          data-custom-page 
          data-ng-controller="AppCtrl"
          data-ng-class=" { 'layout-boxed': main.layout === 'boxed', 
                            'nav-collapsed-min': main.isMenuCollapsed
          } ">
        <!--[if lt IE 9]>
            <div class="lt-ie9-bg">
                <p class="browsehappy">You are using an <strong>outdated</strong> browser.</p>
                <p>Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
            </div>
        <![endif]-->
 
        <div id="loader-container"></div>
 
        <header data-ng-include=" 'app/layout/header.html' "
                 id="header"
                 class="header-container "
                 data-ng-class="{ 'header-fixed': main.fixedHeader,
                                  'bg-white': ['11','12','13','14','15','16','21'].indexOf(main.skin) >= 0,
                                  'bg-dark': main.skin === '31',
                                  'bg-primary': ['22','32'].indexOf(main.skin) >= 0,
                                  'bg-success': ['23','33'].indexOf(main.skin) >= 0,
                                  'bg-info': ['24','34'].indexOf(main.skin) >= 0,
                                  'bg-warning': ['25','35'].indexOf(main.skin) >= 0,
                                  'bg-danger': ['26','36'].indexOf(main.skin) >= 0
                 }"></header>
 
        <div class="main-container"
             data-ng-class="{ 'app-nav-horizontal': main.menu === 'horizontal' }">
            <aside data-ng-include=" 'app/layout/sidebar.html' "
                   id="nav-container"
                   class="nav-container"  
                   data-ng-class="{ 'nav-fixed': main.fixedSidebar,
                                    'nav-horizontal': main.menu === 'horizontal',
                                    'nav-vertical': main.menu === 'vertical',
                                    'bg-white': ['31','32','33','34','35','36'].indexOf(main.skin) >= 0,
                                    'bg-dark': ['31','32','33','34','35','36'].indexOf(main.skin) < 0
                   }">
            </aside>
 
            <div id="content" class="content-container">
                <section data-ui-view
                         class="view-container {{main.pageTransition.class}}"></section>
            </div>
 
        </div>
 
        <aside data-ng-include=" 'app/layout/customizer.html' "></aside>

The Footer

        <!-- build:js scripts/vendor.js -->
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <script src="bower_components/angular/angular.min.js"></script>
        <script src="bower_components/angular-animate/angular-animate.min.js"></script>
        <script src="bower_components/angular-aria/angular-aria.min.js"></script>
        <script src="bower_components/angular-messages/angular-messages.min.js"></script>
        <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
        <script src="bower_components/oclazyload/dist/ocLazyLoad.js"></script>
        <!-- endbuild -->
 
 
        <!-- build:js scripts/ui.js -->
        <script src="bower_components/angular-translate/angular-translate.min.js"></script>
        <script src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
 
        <script src="bower_components/angular-material/angular-material.min.js"></script>
 
        <script src="bower_components/angular-scroll/angular-scroll.min.js"></script>
        <script src="bower_components/jquery.slimscroll/jquery.slimscroll.min.js"></script>
 
        <script src="vendors/echarts.js"></script>        
        <script src="vendors/ngecharts.js"></script>
    
        <script src="bower_components/angular-material-data-table/dist/md-data-table.min.js"></script>
        <script src="bower_components/angular-validation-match/dist/angular-validation-match.min.js"></script>
        <!-- endbuild -->
 
 
        <!-- build:js scripts/app.js -->
        <!-- inject:js -->
        <script src="app/app.module.js"></script>
        <script src="app/chart/chart.module.js"></script>
        <script src="app/form/form.module.js"></script>
        <script src="app/form/formValidation.module.js"></script>
        <script src="app/layout/layout.module.js"></script>
        <script src="app/core/core.module.js"></script>
        <script src="app/table/table.module.js"></script>
        <script src="app/ui/ui.module.js"></script>
        <script src="app/page/page.module.js"></script>
        <script src="app/chart/echarts.controller.js"></script>
        <script src="app/dashboard/dashboard.controller.js"></script>
        <script src="app/form/form.controller.js"></script>
        <script src="app/form/formValidation.controller.js"></script>
        <script src="app/form/wizard.controller.js"></script>
        <script src="app/layout/customizer.controller.js"></script>
        <script src="app/layout/layout.diretive.js"></script>
        <script src="app/layout/loader.js"></script>
        <script src="app/layout/sidebar.directive.js"></script>
        <script src="app/core/app.config.js"></script>
        <script src="app/core/app.controller.js"></script>
        <script src="app/core/config.lazyload.js"></script>
        <script src="app/core/config.route.js"></script>
        <script src="app/core/i18n.js"></script>
        <script src="app/table/table.controller.js"></script>
        <script src="app/ui/material.controller.js"></script>
        <script src="app/ui/ui.controller.js"></script>
        <script src="app/ui/ui.directive.js"></script>
        <script src="app/page/page.controller.js"></script>
        <script src="app/page/page.directive.js"></script>
        <!-- endinject -->
        <!-- endbuild -->
    </body>
</html>