Metronic

The Ultimate Bootstrap Admin Theme Framework For Next Generation Applications

Watch Video

Overview

Metronic is the most trusted and popular admin theme in the market which is based on Bootstrap 4 framework that provides a complete frontend to build any type of web applications. Metronic comes with multiple demos for classic jQuery and Angular versions. Metronic package also includes powerful build tools to manage and deploy project assets easily. This documentation provides the information you need to be able to use Metronic in your applications, customising it to match your exact requirements to get your projects done successfully.

Quick Start

  1. Download the latest Theme source from ThemeForest.
  2. Extract zip file. Extracted zip file will have 2 folders.
    • docs
    • theme
  3. Download and install Node.js from nodejs.org/en/download/
  4. Start command prompt window or terminal and change directory to [metronic_folder]/theme/[version_package]/tools/
    cd theme/angular/tools
    cd theme/default/tools
  5. Install the latest version of npm.
    npm install -g npm@latest
  6. Install bower.
    npm install -g bower
  7. Install gulp.
    npm install -g gulp-cli
  8. Install npm dependencies. Must execute in [metronic_folder]/theme/[version_package]/tools/ folder.
    npm install
  9. Install bower dependencies. Must execute in [metronic_folder]/theme/[version_package]/tools/ folder.
    bower install
  10. Compile scss and javascript using gulp. You need to run this command everytime scripts under [metronic_folder]/theme/[version_package]/src has been changed. This command must execute in the [metronic_folder]/theme/[version_package]/tools folder.
    gulp --prod
  11. Run Angular application
    cd [metronic_folder]/theme/angular/dist/demo/[demo]
    npm install
    ng serve
  12. Default static HTML location
    cd [metronic_folder]/theme/default/dist/demo/[demo]

Installation

Overview

This section guides you to install all required software and libraries in order to fully utilize Metronic for your projects.

Install Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js is required in order to run the Metronic build tools. Download the latest version of Node and install it: nodejs.org/en/download/

Install NPM

Npm is the package manager for JavaScript and the world’s largest software registry. Npm is a separate project from Node.js, and tends to update more frequently. As a result, even if you’ve just downloaded Node.js (and therefore npm), you’ll probably need to update your npm.

npm install npm@latest -g

Verify that npm in successfully installed, and version of installed npm will appear.

npm --version

Install Bower

Bower keeping track and manage of all these packages, frameworks, libraries, assets, and utilities.
Bower works by fetching and installing packages from all over, downloading, and saving the stuff.
Bower keeps track of these packages in a manifest file, bower.json.
Run this command in terminal to install bower globally.

npm install bower -g

Verify that bower in successfully installed, and version of installed bower will appear.

bower --version

Bower requires node, npm and git to be installed.

Install Gulp

Gulp is a toolkit that helps you automate your time-consuming tasks in development workflow. To install gulp globally.

npm install gulp-cli -g

If you have previously installed a version of gulp globally, please remove it to make sure old version doesn't collide with new gulp-cli.

npm rm --global gulp

Verify that gulp in successfully installed, and version of installed gulp will appear.

gulp --version

Install Git

Please set Git application into the PATH environment variable as GIt is required for Bower.

Git is a distributed version control system designed to handle projects. Download and install Git from https://git-scm.com/.

Verify that Git in successfully installed, and version of installed Git will appear.

git --version

Files Structure

Overview

Metronic comes with a flexible file structure that can be easily used for small to large scope projects. This section will explain Metronic's entire file structure and how to adapt it to your project.

Please note [metronic_folder] in the path introduced in this documentation below are reference to the root folder where you have unpacked the Metronic theme location.
[version_package] is refering to package type version, either angular or default (HTML).

Path Description
docs The theme documentation
theme The theme source code
dist Theme versions folder
angular Theme angular version.
default The angular version of the defult demo.
.. Other demos
html Theme classic version
src Src(stands for source) contains the raw source code of javascript, scss, images and web font files that will be minified/concatenated onto assets folder for production usage
js Javascript source files
media Media(image, video, font files, etc) files
sass Sass source files
vendors 3rd party libraries
tools Development and deployment tools
bower_components Bower package installation folder
gulp The build tools gulp tasks for bundle and minify the js and css files and complile sass files.
node_modules NPM package installation folder
bower.json Bower package manager config file
default.json | angular.json Metronic build config file. Here you can configure the build according to your requirements
gulpfile.json Gulp tasks main script. All the build tool tasks are grouped in this script
package.json NPM package manager config file

Javascript

Below table explains Metronic javascript file structure:
Path Description
theme The theme source code
src Src(stands for source) contains the raw source code of javascript, scss, images and web font files that will be minified/concatenated onto assets folder for production usage
js Javascript files
app Application level(global) javascript files
base Application level base javascript files are minified and concatenated into the base bundle assets/demo/[demo_id]/base/scripts.bundle.js to be included globally. demo_id is the selected demo name.
custom Application level custom javascript files are minified and moved to assets/app/js/* to be included on demand.
demo Demo level javascript files
default Default demo javascript files
base Demo level base javascript files are minified and concatenated into the base bundle assets/demo/[demo_id]/base/scripts.bundle.js to be included globally. demo_id is the selected demo name.
custom Demo level custom javascript files are minified and moved to assets/demo/[demo_id]/custom/* to be included on demand. demo_id is the selected demo name.
... Other demos
framework Framework components javascript files are minified and concatenated into the base bundle assets/demo/[demo_id]/base/scripts.bundle.js to be included globally. demo_id is the selected demo name.
snippets Snippets are custom templates created for certain requirements by customizing and extending the theme's base components and plugins
base Base snippets javascript files are minified and concatenated into the base bundle assets/demo/[demo_id]/base/scripts.bundle.js to be included globally. demo_id is the selected demo name.
custom Application level custom javascript files are minified and moved to assets/snippets/* to be included on demand.

SASS

Below table explains Metronic SASS file structure:
Path Description
theme The theme source code
src Src(stands for source) contains the raw source code of javascript, scss, images and web font files that will be minified/concatenated onto assets folder for production usage
sass Javascript files
demo Demo level sass files
default Default demo sass files
style.css style.scss is compiled, minified and concatenated into the base bundle stylesheet assets/demo/[demo_id]/base/style.bundle.css to be included globally. demo_id is the selected demo name.
... Other demos
framework Framework scss files are compiled, minified and concatenated into the base bundle assets/demo/[demo_id]/base/style.bundle.css to be included globally. demo_id is the selected demo name.
snippets Snippets sass files are compiled, minified and concatenated into the base bundle assets/demo/[demo_id]/base/style.bundle.css to be included globally. demo_id is the selected demo name.
custom Application level custom javascript files are minified and moved to assets/snippets/* to be included on demand.

Build Tools

Overview

Metronic build tools provides easy package management and production deployment for any type of web application that also comes with powerful asset bundle tools to organize assets structure with custom bundling for production.

Metronic's central default.json and angular.json build config files allows you manage the entire assest bundling for production by taking advantage of package managers such as bower and npm.

Build Config

The build config file is located at [metronic_folder]/theme/[version_package]/tools/conf/[version_package].json and you can fully customize the build settings to meet your project requirements:

Please make sure the dist output path config.dist.angular & config.dist.html is set to true in default.json and angular.json, for the build tools to output the compilation.

{
  "config": {
    "demo": "",
    "debug": false,
    "compile": {
      "jsUglify": false,
      "cssMinify": false,
      "jsSourcemaps": false,
      "cssSourcemaps": false
    },
    "path": {
      "src": "./../theme/src",
      "bower_components": "./bower_components",
      "node_modules": "./node_modules",
      "demoApiUrl": "http://localhost/keenthemes/metronic_5.0/theme/dist/preview/"
    },
    "dist": [
         "./../theme/angular/dist/**/src/assets",
         "./../theme/default/dist/**/assets"
      ]
    }
  },
  "build": {
    "vendors": {
      "base": {
        "src": {
          "mandatory": {
            "jquery": {
              "scripts": [
                "{$config.path.bower_components}/jquery/dist/jquery.js"
              ]
            },
            "bootstrap": {
              "styles": [
                "{$config.path.src}/sass/framework/vendors/bootstrap/bootstrap.scss"
              ],
              "scripts": [
                "{$config.path.node_modules}/popper.js/dist/umd/popper.js",
                "{$config.path.bower_components}/bootstrap/dist/js/bootstrap.js"
              ]
            },
            "js-cookie": {
              "scripts": [
                "{$config.path.bower_components}/js-cookie/src/js.cookie.js"
              ]
            },
            "jquery-smooth-scroll": {
              "scripts": [
                "{$config.path.node_modules}/jquery-smooth-scroll/jquery.smooth-scroll.js"
              ]
            }
          },
          "optional": {
            "jquery-form": {
              "scripts": [
                "{$config.path.bower_components}/jquery-form/dist/jquery.form.min.js"
              ]
            },
            "tether": {
              "styles": [
                "{$config.path.bower_components}/tether/dist/css/tether.css"
              ],
              "scripts": []
            },
            "malihu-custom-scrollbar-plugin": {
              "styles": [
                "{$config.path.bower_components}/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css"
              ],
              "scripts": [
                "{$config.path.bower_components}/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"
              ],
              "images": [
                "{$config.path.bower_components}/malihu-custom-scrollbar-plugin/mCSB_buttons.png"
              ]
            },
            "blockUI": {
              "scripts": [
                "{$config.path.bower_components}/blockUI/jquery.blockUI.js"
              ]
            },
            "prismjs": {
              "styles": [
                "{$config.path.node_modules}/prismjs/themes/prism.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/prismjs/prism.js"
              ]
            },
            "bootstrap-datepicker": {
              "styles": [
                "{$config.path.bower_components}/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css"
              ],
              "scripts": [
                "{$config.path.bower_components}/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"
              ]
            },
            "bootstrap-datetimepicker": {
              "styles": [
                "{$config.path.bower_components}/smalot-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"
              ],
              "scripts": [
                "{$config.path.bower_components}/moment/min/moment.min.js",
                "{$config.path.bower_components}/smalot-bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"
              ]
            },
            "bootstrap-timepicker": {
              "styles": [
                "{$config.path.node_modules}/bootstrap-timepicker/css/bootstrap-timepicker.min.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/bootstrap-timepicker/js/bootstrap-timepicker.min.js",
                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-timepicker.init.js"
              ]
            },
            "bootstrap-daterangepicker": {
              "styles": [
                "{$config.path.bower_components}/bootstrap-daterangepicker/daterangepicker.css"
              ],
              "scripts": [
                "{$config.path.bower_components}/bootstrap-daterangepicker/daterangepicker.js",
                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-daterangepicker.init.js"
              ]
            },
            "bootstrap-touchspin": {
              "styles": [
                "{$config.path.bower_components}/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.css"
              ],
              "scripts": [
                "{$config.path.bower_components}/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.js"
              ]
            },
            "bootstrap-maxlength": {
              "scripts": [
                "{$config.path.bower_components}/bootstrap-maxlength/src/bootstrap-maxlength.js"
              ]
            },
            "bootstrap-switch": {
              "styles": [
                "{$config.path.bower_components}/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css"
              ],
              "scripts": [
                "{$config.path.bower_components}/bootstrap-switch/dist/js/bootstrap-switch.js",
                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-switch.init.js"
              ]
            },
            "bootstrap-selectsplitter": {
              "scripts": [
                "{$config.path.bower_components}/bootstrap-selectsplitter/bootstrap-selectsplitter.js"
              ]
            },
            "bootstrap-select": {
              "styles": [
                "{$config.path.bower_components}/bootstrap-select/dist/css/bootstrap-select.css"
              ],
              "scripts": [
                "{$config.path.bower_components}/bootstrap-select/dist/js/bootstrap-select.js"
              ]
            },
            "select2": {
              "styles": [
                "{$config.path.bower_components}/select2/dist/css/select2.css"
              ],
              "scripts": [
                "{$config.path.bower_components}/select2/dist/js/select2.js"
              ]
            },
            "typeahead.js": {
              "scripts": [
                "{$config.path.bower_components}/typeahead.js/dist/typeahead.bundle.js",
                "{$config.path.node_modules}/handlebars/dist/handlebars.js"
              ]
            },
            "inputmask": {
              "scripts": [
                "{$config.path.bower_components}/inputmask/dist/jquery.inputmask.bundle.js",
                "{$config.path.bower_components}/inputmask/dist/inputmask/inputmask.date.extensions.js",
                "{$config.path.bower_components}/inputmask/dist/inputmask/inputmask.numeric.extensions.js",
                "{$config.path.bower_components}/inputmask/dist/inputmask/inputmask.phone.extensions.js"
              ]
            },
            "autosize": {
              "scripts": [
                "{$config.path.bower_components}/autosize/dist/autosize.js"
              ]
            },
            "clipboard": {
              "scripts": [
                "{$config.path.node_modules}/clipboard/dist/clipboard.min.js"
              ]
            },
            "ion.rangeSlider": {
              "styles": [
                "{$config.path.bower_components}/ion.rangeSlider/css/ion.rangeSlider.css",
                "{$config.path.bower_components}/ion.rangeSlider/css/ion.rangeSlider.skinFlat.css"
              ],
              "scripts": [
                "{$config.path.bower_components}/ion.rangeSlider/js/ion.rangeSlider.js"
              ],
              "images": [
                "{$config.path.bower_components}/ion.rangeSlider/img/sprite-skin-flat.png"
              ]
            },
            "dropzone": {
              "styles": [
                "{$config.path.bower_components}/dropzone/dist/dropzone.css"
              ],
              "scripts": [
                "{$config.path.bower_components}/dropzone/dist/dropzone.js"
              ]
            },
            "summernote": {
              "styles": [
                "{$config.path.bower_components}/summernote/dist/summernote.css"
              ],
              "scripts": [
                "{$config.path.bower_components}/summernote/dist/summernote.js"
              ],
              "fonts": [
                "{$config.path.bower_components}/summernote/dist/font/**"
              ]
            },
            "bootstrap-makrdown": {
              "styles": [
                "{$config.path.bower_components}/bootstrap-markdown/css/bootstrap-markdown.min.css"
              ],
              "scripts": [
                "{$config.path.bower_components}/bootstrap-markdown/js/bootstrap-markdown.js",
                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-markdown.init.js"
              ]
            },
            "jquery-validation": {
              "scripts": [
                "{$config.path.node_modules}/jquery-validation/dist/jquery.validate.js",
                "{$config.path.node_modules}/jquery-validation/dist/additional-methods.js",
                "{$config.path.src}/js/framework/components/plugins/forms/jquery-validation.init.js"
              ]
            },
            "remarkable-bootstrap-notify": {
              "scripts": [
                "{$config.path.bower_components}/remarkable-bootstrap-notify/dist/bootstrap-notify.js",
                "{$config.path.src}/js/framework/components/plugins/base/bootstrap-notify.init.js"
              ]
            },
            "animate.css": {
              "styles": [
                "{$config.path.node_modules}/animate.css/animate.min.css"
              ]
            },
            "toastr": {
              "styles": [
                "{$config.path.bower_components}/toastr/toastr.css"
              ],
              "scripts": [
                "{$config.path.bower_components}/toastr/toastr.js"
              ]
            },
            "jstree": {
              "styles": [
                "{$config.path.bower_components}/jstree/dist/themes/default/style.css"
              ],
              "scripts": [
                "{$config.path.bower_components}/jstree/dist/jstree.js"
              ],
              "images": [
                "{$config.path.src}/vendors/jstree/32px.png",
                "{$config.path.bower_components}/jstree/dist/themes/default/40px.png",
                "{$config.path.bower_components}/jstree/dist/themes/default/*.gif"
              ]
            },
            "morris.js": {
              "styles": [
                "{$config.path.bower_components}/morris.js/morris.css"
              ],
              "scripts": [
                "{$config.path.bower_components}/raphael/raphael.js",
                "{$config.path.bower_components}/morris.js/morris.js"
              ]
            },
            "chartist": {
              "styles": [
                "{$config.path.bower_components}/chartist/dist/chartist.css"
              ],
              "scripts": [
                "{$config.path.bower_components}/chartist/dist/chartist.js"
              ]
            },
            "chart.js": {
              "scripts": [
                "{$config.path.bower_components}/chart.js/dist/Chart.bundle.js",
                "{$config.path.src}/js/framework/components/plugins/charts/chart.init.js"
              ]
            },
            "bootstrap-session-timeout": {
              "scripts": [
                "{$config.path.bower_components}/bootstrap-session-timeout/dist/bootstrap-session-timeout.js"
              ]
            },
            "jquery-idletimer": {
              "scripts": [
                "{$config.path.bower_components}/jquery-idletimer/dist/idle-timer.js"
              ]
            },
            "counter-up": {
              "scripts": [
                "{$config.path.bower_components}/waypoints/lib/jquery.waypoints.js",
                "{$config.path.bower_components}/counter-up/jquery.counterup.js"
              ]
            },
            "socicon": {
              "styles": [
                "{$config.path.bower_components}/socicon/css/socicon.css"
              ],
              "fonts": [
                "{$config.path.bower_components}/socicon/font/**"
              ]
            },
            "font-awesome": {
              "styles": [
                "{$config.path.bower_components}/font-awesome/css/font-awesome.css"
              ],
              "fonts": [
                "{$config.path.bower_components}/font-awesome/fonts/**"
              ]
            },
            "line-awesome": {
              "styles": [
                "{$config.path.src}/vendors/line-awesome/css/line-awesome.css"
              ],
              "fonts": [
                "{$config.path.src}/vendors/line-awesome/fonts/**"
              ]
            },
            "flaticon": {
              "styles": [
                "{$config.path.src}/vendors/flaticon/css/flaticon.css"
              ],
              "fonts": [
                "{$config.path.src}/vendors/flaticon/fonts/**"
              ]
            },
            "metronic": {
              "styles": [
                "{$config.path.src}/vendors/metronic/css/styles.css"
              ],
              "fonts": [
                "{$config.path.src}/vendors/metronic/fonts/**"
              ]
            }
          }
        },
        "bundle": {
          "styles": "{$config.output}/vendors/base/vendors.bundle.css",
          "scripts": "{$config.output}/vendors/base/vendors.bundle.js",
          "images": "{$config.output}/vendors/base/images",
          "fonts": "{$config.output}/vendors/base/fonts"
        }
      },
      "custom": {
        "gmaps": {
          "src": {
            "scripts": [
              "{$config.path.bower_components}/gmaps/gmaps.js"
            ]
          },
          "bundle": {
            "scripts": "{$config.output}/vendors/custom/gmaps/gmaps.js"
          }
        },
        "jqvmap": {
          "src": {
            "styles": [
              "{$config.path.bower_components}/jqvmap/dist/jqvmap.css"
            ],
            "scripts": [
              "{$config.path.bower_components}/jqvmap/dist/jquery.vmap.js",
              "{$config.path.bower_components}/jqvmap/dist/maps/jquery.vmap.europe.js",
              "{$config.path.bower_components}/jqvmap/dist/maps/jquery.vmap.germany.js",
              "{$config.path.bower_components}/jqvmap/dist/maps/jquery.vmap.russia.js",
              "{$config.path.bower_components}/jqvmap/dist/maps/jquery.vmap.usa.js",
              "{$config.path.bower_components}/jqvmap/dist/maps/jquery.vmap.world.js"
            ]
          },
          "bundle": {
            "styles": "{$config.output}/vendors/custom/jqvmap/jqvmap.bundle.css",
            "scripts": "{$config.output}/vendors/custom/jqvmap/jqvmap.bundle.js"
          }
        },
        "flot": {
          "src": {
            "scripts": [
              "{$config.path.bower_components}/Flot/jquery.flot.js",
              "{$config.path.bower_components}/Flot/jquery.flot.resize.js",
              "{$config.path.bower_components}/Flot/jquery.flot.categories.js",
              "{$config.path.bower_components}/Flot/jquery.flot.pie.js",
              "{$config.path.bower_components}/Flot/jquery.flot.stack.js",
              "{$config.path.bower_components}/Flot/jquery.flot.crosshair.js",
              "{$config.path.bower_components}/Flot/jquery.flot.axislabels.js"
            ]
          },
          "bundle": {
            "scripts": "{$config.output}/vendors/custom/flot/flot.bundle.js"
          }
        }
      }
    },

    "demo": {
      "default": {
        "base": {
          "src": {
            "styles": [
              "{$config.path.src}/sass/demo/default/style.scss"
            ],
            "scripts": [
              "{$config.path.src}/js/framework/**/*.js",
              "{$config.path.src}/js/demo/default/base/**/*.js",
              "{$config.path.src}/js/app/base/**/*.js",
              "{$config.path.src}/js/snippets/base/**/*.js"
            ]
          },
          "bundle": {
            "styles": "{$config.output}/demo/default/base/style.bundle.css",
            "scripts": "{$config.output}/demo/default/base/scripts.bundle.js"
          }
        },
        "custom": {
          "src": {
            "scripts": [
              "{$config.path.src}/js/demo/default/custom/**/*.js"
            ],
            "media": [
              "{$config.path.src}/media/demo/default/**/*.*"
            ]
          },
          "output": {
            "scripts": "{$config.output}/demo/default/custom/",
            "media": "{$config.output}/demo/default/media/"
          }
        }
      },
      "demo2": {
        "base": {
          "src": {
            "styles": [
              "{$config.path.src}/sass/demo/demo2/style.scss"
            ],
            "scripts": [
              "{$config.path.src}/js/framework/**/*.js",
              "{$config.path.src}/js/demo/demo2/base/**/*.js",
              "{$config.path.src}/js/app/base/**/*.js",
              "{$config.path.src}/js/snippets/base/**/*.js"
            ]
          },
          "bundle": {
            "styles": "{$config.output}/demo/demo2/base/style.bundle.css",
            "scripts": "{$config.output}/demo/demo2/base/scripts.bundle.js"
          }
        },
        "custom": {
          "src": {
            "scripts": [
              "{$config.path.src}/js/demo/demo2/custom/**/*.js"
            ],
            "media": [
              "{$config.path.src}/media/demo/demo2/**/*.*"
            ]
          },
          "output": {
            "scripts": "{$config.output}/demo/demo2/custom/",
            "media": "{$config.output}/demo/demo2/media/"
          }
        }
      }
    },

    "snippets": {
      "src": {
        "scripts": [
          "{$config.path.src}/js/snippets/custom/**/*.js"
        ]
      },
      "output": {
        "scripts": "{$config.output}/snippets/"
      }
    },

    "app": {
      "src": {
        "scripts": [
          "{$config.path.src}/js/app/custom/**/*.js"
        ],
        "media": [
          "{$config.path.src}/media/app/**/*.*"
        ]
      },
      "output": {
        "scripts": "{$config.output}/app/js",
        "media": "{$config.output}/app/media"
      }
    }
  }
}

Required Core CSS and JS files

Vendors list under build.vendors.base.src.mandatory is required, and the build.vendors.base.src.optional is optional. Also JS & CSS files in demo.demoName* is required for specific demo styles and scripts.

* demoName is the unique demo name, like default, demo2, demo3, etc.

Under snippets and app nodes are for preview demo and optional.

Build Config
Field Type Description
config.demo string Specify an ID of the selected demo for gulp tool to build assets only for selected demo
config.debug boolean Enable/disable debug console log.
config.compile.jsUglify boolean Enable/disable output Javascript minify.
config.compile.cssMinify boolean Enable/disable output CSS minify.
config.compile.jsSourcemaps boolean Enable/disable output Javascript with sourcemaps.
config.compile.cssSourcemaps boolean Enable/disable output CSS with sourcemaps.
config.path object Predefined paths the where src/, node_modules/ and bower_components/ are located. demoApiUrl is the ajax API path used by datatables, dropdowns with live search and other json server side data source related demos.
config.dist object dist stands for distributable and refers to the directories where the minified and bundled assets will be stored for production uses. At the moment Metronic has 3 distribution directories html, angular and preview and depending on your needs you can disable unused distribution to reduce build process executing time.

For example your project is based on Angular you might want to disable preview and html modes. preview is required if you want to customize the seletec demo layout export it for further integration.
Build Items
build.vendors object vendors object specifies all 3rd party resources to be deployed to assets/vendors/ folder for production usage
build.vendors.base object This object specifies global 3rd party resources to be added into the base css and js vendors bundles assets/vendors/base/vendors.bundle.js and assets/vendors/base/vendors.bundle.css

The 3rd party plugin images or font files also will be deployed into assets/vendors/base/images and assets/vendors/base/fonts
build.vendors.custom object This object specifies 3rd party resources that are includable on demand from assets/vendors/custom/ folder
build.demo.default object Default demo assets
build.demo.default.base object This object specifies the global assets of the demo to be added into the base css and js demo bundles assets/demo/default/base/scripts.bundle.js and assets/demo/default/base/styles.bundle.css

The media(e.g: images) of the demo are deployed into assets/demo/default/media
build.demo.default.custom object This object specifies custom assets that are includable on demand from assets/demo/default/custom/ folder
build.snippets object This object specifies snippets assets that are includable on demand from assets/snippets/ folder
build.app object This object specifies application level global assets that are includable on demand from assets/app/ folder. Useful if you want to add custom scripts that are used in some spesific pages only.

Tasks

Please update the Node.js, global NPM and bower to the latest version, if you got the error related to the node-sass.

Make sure that before running below tasks the demo parameter in [metronic_folder]/theme/[version_package]/tools/conf/[version_package].json is set to your current selected demo id (e.g: default, demo2, demo8 or demo12).
Leave the demo parameter empty to build for all demos.
Please set config.path.demoApiUrl parameter in [metronic_folder]/theme/[version_package]/tools/conf/[version_package].json URL to your installed localhost API.

Launch your terminal and change its current directory to the project's tools folder where the build files are located. All commands below must be run in this tools folder.

cd [metronic_folder]/theme/[version_package]/tools/

For the first time launch, run the command below to install the npm dependencies defined in [metronic_folder]/theme/[version_package]/tools/packages.json (if you haven't done already) :

npm install

For the first time launch, run the command below to install the bower dependencies defined in [metronic_folder]/theme/[version_package]/tools/bower.json (if you haven't done already) :

bower install

For the first time or after every modification in [metronic_folder]/theme/src/, run below task to compile the assets as defined in [metronic_folder]/theme/[version_package]/tools/conf/[version_package].json :

gulp

Provide argument --prod to build assets with JS and CSS minify enabled.

gulp --prod

Run below task to update server side ajax demo API URL fix (required fix for angular and html versions) as defined in config.path.demoApiUrl right after gulp task completed:

gulp apiurl

Base theme CSS & JS in [metronic_folder]/theme/src/. When you run gulp, all CSS & JS from [metronic_folder]/theme/src/ will be compiled and place into several demo locations, for Angular and HTML static. The compile output folder is defined in [metronic_folder]/theme/[version_package]/tools/conf/[version_package].json file, under config.dist. You can disabled others. And create another one compile output path.

"myapp": {
   "enabled": true,
   "path": "./../myangular/myapp/src/assets"
}

Gulp can run automatically when a file changed. Watch tasks file is located in [metronic_folder]/theme/[version_package]/tools/gulp/watch.js.

To run watcher for all JS and CSS files. Run command below.

gulp watch

You also can run watcher separately for JS and CSS.

gulp watch:js
gulp watch:scss

Stylesheets

Overview

Each demo has own base style [metronic_folder]/theme/src/sass/demo/[demo_id]/style.scss that will be compiled and added into the demo's base css bundle assets/demo/[demo_id]/base/styles.bundle.css.

Config

The demo's style.scss includes the entire framework stylesheets and compiles with its own layout and global settings that overrides's Metronic frameworks base global settings. Thus each demo can customize and change the look and feel of the the entire theme components by overriding global config [metronic_folder]/theme/src/sass/framework/_config.scss by the demo level config [metronic_folder]/theme/src/sass/demo/[demo_id]/_framework-config.scss.

Metronic uses nested map list to structure the config options with special custom function arrat-get() to access the nested config structure. Below is the example of the framework's base SASS config:


//
//** Global Config
//

//== Framework SASS Functions
@import "base/functions";

//== Layout Breakpoints
// Define the minimum and maximum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$m--layout-breakpoints: (
  	// Small screen / phone
  	sm: 576px,

  	// Medium screen / tablet
  	md: 768px,

  	// Large screen / desktop
  	lg: 992px,

  	// Extra large screen / wide desktop
  	xl: 1200px,

    // Extra large screen / wide desktop
    xxl: 1400px,

    xxxl: 1600px
) !default;

//== Global arrow style
$m--arrow-style: 'smooth'; // supported options: smooth, classic

//== Default skin
$m--default-skin: 'light'; // supported options: light, dark

//== Global rounded border mode
$m--rounded: true;

//== Force cursor with pointer for button tags globally
$m--btn-force-hover-pointer: true;

//== Border Radius
$m--border-radius: (
    general: 4px,
    dropdown: 6px,
    scrollbar: 2px
);

//== Transition
$m--transition: (
    general: all 0.3s,
    link: (
        hover: color .4s ease
    )
);

//== UI State Color
$m--state-colors: (
    // metronic states
    brand: (
        base: #716aca,
        inverse: #ffffff
    ),
    metal: (
        base: #c4c5d6,
        inverse: #111111
    ),
    light: (
        base: #ffffff,
        inverse: #282a3c
    ),
    accent: (
        base: #00c5dc,
        inverse: #ffffff
    ),
    focus: (
        base: #9816f4,
        inverse: #ffffff
    ),

    // bootstrap states
    primary: (
        base: #5867dd,
        inverse: #ffffff
    ),
    success: (
        base: #34bfa3,
        inverse: #ffffff
    ),
    info: (
        base: #36a3f7,
        inverse: #ffffff
    ),
    warning: (
        base: #ffb822,
        inverse: #111111
    ),
    danger: (
        base: #f4516c,
        inverse: #ffffff
    )
);

//== The body element font settings
$m--root-font: (
    size: (
        desktop: 14px,
        tablet: 13px,
        mobile: 13px
    ),
    weight: 300,
    color: (
        light: #333333,
        dark: #efefef
    )
);

//== Best font families
$m--font-families: (
    regular: 'Poppins',
    heading: 'Roboto'
);

//== General link font settings
$m--link-font: (
    default: (
        color: (
            light: get-brand-color(),
            dark: get-brand-color()
        )
    ),

    hover: (
        color: (
            light: get-brand-color('+'),
            dark: get-brand-color('+')
        )
    )
);
							
							

You can access to an option by using array-get() function as shown below:

$border-radius: array-get($m--border-radius, general); // 4px;
$brand-base-color: array-get($m--state-colors, brand, base); // #716aca
$brand-inverse-color: array-get($m--state-colors, brand, inverse); // #ffffff

Mixins

You can use Metronic's globally available base mixins in your custom codes. All available mixins can be found here: src/sass/framework/base/_mixins.scss

Functions

You can use Metronic's globally available SASS functions in your custom codes. All available functions can be found here: src/sass/framework/base/_functions.scss

Helper Classes

Class Description
m--margin-[size]
m--margin-top-[size]
m--margin-bottom-[size]
m--margin-left-[size]
m--margin-right-[size]
Margin helper classes where [size] can accept 5, 10, 15, 20, 25, 30, 35, 40, 45 and 50. Example: m--margin-10, m--margin-top-20
m--padding-[size]
m--padding-top-[size]
m--padding-bottom-[size]
m--padding-left-[size]
m--padding-right-[size]
Padding helper classes where [size] can accept 5, 10, 15, 20, 25, 30, 35, 40, 45 and 50. Example: m--padding-10, m--padding-left-20
m--full-height Set full 100% height helper class.
m--valign-top
m--valign-middle
m--valign-bottom
Vertical align the content to top, middle or bottom
m--space-[size] Space helper classes where [size] can accept 5, 10, 15, 20, 30, and 40. Example: m--space-10, m--space-20
m--block-center Helper class to set element centered.
m--align-[alignment] Alignment helper classes where [alignment] can accept right, left and center. Example: m--align-right, m--align-center
m--pull-[direction] Pull element helper classes where [direction] can accept right and left. Example: m--pull-right, m--pull-left
m--img-rounded Image rounded border helper class
m--block-inline Helper class to set element display as inline block.
m--hide Helper class to hide element.
m--clearfix
m--marginless Remove margin helper class
m--img-centered Helper class to set image centered
m--font-transform-u
m--font-transform-l
m--font-transform-c
m--font-transform-i
Text transform helper classes.
m--font-[weight] Weight helper classes where [weight] can accept thin, normal, bold, bolder, boldest and boldest2. Example: m--font-thin, m--font-normal, m--font-bold
m--[type]-font-size-[size] Font size helper classes where [type] can accept text and icon. [size] can accept lg1, lg2, lg3, lg4, lg5, sm1, sm2, sm3, sm4, and sm5. Example: m--icon-font-size-lg3, m--font-normal
m--font-[color]
m--font-inverse-[color]
m--bg-[color]
m--bg-fill-[color]
Font and background color helper classes where [color] can accept brand, metal, light, accent, focus, primary, success, info, warning and danger. Example: m--font-inverse-primary, m--bg-info, m--bg-fill-danger
m--visible-[breakpoint]
m--visible-[breakpoint]-inline-block
m--hidden-[breakpoint]
Helper classes to set visible or hidden for responsive breakpoint. [breakpoint] can accept sm, md, lg, xl, xxl, xxxl. Example: m--visible-sm, m--visible-md-inline-block, m--hidden-xl

Components

Util Class

Util is Metronic's base utility helper class defined in src/js/framework/base/util.js and globally available within the theme.

App Class

App is Metronic's base javascript class defined in src/js/framework/base/app.js and globally available within the theme that handles all the initializaitons of base components such as bootstrap popover and tooltips, scrollable contents(using Custom Scroll plugin), etc.

Datatables Component

Datatable is a Metronic's custom plugin defined in src/js/framework/components/general/datatable.js.

Below code shows basic initialization of the datatable from element with attribute ID m_datatable:

<div id="m_datatable"></div>
var datatable = $('#m_datatable').mDatatable(options);

To initialize Datatable in Angular, init under ngAfterViewInit Angular hook function and cast jQuery element object with <any>.

ngAfterViewInit() {
    let datatable = (<any>$('#m_datatable')).mDatatable(options);
}
var options = {
    data: {
        type: 'remote',
        source: {
            read: {
                url: 'inc/api/datatables/demos/orders.php',
                method: 'GET',
                // custom headers
                headers: { 'x-my-custom-header': 'some value', 'x-test-header': 'the value'},
                params: {
                    // custom query params
                    query: {
                        generalSearch: '',
                        EmployeeID: 1,
                        someParam: 'someValue',
                        token: 'token-value'
                    }
                },
                map: function(raw) {
                    // sample data mapping
                    var dataSet = raw;
                    if (typeof raw.data !== 'undefined') {
                         dataSet = raw.data;
                    }
                    return dataSet;
                },
            }
        },
        pageSize: 10,
        saveState: {
            cookie: true,
            webstorage: true
        },

        serverPaging: false,
        serverFiltering: false,
        serverSorting: false
    },

    layout: {
        theme: 'default',
        class: 'm-datatable--brand',
        scroll: false,
        height: null,
        footer: false,
        header: true,

        smoothScroll: {
            scrollbarShown: true
        },

        spinner: {
            overlayColor: '#000000',
            opacity: 0,
            type: 'loader',
            state: 'brand',
            message: true
        },

        icons: {
            sort: {asc: 'la la-arrow-up', desc: 'la la-arrow-down'},
            pagination: {
                next: 'la la-angle-right',
                prev: 'la la-angle-left',
                first: 'la la-angle-double-left',
                last: 'la la-angle-double-right',
                more: 'la la-ellipsis-h'
            },
            rowDetail: {expand: 'fa fa-caret-down', collapse: 'fa fa-caret-right'}
        }
    },

    sortable: false,

    pagination: true,

    search: {
      // search delay in milliseconds
      delay: 400,
      // input text for search
      input: $('#generalSearch'),
    },

    detail: {
        title: 'Load sub table',
        content: function (e) {
            // e.data
            // e.detailCell
        }
    },

    // columns definition
    columns: [{
        field: "RecordID",
        title: "#",
        locked: {left: 'xl'},
        sortable: false,
        width: 40,
        selector: {class: 'm-checkbox--solid m-checkbox--brand'}
    }, {
        field: "OrderID",
        title: "Order ID",
        sortable: 'asc',
        filterable: false,
        width: 150,
        responsive: {visible: 'lg'},
        locked: {left: 'xl'},
        template: '{{OrderID}} - {{ShipCountry}}'
    }, {
        field: "ShipCountry",
        title: "Ship Country",
        width: 150,
        overflow: 'visible',
        template: function (row) {
            return row.ShipCountry + ' - ' + row.ShipCity;
        }
    }, {
        field: "ShipCountry",
        title: "Ship Country",
        width: 150,
        overflow: 'visible',
        sortCallback: function (data, sort, column) {
            var field = column['field'];
            return $(data).sort(function (a, b) {
                var aField = a[field];
                var bField = b[field];
                if (sort === 'asc') {
                    return parseFloat(aField) > parseFloat(bField)
                        ? 1 : parseFloat(aField) < parseFloat(bField)
                            ? -1
                            : 0;
                } else {
                    return parseFloat(aField) < parseFloat(bField)
                        ? 1 : parseFloat(aField) > parseFloat(bField)
                            ? -1
                            : 0;
                }
            });
        }
    }],

    toolbar: {
        layout: ['pagination', 'info'],

        placement: ['bottom'],  //'top', 'bottom'

        items: {
            pagination: {
                type: 'default',

                pages: {
                    desktop: {
                        layout: 'default',
                        pagesNumber: 6
                    },
                    tablet: {
                        layout: 'default',
                        pagesNumber: 3
                    },
                    mobile: {
                        layout: 'compact'
                    }
                },

                navigation: {
                    prev: true,
                    next: true,
                    first: true,
                    last: true
                },

                pageSizeSelect: [10, 20, 30, 50, 100]
            },

            info: true
        }
    },

    translate: {
        records: {
            processing: 'Please wait...',
            noRecords: 'No records found'
        },
        toolbar: {
            pagination: {
                items: {
                    default: {
                        first: 'First',
                        prev: 'Previous',
                        next: 'Next',
                        last: 'Last',
                        more: 'More pages',
                        input: 'Page number',
                        select: 'Select page size'
                    },
                    info: 'Displaying {{start}} - {{end}} of {{total}} records'
                }
            }
        }
    }
}
Field Type Description
data.type string Required. Set type to remote for remote data get public URL. local is for local data predefined in variable.
Sample
type: 'remote'
data.source.read.url string If data.type is defined as remote. Type of remote datasource can be static or dynamic. For the static datasource you can define static JSON file URL. And for dynamic datasource with pagination, sorting and filtering need to be defined as above sample. url is required, and params object is optional.
Sample
url: 'inc/api/datatables/demos/orders.php'
data.source.read.method string Request method for ajax request. The value can be GET or POST. The default value is POST.
Sample
method: 'GET'
data.source.read.headers object Headers parameter object will be sent along in the datatable API request headers.
Sample
headers: {
    'x-my-custom-header': 'some value',
    'x-test-header': 'the value'
},
data.source.read.params object Your own API may requires some parameter to call for getting the data. E.g. token, search keywords, IDs, etc. This query parameters object will be sent along in the datatable API request.
Sample
params: {
  query: {
    generalSearch: '',
    EmployeeID: 1
    token: 'tokenvalue'
  }
}
data.source.read.map function Custom mapping the received data into datatable grid.
Sample
map: function(raw) {
  // sample data mapping
  var dataSet = raw;
  if (typeof raw.data !== 'undefined') {
	dataSet = raw.data;
  }
  return dataSet;
}
data.pageSize number Define page size of data for each request. Default value is 10.
Sample
pageSize: 10
data.saveState.cookie boolean Set true or false to enable/disable datatable state to save in cookie. Default value is true.
Sample
cookie: true
data.saveState.webstorage boolean Set true or false to enable/disable datatable state to save in webstorage. Default value is true.
Sample
webstorage: true
data.serverPaging boolean Enable/disable pagination in server side. Only applied for the remote data.type.
Sample
serverPaging: true
data.serverFiltering boolean Enable/disable filtering in server side. Only applied for the remote data.type.
Sample
serverFiltering: true
data.serverSorting boolean Enable/disable sorting in server side. Only applied for the remote data.type.
Sample
serverSorting: true
Layout
layout.theme string Define which class of theme to apply into datatable.
Sample
theme: 'default'
layout.class string Custom class to add into datatable.
Sample
class: 'm-datatable--brand'
layout.scroll boolean Enable/disable scroll.
Sample
scroll: true
layout.height string Define fixed height for the datatable.
Sample
height: 300
layout.footer boolean Enable/disable footer.
Sample
footer: false
layout.header boolean Enable/disable header.
Sample
header: false
layout.smoothScroll
.scrollbarShown
boolean Enable/disable smooth scroll with the scroll bar.
Sample
smoothScroll: {
  scrollbarShown: true
}
layout.spinner.overlayColor string Spinner background overlay color.
Sample
overlayColor: '#000000'
layout.spinner.opacity number Spinner background opacity.
Sample
opacity: 0
layout.spinner.type string Spinner type.
Sample
type: 'loader'
layout.spinner.state string Spinner state style. Default to brand.
Sample
state: 'brand'
layout.spinner.message boolean
string
Enable/disable loading message during spinner is active. Set boolean or text string message.
Sample
message: true
message: 'Loading..'
layout.icons.sort object Options config for the icons class for sorting icon ascending and descending.
Sample
sort: {
  asc: 'la la-arrow-up',
  desc: 'la la-arrow-down'
}
layout.icons.pagination object Icons for pagination buttons.
Sample
pagination: {
  next: 'la la-angle-right',
  prev: 'la la-angle-left',
  first: 'la la-angle-double-left',
  last: 'la la-angle-double-right',
  more: 'la la-ellipsis-h'
}
layout.icons.rowDetail object rowDetail is for expand and collapse icon for table with child table.
Sample
rowDetail: {
  expand: 'fa fa-caret-down',
  collapse: 'fa fa-caret-right'
}
Others
sortable boolean Enable/disable columns sortable globally.
Sample
sortable: true
pagination boolean Enable/disable pagination globally.
Sample
pagination: true
search.input jQuery Pass the jQuery element of input. The datatable will add onKeyup event to the input to trigger the internal search filter the data that already in the table.
Sample

    search: {
       input: $('#generalSearch'),
    },
search.delay number Control the speed of search and data load request to reduce the search call frequency automatically. Default value is 400ms. Set the number of milliseconds.
Sample

    search: {
      // search delay in milliseconds
      delay: 400,
    },
Toolbar
toolbar.layout array Set the order of pagination and info by array index.
Sample
layout: ['pagination', 'info']
toolbar.placement array An array list of placement for pagination buttons. Can be multiple values. Set the pagination placement to bottom or top.
Sample
placement: ['bottom']
toolbar.items
.pagination.type
string Pagination type.
Sample
type: 'default'
toolbar.items
.pagination.pages.desktop
object Pagination pages responsive config for desktop. An object that contains layout and pagesNumber.
Default value for layout is default. Define pagesNumber to specify how many number of page for each responsive breakpoint.
Sample
desktop: {
  layout: 'default',
  pagesNumber: 6
}
toolbar.items
.pagination.pages.tablet
object Pagination pages responsive config for tablet. An object that contains layout and pagesNumber.
Default value for layout is default. Define pagesNumber to specify how many number of page for each responsive breakpoint.
Sample
tablet: {
  layout: 'default',
  pagesNumber: 3
}
toolbar.items
.pagination.pages.mobile
object Pagination pages responsive config for mobile. Default value for layout is compact. Layout compact type do not have to specify pagesNumber.
Sample
mobile: {
  layout: 'compact'
}
toolbar.items
.pagination.navigation
object Enable/disable pagination buttons for prev, next, first, last.
Sample
navigation: {
  prev: true,
  next: true,
  first: true,
  last: true
},
toolbar.items
.pagination.pageSizeSelect
array Array of Number for select size dropdown to select pagination size. -1 is used for "All" option.
Sample
pageSizeSelect: [10, 20, 30, 50, 100]
toolbar.items.info boolean Enable/disable display of records and pagination info.
Sample
info: true
Translate
translate.records.processing string Translation for records loading during spinner is active.
Sample
processing: 'Please wait...'
translate.records.noRecords string Translation for no records message.
Sample
noRecords: 'No records found'
translate.toolbar
.pagination.items.default
object Translation for pagination. Contains key for first, prev, next, last, more, input, select.
Sample
default: {
  first: 'First',
  prev: 'Previous',
  next: 'Next',
  last: 'Last',
  more: 'More pages',
  input: 'Page number',
  select: 'Select page size'
}
translate.toolbar
.pagination.items.info
string Translation for info template.
Sample
info: 'Displaying {{start}} - {{end}} of {{total}} records'
Detail
detail.title string Sub table title.
Sample
title: 'Load sub table'
detail.content object A callback function of Datatable instance as a sub table of each record. The callback has one parameter which you can access the row data event.data and child table element in event.detailCell.
Sample
content: function (event) {
}
Columns
columns array An array of columns with options object for each column. First column should be define as a unique key for each records.
columns[ColName].field string Required. The field name of column.
Sample
field: 'ColumnName'
columns[ColName].title string Required. The title name and will be displayed as header or footer.
Sample
title: 'Column Name'
columns[ColName].sortable boolean Enable/disable sort feature for the column.
Sample
sortable: false
columns[ColName].width number The width size of cells under this column.
Sample
width: 40
columns[ColName].textAlign string The alignment of cells text under this column.
Sample
textAlign: 'center'
columns[ColName].template function
string
A callback function support for column rendering and recieve a parameter object of current row's value. Can be also a string with placeholder and define with field name {{field}}.
Sample
template: function (row) {
  return '' + row.OrderID + '';
}
template: '{{OrderID}}'
columns[ColName].sortCallback function
string
A callback function support for custom sorting.
Input Parameters
Name Type Description
data object JSON string array of original data for sorting
sort string Sorting type of asc for ascending or desc for descending.
column object Column config object
Sample
sortCallback: function (data, sort, column) {
    var field = column['field'];
    return $(data).sort(function (a, b) {
        var aField = a[field];
        var bField = b[field];
        if (sort === 'asc') {
            return parseFloat(aField) > parseFloat(bField)
                ? 1 : parseFloat(aField) < parseFloat(bField)
                    ? -1
                    : 0;
        } else {
            return parseFloat(aField) < parseFloat(bField)
                ? 1 : parseFloat(aField) > parseFloat(bField)
                    ? -1
                    : 0;
        }
    });
}
columns[ColName].overflow string CSS overflow value.
Sample
overflow: 'visible'
columns[ColName].responsive object Set visible or invisible for each responsive breakpoint.
Sample
responsive: {
  visible: 'md',
  hidden: 'lg'
}
columns[ColName].selector object Enable column as selector (checkbox only with no text) and provide custom class name.
Sample
selector: {
  class: 'm-checkbox--solid'
}
columns[ColName].locked object Set the column to which side to be locked or static. Set object with which side left/right as key and the value is which responsive breakpoint to lock.
Sample
locked: {left: 'xl'}

Backend API

All parameters that send through datatable query to your custom Backend API, will be wrapped in multidimentional array named datatable

Language Example
PHP $_REQUEST["datatable"]
ASP.NET request.querystring("datatable")
Java HttpServletRequest request.getQueryString()

API Methods

Method Description
datatable.load() Load datatable datasource. Same function with datatable.reload().
datatable.reload() Reload datatable datasource and rerender the table.
datatable.destroy() Destroy the datatable instance and revert the HTML.
datatable.getRecord(id) Select record in the datatable by ID. ID is refers to the value of first column. Use with chaining methods datatable.getColumn(columnName)
Input Parameters
Name Type Description
id string ID is refers to the first columns value of each rows.
datatable.getColumn(columnName) Get column by column name. Use with chaining methods datatable.getValue() to get a cell value.
Input Parameters
Name Type Description
columnName string Column name as defined in datatable options init columns[ColName].field
datatable.getValue() Get selected records values as string.
Returns
string
Sample
datatable.getRecord(1).getColumn('columnName').getValue();
datatable.sort(columnName, sort) Sort datatable by columnName field. Sort by ascending or descending.
Input Parameters
Name Type Description
columnName string Column name as defined in datatable options init columns[ColName].field
sort string Sort type to ascending or descending, can accept value asc and desc.
datatable.setActive(cell) Set datatable selector checkbox to active state.
Input Parameters
Name Type Description
cell string Cell is a string of selector checkbox value.
datatable.setInactive(cell) Set datatable selector checkbox to inactive state.
Input Parameters
Name Type Description
cell string Cell is a string of checkbox value.
datatable.setActiveAll(active) Set datatable selector checkbox active/inactive for all records.
Input Parameters
Name Type Description
active boolean Set records selector active or inactive state by pass the boolean true or false.
datatable.setSelectedRecords() Set selected selector checkbox.
datatable.getSelectedRecords() Get selected records.
Returns
jQuery element of selected record rows.
datatable.search(value, column) Execute search method to filter datatable records.
Input Parameters
Name Type Description
value string Value to filter.
column string Column field name which defined in options config.
datatable.setDataSourceParam(param, value) Modify the datasource parameters and save it in datatable state. Must be call datatable.load() to load new modified datasource and rerender table.
Input Parameters
Name Type Description
param string Param key value. Can accept pagination, sort, query.
value string The string value of param.
datatable.getDataSourceParam(param) Get current datasource parameters by param type of pagination, sort, or query.
Input Parameters
Name Type Description
param string Param key value. Can accept pagination, sort, query.
datatable.getDataSourceQuery() A helper function shortcut to datatable.getDataSourceParam('query'). Get current query datasource parameter.
Returns
{
  pagination: {
    field: "ShipDate",
    page: 1,
    pages: 18,
    perpage: 20,
    sort: "asc",
    total: 350
  },
  query: {
  },
  sort: {
    sort: "asc",
    field: "ShipDate"
  }
}
datatable.getCurrentPage() Get current selected page number
Returns
number
datatable.getPageSize() Get current selected page size number.
Returns
number
datatable.getTotalRows() Get total rows of record.
Returns
number
datatable.hideColumn() Hide column by column's field name.
Input Parameters
Name Type Description
fieldName string Field name of the column defined in initialized options.
datatable.showColumn() Show column by column's field name.
Input Parameters
Name Type Description
fieldName string Field name of the column defined in initialized options.

Events

Method Description
m-datatable--on-init Initialization of table.
Input Parameters
Name Type Description
event object Default event object.
options object Datatable initialized options.
m-datatable--on-destroy On datatable destroyed.
Input Parameters
Name Type Description
event object Default event object.
m-datatable--on-layout-updated Event that will be triggered on layout rendering update and resizing datatable.
Input Parameters
Name Type Description
event object Default event object.
args object Provide table parameters, eg. datatable ID attribute
m-datatable--on-ajax-done After ajax request is completed.
Input Parameters
Name Type Description
event object Default event object.
data object List of all records.
m-datatable--on-ajax-fail Ajax request is failed.
Input Parameters
Name Type Description
event object Default event object.
jqXHR object jQuery XMLHttpRequest from jQuery request, include error details.
m-datatable--on-goto-page Navigate to any page number.
Input Parameters
Name Type Description
event object Default event object.
args object Page details.
m-datatable--on-update-perpage Update page size.
Input Parameters
Name Type Description
event object Default event object.
args object Page details.
m-datatable--on-reloaded Reload datatable.
Input Parameters
Name Type Description
event object Default event object.
m-datatable--on-check On check checkbox selector.
Input Parameters
Name Type Description
event object Default event object.
args object Checked records details.
m-datatable--on-uncheck On uncheck checkbox selector.
Input Parameters
Name Type Description
event object Default event object.
args object Unchecked records details.
m-datatable--on-sort Sorting datatable.
Input Parameters
Name Type Description
event object Default event object.
args object Sorting details. Eg. field and sort type of asc or desc.

Menu Component

The Metronic's Menu components allows to manage both horizontal and vertical multi level menus for both desktop and mobile modes.

The below code shows the basic vertical menu initialization with accordion submenu mode:

var menu = $('#m_menu').mMenu({
  // submenu settings
  submenu: {
  	// breakpoints
    desktop: {
      default: 'accordion', // by default the submenu mode set to accordion
      state: {
        body: 'm-aside-left--minimize', // whenever the page body has this class switch the submenu mode to dropdown
        mode: 'dropdown'
      }
    },
    tablet: 'accordion', // the submenu mode set to accordion for tablet
    mobile: 'accordion' // the submenu mode set to accordion for mobile
  },

  //accordion mode settings
  accordion: {
    autoScroll: true,
    expandAll: false
  }
});

The below code shows the basic vertical menu initialization with hoverable dropdown submenu mode:

var menu = $('#m_menu').mMenu({
  // submenu settings
  submenu: {
  	// breakpoints
    desktop: 'dropdown', // the submenu mode set to dropdown for desktop
    tablet: 'accordion', // the submenu mode set to accordion for tablet
    mobile: 'accordion' // the submenu mode set to accordion for mobile
  },

  //accordion mode settings
  accordion: {
    autoScroll: true,
    expandAll: false
  }
});

The below code shows the basic horizontal menu initialization:

var menu = $('#m_menu').mMenu({
  // submenu modes
  submenu: {
    desktop: 'dropdown',
    tablet: 'accordion',
    mobile: 'accordion'
  },
  // resize menu on window resize
  resize: {
    desktop: function() {
      var headerNavWidth = $('#m_header_nav').width();
      var headerMenuWidth = $('#m_header_menu_container').width();
      var headerTopbarWidth = $('#m_header_topbar').width();
      var spareWidth = 20;

      if ((headerMenuWidth + headerTopbarWidth + spareWidth) > headerNavWidth) {
        return false;
      } else {
        return true;
      }
    }
  }
});

API Methods

Method Description
menu.setActiveItem(item) Sets given menu item(e.g LI tag with m-menu__item class) as active. item is jQuery element object.
menu.getBreadcrumbs(item) Gets breadcumbs path for the give item. item is jQuery element object. Returns array of parents of the given item.

Dropdown Component

Dropdown component used to display flexible dropdown content

The below examples code shows basic dropdown initialization:

var dropdown = $('#m_dropdown').mDropdown();
Method Description
dropdown.show() Shows the dropdown
dropdown.hide() Hides the shown dropdown
dropdown.isShown() Checkes whether the dropdown is shown.
Returns
boolean
dropdown.setContent(content) Replaces the dropdown inner content.
Input Parameters
Name Type Description
content string Content to replace
Returns
boolean
dropdown.on(event, handler) Registers the dropdown event handler.
Input Parameters
Name Type Description
event string Event type of available events:
beforeShow
afterShow
beforeHide
afterHide
handler function Event handler function
Sample
dropdown.on('afterShow', function(dropdown) {
	if (dropdown.isShown() == false) {
  		// do some action
 	}
});

Portlet Component

Portlet component used to display flexible portlet content

The below examples code shows basic portlet initialization:

var portlet = $('#m_portlet').mPortlet();
Method Description
portlet.remove() Remove portlet.
portlet.reload() Reload portlet.
portlet.setContent() Set portlet content.
portlet.collapse() Collapse portlet
portlet.expand() Expand portlet
portlet.fullscreen() Fullscreen portlet
portlet.unFullscreen() Unfullscreen portlet
portlet.getBody() Get portletbody
portlet.getSelf() Get portletbody
portlet.on(event, handler) Add event to portlet with callback
Input Parameters
Name Type Description
event string Event name
handler function Callback handler function
Returns
boolean
portlet.one() Set portlet content

Angular

Overview

Angular is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser.

Files Structure

Angular source code can be found in [metronic_folder]/theme/angular/dist/[demo]/.
Below the list of demo file structure in Angular app.
Path Description
app The final build of Angular
node_modules The node_modules/ directory is only for build tools. The package.json file in the app root defines what libraries will be installed into node_modules/ when you run npm install.
src Main source folder
app Main app folder
_directives Contains directive for HTML modification
_services Services for script lazy loader
auth Authentication module for registration, login, and forgot password.
theme This is where theme partials is located.
app.component.html Main app template
app.component.ts Main app typescript
app.module.ts Main app module. The place where to import and declare required components.
app-routing.module.ts Base routing for the app. More routes can be found in theme folder
helpers.ts Helper functions
assets This folder will contain all the assets needed for app that are not related to Angular code.
environments This folder contains one file for each of destination environments, each exporting simple configuration variables to use in application
index.html The index.html lives at the root of front-end structure. The index.html file will primarily handle loading in all the libraries and Angular elements.
main.ts The main entry point for your app.
polyfills.ts

Angular is built on the latest standards of the web platform. A particular browser may require at least one polyfill to run any Angular application. You may need additional polyfills for specific features.

IE9, IE10 and IE11 requires to enable polyfills. Read more angular.io/guide/browser-support

styles.ts Global styles go here which styles that affect all of your app need to be in a central place.
tsconfig.app.ts TypeScript compiler configuration for the Angular app.
typings.ts TypeScript adds static typing to JavaScript.
.angular-cli.json Angular CLI loads its configuration from .angular-cli.json
package.json A package.json file contains meta data about app or module. Most importantly, it includes the list of dependencies to install from npm when running npm install.
tsconfig.json tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.

Installation

Please build the theme first at Tasks section before start to build the Angular app.

Angular CLI

Angular CLI is a command line interface for the latest Angular. Please install it before start with the Angular app.

npm install -g @angular/cli@latest

If you have Angular CLI installed previously, please update it to the latest Angular CLI. Remove the older version and re-install it.

npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

Angular for production

Run this command line in the Angular demo directory. This build process will use method of ahead-of-time (AOT) compilation. The ahead-of-time (AOT) compiler can catch template errors early and improve performance by compiling at build time.
The compiled Angular app will be in the folder [metronic_folder]/theme/angular/dist/[demo]/dist/.

ng build --prod

With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.

ng build --prod --op=app

--op=app to specify which folder to output. If not set, dist folder will be the default.
For demo, please run build with --op=app for the Angular demo links in the documentation to work.

If you're serving the app out of a subfolder, edit a version of index.html to set the base href appropriately. For example, if the URL to index.html is www.mysite.com/my/app/index.html, set the base href to:

<base href="/my/app/">

You also can set the base href right in the ng build command

ng build --prod --base-href="/my/app/"

Ahead-of-time (AOT) vs just-in-time (JIT)

There is actually only one Angular compiler. The difference between AOT and JIT is a matter of timing and tooling. With AOT, the compiler runs once at build time using one set of libraries; with JIT it runs every time for every user at runtime using a different set of libraries. To use JIT build, run this command line to build.

ng build --prod --aot=false

Possible issues with Angular build

AOT build process can be failed due to JavaScript heap out of memory error. This is a known issue of Angular-cli. For the the temporary solution of this issue, you can use this workaround to increase allowed memory for node process.

For Windows users:

node --max_old_space_size=8192 "node_modules\@angular\cli\bin\ng" build --prod

For Linux and Mac users:

node --max_old_space_size=8192 ./node_modules/.bin/ng build --prod

Polyfills

Angular is built on the latest standards of the web platform. Targeting such a wide range of browsers is challenging because they do not support all features of modern browsers. A particular browser may require at least one polyfill to run any Angular application. You may need additional polyfills for specific features.

To support Angular in IE, open this file [metronic_folder]/theme/angular/dist/[demo]/src/polyfills.ts. Uncomment all the imports under Browser Polyfills list and classlist.js

Read more about browser support here https://angular.io/guide/browser-support

Tools

Build Angular project

After generating Angular version layout from the builder, the generated Angular source code can be found in [metronic_folder]/theme/angular/dist/. Each demo will generate different Angular app.

To setup Angular app, go to Angular app root and install Angular dependencies by this command line.

npm install

Start node development server for Angular by this command line, then you can access it at http://localhost:4200 via browser.

npm start

This is optional tool for formatting Angular source code which is Typescript. When you run npm install, formatting will be done automatically. But, everytime you generate a new Angular app, you will need to run this manually to reformat the source code.

npm run tsformat

Sample Codes

How to use Metronic mApp and mUtil

mApp and mUtil are the Metronic base utilize class that privide helper functions. The source files are located at [metronic_folder]/theme/[version_package]/src/js/framework/base/

Declare mApp or mUtil at the top of the component.

declare let mApp: any;
declare let mUtil: any;

Sample code

mApp.blockPage();
mApp.unblockPage();

Blank Project

Basic files/folders for Angular?

Take one of the Angular demo. Eg. [metronic_folder]/theme/angular/dist/default/.
Remove all files and folders under /src/app/theme/pages/. This is where the pages is located.
Please note that all files under /src/app/theme/layouts/ is required for the theme layout, like header, footer, menu templates, etc.
Remove demo pages routes from routing file /src/app/theme/theme-routing.module.ts.

Online Layout Builder

You can use the Metronic online layout builder for the latest theme version using following URL:
http://keenthemes.com/metronic/preview/?page=builder&demo=default

You can switch to a specific demo by spesifing the demo ID in the URL:
http://keenthemes.com/metronic/preview/?page=builder&demo=[demo_id]

API Reference

Sample API in theme demos are included for user references. [metronic_folder]/docs/api_reference. These server side scrips and json files are used by datatable, dropzone, jstree, typeahead and other plugin demos.

The sample API is built using PHP code. Please check the section Config and Tasks above for updating the API URL in the source to our demo site.

.NET Integration

ASP.NET Zero - Metronic .NET Integration

ASP.NET Zero is a starting point for new web projects based on our Metronic Theme UI. For more info please visit the product website.

Get it as your base application and directly start to develop your business code with:

  • SOLID architecture
  • Material design UI
  • Cross-cutting concerns implemented
  • Built with best practices
  • Well documented
  • Full source code included

For more info please check Full List Of Features.

More Resources

Keenthemes Freebies

Our collection of bootstrap themes and templates are totally free and you may use them for your private or commercial projects at absolutely no cost.


Hire Us

If you need theme customization or custom web development, please provide your project details using this form and one of our well established development partners will get back to you with a free quote.


JANGO - The Powerful HTML5 Component Based Bootstrap Frontend Theme

JANGO is a multi-purpose Bootstrap HTML5 component based theme. JANGO is incredibly robust and flexible that will easily be able to support every site development such as corporate, portfolio, blogs, product showcases, landing / one-page sites and much more to power any starting point for new web projects based on our Metronic Theme UI. For more info please visit the product page.


JANGO Drupal - The Ultimate Drupal 7/8 Theme With Layout Builder

JANGO Drupal is an ever expanding, fully responsive and multi-purpose Drupal 7/8 theme powered by Visual Shortcodes and Layout Builder. For more info please visit the product page.

References

Term Link
Node.js https://nodejs.org/en/
NPM https://www.npmjs.com/
Gulp https://gulpjs.com/
Bower https://bower.io/
Angular https://angular.io/
Ahead-of-Time (AOT) https://angular.io/guide/aot-compiler
jQuery https://jquery.com/
Bootstrap http://getbootstrap.com/
Popper.js https://popper.js.org/
JavaScript Cookie https://github.com/js-cookie/js-cookie
JQuery Smooth Scroll https://www.npmjs.com/package/jquery-smooth-scroll
jQuery Form Plugin http://malsup.com/jquery/form/
jQuery custom content scroller http://manos.malihu.gr/jquery-custom-content-scroller/
jQuery BlockUI Plugin http://malsup.com/jquery/block/
Prism http://prismjs.com/
Bootstrap Datepicker https://bootstrap-datepicker.readthedocs.io/en/latest/
DateTime Picker http://www.malot.fr/bootstrap-datetimepicker/
Moment.js https://momentjs.com/
Bootstrap Timepicker https://github.com/jdewit/bootstrap-timepicker
Date Range Picker http://www.daterangepicker.com/
Bootstrap TouchSpin https://www.virtuosoft.eu/code/bootstrap-touchspin/
Bootstrap Maxlength http://mimo84.github.io/bootstrap-maxlength/
Bootstrap Switch http://bootstrapswitch.com/
Bootstrap Selectsplitter https://github.com/xavierfaucon/bootstrap-selectsplitter
Bootstrap Select http://silviomoreto.github.io/bootstrap-select/
Select2 https://select2.github.io/
typeahead.js https://twitter.github.io/typeahead.js/
jQuery Input Mask plugin http://robinherbots.github.io/Inputmask/
Autosize http://www.jacklmoore.com/autosize
clipboard.js https://clipboardjs.com/
Ion.RangeSlider http://ionden.com/a/plugins/ion.rangeSlider/en.html
DropzoneJS http://www.dropzonejs.com/
Summernote http://summernote.org
Bootstrap Markdown http://www.codingdrama.com/bootstrap-markdown/
jQuery Validation Plugin https://jqueryvalidation.org/
Bootstrap Notify http://bootstrap-notify.remabledesigns.com/
Animate.css https://daneden.github.io/animate.css/
Toastr https://github.com/CodeSeven/toastr
jsTree http://jstree.com/
morris.js http://morrisjs.github.io/morris.js/
Chartist.js https://gionkunz.github.io/chartist-js/
Chart.js http://www.chartjs.org
Bootstrap Session Timeout https://github.com/orangehill/bootstrap-session-timeout
Jquery Idletimer https://github.com/thorst/jquery-idletimer
Counter-Up http://bfintal.github.io/Counter-Up/demo/demo.html
Waypoints http://imakewebthings.com/waypoints/
Socicon http://www.socicon.com/
Font Awesome http://fontawesome.io/
Flaticon https://www.flaticon.com/
Gmaps.js http://hpneo.github.io/gmaps/
jQuery Vector Maps https://jqvmap.com/
Flot http://www.flotcharts.org/

The Ultimate Bootstrap Admin Theme Trusted By Over 50,000 Developers World Wide