MetroAdmin - Bootstrap Admin Dashboard HTML Template

MetroAdmin documentation version 1.4


Introduction


First of all, Thank you so much for purchasing this template and for being my loyal customer. You are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here.

Requirements

You will need the following sofwares to customize this template.

  1. Code Editing Software (eg: VS Code, Sublime Text or Notepad)
  2. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
  3. FTP Tool to upload files to Server (eg: FileZilla)

Be careful while editing the template. If not edited properly, the design layout may break completely.
No support is provided for faulty customization.

Installation #back to top


Overview

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

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/

Update your 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 --global npm@latest
                        

Install all dependencies

If you want to update or develop this theme, you need to install all dependencies by running:

                            npm install
                        

Update #back to top

22 August 2020

Add Travel Dashboard


11 August 2020

Add Education Dashboard


4 August 2020

Add Medical Dashboard


Overview

You may want to update the plugins used in this template

Install all dependencies

If you haven't yet run the

npm install
command, please run this command on this project root directory to install all dependencies

Install Gulp CLI

Install gulp-cli to make Gulp perform cli actions. To install gulp-cli, run this command

                            npm install gulp-cli --global 
                        

Copy plugins

You have to copy all updated plugins to your project folder from node_modules. To copy all plugins together, run this comment:

                            gulp plugin
                        

Generate Common.js

In order to simplify common scripts, we accumuluted the common scripts together. So you need to run a simple command to generate common.js. common.js contains jquery.min.js, bootstrap.bundle.min.js, metisMenu.min.js, jquery.slimscroll.min.js, bootstrap-select.min.js

                            gulp common_js
                        

Now your plugins and scripts are updated. Enjoy!

Build SASS #back to top

Overview

You may want to build your SASS in order to change any layout or update. If you haven't run

npm install
yet, please run it first. Then follow next step.

Build/Compile/Watch

Run following command to watch and build SASS

                            npm run watch
                        

Path change

You may want to change your folder destination of outputed CSS or input SASS. In order to do that, just open the package.json file and update the script command's path as yours.

                            "watch": "node-sass --watch src/main/scss/main.scss src/main/css/style.css --source-map src/main/css/style.css.map"
                        

Typography #back to top

Overview

This template uses unit rem in all context as user can change the browser default and have user experience much better.

Count in rem

This template assumes 1rem = 16px, and if you want to change this value, you may change this by changing html font size in CSS

Layout#back to top

In the deznav.js file, you can change your theme layout as you want to. Initialize the plugin

new dezSettings()
and pass the options into this function.

Background

Theme background can be toggled between light and dark

For light background
                                version: "light" //theme background will be "light"
                            
For dark background
                                version: "dark" //theme background will be "dark"
                            

Theme layout

Theme layout can be toggled between vertical and horizontal

For vertical layout:
                                layout: "vertical"
                            
For horizontal layout:
                                layout: "horizontal"
                            

Sidebar Type

This theme has four types of sidebar, Full, Mini, Compact, Overlay

For full sidebar:
                                sidebarStyle: "full"
                            
For compact sidebar:
                                sidebarStyle: "compact"
                            
For mini sidebar:
                                sidebarStyle: "mini"
                            
For overlay sidebar:
                                sidebarStyle: "overlay"
                            

Sidebar position

Sidebar position can be toggled between two options. static and fixed

For static sidebar
                                sidebarPosition: 'static'
                            
For fixed sidebar
                                sidebarPosition: 'fixed'
                            

Header position

Header position can be toggled between two options. static and fixed

For static header
                                headerPosition: 'static'
                            
For fixed header
                                headerPosition: 'fixed'
                            

Box container

Theme box container can be toggled between three options. wide, boxed, wide-boxed

For wide container
                                containerLayout: 'wide'
                            
For boxed container
                                containerLayout: 'boxed'
                            
For wide-boxed container
                                containerLayout: 'wide-boxed'
                            

Direction

This template supports two directions, LTR and RTL.

For ltr support
                                direction: 'ltr'
                            
For rtl support
                                direction: 'rtl'
                            

Nav Header Color

Nav header color can be toggled among 10 diffrent colors.

Change nav header color:
                                navheaderBg: 'color_1' //color value can be extended to 'color_2', 'color_3', 'color_4', 'color_5', 'color_6', 'color_7', 'color_8', 'color_9', 'color_10'
                            

Header Color

Header color can be toggled among 10 diffrent colors.

Change header color:
                                headerBg: 'color_1' //color value can be extended to 'color_2', 'color_3', 'color_4', 'color_5', 'color_6', 'color_7', 'color_8', 'color_9', 'color_10'
                            

Sidebar Color

Sidebar color can be toggled among 10 diffrent colors.

Change Sidebar color:
                                sidebarBg: 'color_1' //color value can be extended to 'color_2', 'color_3', 'color_4', 'color_5', 'color_6', 'color_7', 'color_8', 'color_9', 'color_10'
                            

Folder structure #back to top

SASS/JS structure #back to top



Plugins#back to top


BlockUI

BlockUI is a plugin that blocks webpage's regular activity for certain time. It can be used very easily!

Required files

CSS

                                No plugin CSS required
                            

JS

                                <script src="../../assets/plugins/block-ui/jquery.blockUI.js"></script>
                            
Initialization

HTML

                                It applies on whole HTML body
                            

JS

                                $.blockUI({ message: '

Just a moment...

' })

Bootstrap Notify

Bootstrap Notify is a plugin that helps you to provide any instant message to user at any time. It's very easy to initialize.

Required files

CSS

                                No plugin CSS required
                            

JS

                                <script src="../../assets/plugins/bootstrap4-notify/bootstrap-notify.min.js"></script>
                            
Initialization

HTML

                                I dosen't need any mark-up as it works on whole HTML document
                            

JS

                                $.notify({
                                    // options
                                    message: 'Congratulations! You\'ve succcessfully completed the task.' 
                                },{
                                    // settings
                                    type: 'primary', 
                                    offset: 20,
                                    spacing: 5,
                                    z_index: 1031,
                                    delay: 5000,
                                    timer: 1000,
                                    placement: {
                                        from: 'top', 
                                        align: 'left'
                                    },
                                    animate: {
                                        enter: 'animated fadeInDown',
                                        exit: 'animated fadeOutUp'
                                    }
                                });
                            

Clipboard.JS

Clipboard.js is a JavaScript plugin that let you to copy/cut something from webpage to your clipboard

Required files

CSS

                                No plugin css file required
                            

JS

                                <script src="../../assets/plugins/clipboard/clipboard.min.js"></script>
                            
Initialization

HTML

                                
                                

JS

                                new ClipboardJS('.clipboard-btn');
                            

Date

Required files

CSS

                                <link href="../../assets/plugins/pg-calendar/css/pignose.calendar.min.css" rel="stylesheet">
                            

JS

                                <script src="../../assets/plugins/pg-calendar/js/pignose.calendar.min.js"></script>
                            
Initialization

HTML

                                

JS

                                $(".year-calendar").pignoseCalendar({theme:"blue"});
                            

Datamap

Required files

CSS

                                No plugin stylesheet required
                            

JS

                                <script src="../../assets/plugins/d3v3/index.js"></script>
                                <script src="../../assets/plugins/topojson/topojson.min.js"></script>
                                <script src="../../assets/plugins/datamaps/datamaps.world.min.js"></script>
                            
Initialization

HTML

                                

JS

                                var i=new Datamap( {
                                    scope: "world", element: document.getElementById("world-datamap"), responsive: !0, geographyConfig: {
                                        popupOnHover: !1, highlightOnHover: !1, borderColor: "rgba(0,123,255,0.5)", borderWidth: 1, highlightBorderWidth: 3, highlightFillColor: "rgba(0,123,255,0.5)", highlightBorderColor: "rgba(255,255,255,0.1)", borderWidth: 1
                                    }
                                    , bubblesConfig: {
                                        popupTemplate: function (e, i) {
                                            return '
' + i.country + '' + i.sold + "
" } , borderWidth: 1, highlightBorderWidth: 3, highlightFillColor: "rgba(0,123,255,0.5)", highlightBorderColor: "rgba(255,255,255,0.1)", fillOpacity: .75 } , fills: { Visited: "#f5f5f5", neato: "rgba(0,123,255,1)", white: "rgba(0,123,255,1)", defaultFill: "transparent" } }); i.bubbles([ { centered: "USA", fillKey: "white", radius: 5, sold: "$500", country: "United States" } , { centered: "SAU", fillKey: "white", radius: 5, sold: "$900", country: "Saudia Arabia" } , { centered: "RUS", fillKey: "white", radius: 5, sold: "$250", country: "Russia" } , { centered: "CAN", fillKey: "white", radius: 5, sold: "$1000", country: "Canada" } , { centered: "IND", fillKey: "white", radius: 5, sold: "$50", country: "India" } , { centered: "AUS", fillKey: "white", radius: 5, sold: "$700", country: "Australia" } , { centered: "BGD", fillKey: "white", radius: 5, sold: "$1500", country: "Bangladesh" } ]), window.addEventListener("resize", function (e) { i.resize() });

Vectormap

Required files

CSS


                            

Bootstrap select

Required files

CSS

                                <link rel="stylesheet" href="../../assets/plugins/bootstrap-select/dist/css/bootstrap-select.min.css">
                            

JS

                                <script src="./src/assets/plugins/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
                            
Initialization

HTML

                                
                            

JS

                                $('.selectpicker').selectpicker();
                            

Nestedable

Required files

CSS

                                <link href="../../assets/plugins/nestable2/css/jquery.nestable.min.css" rel="stylesheet">
                            

JS

                                <script src="../../assets/plugins/nestable2/js/jquery.nestable.min.js"></script>
                            
Initialization

HTML

                                
  1. Item 1
  2. Item 2
    1. Item 3
    2. Item 4
    3. Item 5
      1. Item 6
      2. Item 7
      3. Item 8
    4. Item 9
    5. Item 10

JS

                                var e = function (e) { 
                                    var t = e.length ? e : $(e.target), a = t.data("output"); 
                                    window.JSON ? a.val(window.JSON.stringify(t.nestable("serialize"))) : a.val("JSON browser support required for this demo.") 
                                };
                                $("#nestable").nestable({ group: 1 }).on("change", e)
                            

NoUI slider

Required files

CSS

                                <link rel="stylesheet" href="../../assets/plugins/nouislider/nouislider.min.css">
                            

JS

                                <script src="../../assets/plugins/nouislider/nouislider.min.js"></script>
                                <script src="../../assets/plugins/wnumb/wNumb.js"></script>
                            
Initialization

HTML

                                

JS

                                let basicSlide = document.getElementById('basic-slider');
                                noUiSlider.create(basicSlide, {
                                    start: [20, 80],
                                    connect: true,
                                    range: {
                                        'min': 0,
                                        'max': 100
                                    }
                                });
                            

Sweet alert

Required files

CSS

                                <link href="../../assets/plugins/sweetalert2/dist/sweetalert2.min.css" rel="stylesheet">
                            

JS

                                <script src="../../assets/plugins/sweetalert2/dist/sweetalert2.min.js"></script>
                            
Initialization

HTML

                                No markup required as it works on html body
                            

JS

                                sweetAlert("Oops...", "Something went wrong !!", "error")
                            

Ticker

Required files

CSS

                                No plugin stylesheet required
                            

JS

                                <script src="../../assets/plugins/webticker/jquery.webticker.min.js"></script>
                            
Initialization

HTML

                                
  • BTC $11.039232 - 1.81%
  • ETH $1.2792 - 1.81%
  • GAME $11.039232 - 1.81%
  • LBC $0.588418 - 1.81%
  • NEO $161.511 - 1.81%
  • STE $0.551955 - 1.81%
  • LIT $177.80 - 1.81%
  • NOTE $13.399 - 1.81%
  • MINT $0.880694 - 1.81%
  • IOT $2.555 - 1.81%
  • DAS $769.22 - 1.81%

JS

                                if ($('#webticker-dark-icons').length) {
        
                                    $("#webticker-dark-icons").webTicker({
                                        height: 'auto',
                                        duplicate: true,
                                        startEmpty: false,
                                        rssfrequency: 5
                                    });
                                }
                            

Toastr

Required files

CSS

                                <link href="../../assets/plugins/toastr/css/toastr.min.css" rel="stylesheet">
                            

JS

                                <script src="../../assets/plugins/toastr/js/toastr.min.js"></script>
                            
Initialization

HTML

                                
                            

JS

                                toastr.success("This Is Success Message", "Top Right", { 
                                    timeOut: 5e3, 
                                    closeButton: !0, 
                                    debug: !1, 
                                    newestOnTop: !0, 
                                    progressBar: !0, 
                                    positionClass: "toast-top-right", 
                                    preventDuplicates: !0, 
                                    onclick: null, 
                                    showDuration: "300", 
                                    hideDuration: "1000", 
                                    extendedTimeOut: "1000", 
                                    showEasing: "swing", 
                                    hideEasing: "linear", 
                                    showMethod: "fadeIn", 
                                    hideMethod: "fadeOut", 
                                    tapToDismiss: !1 
                                });
                            

Page structure #back to top

Head

                            
                                
                                
                                
                                MetroAdmin - Bootstrap Admin Dashboard HTML Template
                                
                                <link rel="icon" type="image/png" sizes="16x16" href="../../assets/images/favicon.png">
                                
                                <link href="../css/style.css" rel="stylesheet">
                            
                        

Body


Preloader
                            
Nav header
                            
                        
Header
                            
                        
Menu
                            
Content body
                            

Hello, Welcome here

Footer
                            
                        
Scripts
                            <script src="../../assets/plugins/common/common.min.js"></script>
                            <script src="../js/custom.min.js"></script>
                            <script src="../js/settings.js"></script>
                            <script src="../js/deznav.js"></script>
                            <script src="../js/styleSwitcher.js"></script>
                        

Fonts #back to top

In this template we used "Segoe UI" font which is provided by Bootstrap default. That's why we didn't have to import any font anymore. But font can be added and changed by following ways.

Import font

Import the font into font.scss

                            //import your font like this
                            @import url('Your font URL');
                        
Apply font

Now change the template font-family in the _variable.scss file

                            //change the font family name
                            $pf:  "Roboto";
                        

Following icon fonts used in this template

Icon Name Example URL
Font Awesome <i class="fa fa-address-book"></i> https://fontawesome.com/v4.7.0/icons/
Simple line icons <i class="icon-user icons"></i> https://github.com/thesabbir/simple-line-icons
Weather icons <i class="wi wi-night-sleet"></i> https://erikflowers.github.io/weather-icons/
Crypto icons <i class="cc BTC"></i> https://github.com/AllienWorks/cryptocoins
Linea icons <i class="cc BTC"></i> http://www.linea.io/
Ionicons <i class="icon ion-md-heart"></i> https://ionicons.com/
Themify Icons <i class="ti-arrow-right"></i> https://themify.me/themify-icons
Material design Icons <i class="mdi mdi-name"></i> https://materialdesignicons.com/cdn/2.0.46/
Pixeden Icons <i class="pe-is-w-blizzard"></i> http://themes-pixeden.com/font-demos/the-icons-set/weather/

Table #back to top


Table basic

Basic table structure

                                
# Heading 1 Heading 2 Heading 3
Data 1 Data 2 Data 3 Data 4

Datatable Official URL

Required files

CSS

                                <link href="../../assets/plugins/datatables/css/jquery.dataTables.min.css" rel="stylesheet">
                            

JS

                                <script src="../../assets/plugins/datatables/js/jquery.dataTables.min.js"></script>
                            
Initialization

HTML

                                

JS

                                $('.example').DataTable();
                            

JSgrid Table Official Link

Required files

CSS

                                <link rel="stylesheet" href="../../assets/plugins/jsgrid/css/jsgrid.min.css">
                                <link rel="stylesheet" href="../../assets/plugins/jsgrid/css/jsgrid-theme.min.css">                                
                            

JS

                                <script src="../../assets/plugins/jsgrid/js/jsgrid.min.js"></script>
                            
Initialization

HTML

                                

JS

                                (function($){
                                    'use strict'
                                
                                    //basic jsgrid table
                                    let clients = [
                                        { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
                                        { "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
                                        { "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
                                        { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
                                        { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
                                        { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
                                        { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
                                        { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
                                        { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
                                        { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
                                        { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
                                        { "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
                                    ];
                                    let countries = [
                                        { Name: "", Id: 0 },
                                        { Name: "United States", Id: 1 },
                                        { Name: "Canada", Id: 2 },
                                        { Name: "United Kingdom", Id: 3 }
                                    ];
                                    $("#jsGrid-basic").jsGrid({
                                        width: "100%",
                                        height: "400px",
                                
                                        inserting: true,
                                        editing: true,
                                        sorting: true,
                                        paging: true,
                                
                                        data: clients,
                                
                                        fields: [
                                            { name: "Name", type: "text", width: 150, validate: "required" },
                                            { name: "Age", type: "number", width: 50, css:"text-center" },
                                            { name: "Address", type: "text", width: 200 },
                                            { name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
                                            { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
                                            { type: "control" }
                                        ]
                                    });
                            

Foo table Official URL

Required files

CSS

                                <link rel="stylesheet" href="../../assets/plugins/footable/css/footable.core.min.css">
                            

JS

                                <script src="../../assets/plugins/footable/dist/footable.min.js"></script>
                            
Initialization

HTML

                                
ID First Name Last Name Job Title Started On Date of Birth
1 Dennise Fuhrman High School History Teacher November 8th 2011 July 25th 1960

JS

                                $('#table').footable();
                            

Bootgrid Official URL

Required files

CSS

                                <link rel="stylesheet" href="../../assets/plugins/jquery-bootgrid/dist/jquery.bootgrid.min.css">
                            

JS

                                <script src="../../assets/plugins/jquery-bootgrid/dist/jquery.bootgrid.min.js"></script>
                            
Initialization

HTML

                                
ID Sender Received
10231 eduardo@pingpong.com 14.10.2013

JS

                                $("#bootgrid-basic").bootgrid();
                            

Forms #back to top

Form step

Required files

CSS

                                <link href="../../assets/plugins/jquery-steps//css/jquery.steps.css" rel="stylesheet">
                            

JS

                                <script src="../../assets/plugins/jquery-steps/build/jquery.steps.min.js"></script>
                            
Initialization

HTMl

                                

Personal Info

Personal Info

Business Info

Business Info

JS

                                var form = $("#step-form-horizontal");
                                form.children('div').steps({
                                    headerTag: "h4",
                                    bodyTag: "section",
                                    transitionEffect: "slideLeft",
                                    autoFocus: true, 
                                    transitionEffect: "slideLeft",
                                    onStepChanging: function (event, currentIndex, newIndex)
                                    {
                                        form.validate().settings.ignore = ":disabled,:hidden"; 
                                        return form.valid();
                                    }
                                });
                            

Summernote Editor

Required files

CSS

                                <link href="../../assets/plugins/summernote/summernote.css" rel="stylesheet">
                            

JS

                                <script src="../../assets/plugins/summernote/js/summernote.min.js"></script>
                            
Initialization

HTML

                                

JS

                                $(".summernote").summernote({
                                    height: 350,
                                    minHeight: null,
                                    maxHeight: null,
                                    focus: !1
                                })
                            

Date

Required files

CSS

                                <link href="../../assets/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
                            

JS

                                <script src="../../assets/plugins/moment/moment.min.js"></script>
                                <script src="../../assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
                            
Initialization

HTML

                                <input class="form-control input-daterange-datepicker" type="text" name="daterange" value="01/01/2015 - 01/31/2015">
                            

JS

                                $('.input-daterange-datepicker').daterangepicker({
                                    buttonClasses: ['btn', 'btn-sm'],
                                    applyClass: 'btn-danger',
                                    cancelClass: 'btn-inverse'
                                });
                            

Time

Required files

CSS

                                <link href="../../assets/plugins/clockpicker/css/bootstrap-clockpicker.min.css" rel="stylesheet">
                            

JS

                                <script src="../../assets/plugins/moment/moment.min.js"></script>
                                <script src="../../assets/plugins/clockpicker/js/bootstrap-clockpicker.min.js"></script>
                            
Initialization

HTML

                                <input class="form-control" id="single-input" value="" placeholder="Now">
                            

JS

                                var input = $('#single-input').clockpicker({
                                    placement: 'bottom',
                                    align: 'left',
                                    autoclose: true,
                                    'default': 'now'
                                });
                            

Color

Required files

CSS

                                <link href="../../assets/plugins/jquery-asColorPicker/css/asColorPicker.min.css" rel="stylesheet">
                            

JS

                                <script src="../../assets/plugins/moment/moment.min.js"></script>
                                <script src="../../assets/plugins/jquery-asColor/jquery-asColor.min.js"></script>
                                <script src="../../assets/plugins/jquery-asGradient/jquery-asGradient.min.js"></script>
                                <script src="../../assets/plugins/jquery-asColorPicker/js/jquery-asColorPicker.min.js"></script>
                            
Initialization

HTML

                                <input type="text" class="colorpicker form-control" value="#7ab2fa">
                            

JS

                                $(".colorpicker").asColorPicker();
                            

Material

Required files

CSS

                                <link href="../../assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css" rel="stylesheet">
                            

JS

                                <script src="../../assets/plugins/moment/moment.min.js"></script>
                                <script src="../../assets/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js"></script>
                            
Initialization

HTML

                                <input type="text" class="form-control" placeholder="2017-06-04" id="mdate">
                            

JS

                                $('#mdate').bootstrapMaterialDatePicker({
                                    weekStart: 0,
                                    time: false
                                });
                            

Pick date

Required files

CSS

                                <link rel="stylesheet" href="../../assets/plugins/pickadate/themes/default.css">
                                <link rel="stylesheet" href="../../assets/plugins/pickadate/themes/default.date.css">
                            

JS

                                <script src="../../assets/plugins/pickadate/picker.js"></script>
                                <script src="../../assets/plugins/pickadate/picker.time.js"></script>
                                <script src="../../assets/plugins/pickadate/picker.date.js"></script>
                            
Initialization

HTML

                                
                            

JS

                                $('.datepicker-default').pickadate();
                            

Dropzone

Required files

CSS

                                <link href="../../assets/plugins/dropzone/css/dropzone.min.css" rel="stylesheet">
                            

JS

                                <script src="../../assets/plugins/dropzone/js/dropzone.min.js"></script>
                            
Initialization

HTML

                                

JS

                                No additional JS code required
                            

Touchspinner

Required files

CSS

                                <link rel="stylesheet" href="../../assets/plugins/bootstrap-touchspin/css/jquery.bootstrap-touchspin.min.css">
                            

JS

                                <script src="../../assets/plugins/bootstrap-touchspin/js/jquery.bootstrap-touchspin.min.js"></script>
                            
Initialization

HTML

                                
                            

JS

                                $("input[name='demo_vertical']").TouchSpin( {
                                    verticalbuttons: !0
                                }
                            

Select 2

Required files

CSS

                                <link rel="stylesheet" href="../../assets/plugins/select2/css/select2.min.css">
                            

JS

                                <script src="../../assets/plugins/select2/js/select2.full.min.js"></script>
                            
Initialization

HTML

                                
                            

JS

                                $("#single-select").select2();
                            

Mask

Required files

CSS

                                <link rel="stylesheet" href="../../assets/plugins/jasny-bootstrap/dist/css/jasny-bootstrap.min.css">
                            

JS

                                <script src="../../assets/plugins/jasny-bootstrap/dist/js/jasny-bootstrap.min.js"></script>
                            
Initialization

HTML

                                 999-99-999-9999-9
                            

JS

                                No additional script required
                            

Switch

Required files

CSS

                                <link href="../../assets/plugins/innoto-switchery/dist/switchery.min.css" rel="stylesheet"/>
                            

JS

                                <script src="../../assets/plugins/innoto-switchery/dist/switchery.min.js"></script>
                            
Initialization

HTML

                                
                            

JS

                                new Switchery(html, {
                                    color: '#2290FF', 
                                    secondaryColor: '#2290FF'
                                });
                            

Tag input

Required files

CSS

                                <link rel="stylesheet" href="../../assets/plugins/bootstrap-tagsinput/css/bootstrap-tagsinput.css">
                            

JS

                                <script src="../../assets/plugins/bootstrap-tagsinput/js/bootstrap-tagsinput.min.js"></script>
                            
Initialization

HTML

                                
                            

JS

                                $("#tags_1").tagsinput()
                            

Typeahead

Required files

CSS

                                <link rel="stylesheet" href="../../assets/plugins/typeahead/style.css">
                            

JS

                                <script src="../../assets/plugins/typeahead.js/dist/typeahead.jquery.min.js"></script>
                                <script src="../../assets/plugins/typeahead.js/dist/typeahead.bundle.min.js"></script>
                                <script src="../../assets/plugins/typeahead.js/dist/bloodhound.min.js"></script>
                            
Initialization

HTML

                                
                            

JS

                                //Basic setup
                                var substringMatcher = function(strs) {
                                    return function findMatches(q, cb) {
                                        var matches, substringRegex;
                                    
                                        // an array that will be populated with substring matches
                                        matches = [];
                                    
                                        // regex used to determine if a string contains the substring `q`
                                        substringRegex = new RegExp(q, 'i');
                                    
                                        // iterate through the pool of strings and for any string that
                                        // contains the substring `q`, add it to the `matches` array
                                        $.each(strs, function(i, str) {
                                            if (substringRegex.test(str)) {
                                            matches.push(str);
                                            }
                                        });
                                    
                                        cb(matches);
                                    };
                                };
                                    
                                var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
                                    'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
                                    'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
                                    'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
                                    'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
                                    'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
                                    'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
                                    'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
                                    'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
                                ];

                                $('.typeahead-basic').typeahead({
                                    hint: true,
                                    highlight: true,
                                    minLength: 1
                                },
                                {
                                    name: 'states',
                                    source: substringMatcher(states)
                                });
                            

X-Editable

Required files

CSS

                                <link href="../../assets/plugins/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet">
                            

JS

                                <script src="../../assets/plugins/moment/moment.min.js"></script>
                                <script src="../../assets/plugins/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
                            
Initialization

HTML

                                superuser
                            

JS

                                $("#username").editable({
                                    type:"text",
                                    pk:1,
                                    name:"username",
                                    title:"Enter username"
                                });
                            

Dropify

Required files

CSS

                                <link rel="stylesheet" href="../../assets/plugins/dropify/dist/css/dropify.min.css">
                            

JS

                                <script src="../../assets/plugins/dropify/dist/js/dropify.min.js"></script>
                            
Initialization

HTML

                                
                            

JS

                                $('.dropify').dropify();
                            

Cropper

Required files

CSS

                                <link rel="stylesheet" href="../../assets/plugins/cropperjs/dist/cropper.min.css">
                            

JS

                                <script src="../../assets/plugins/cropperjs/dist/cropper.min.js"></script>
                                <script src="../../assets/plugins/jquery-cropper/dist/jquery-cropper.min.js"></script>
                            
Initialization

HTML


                            

jQuery validate

Required files

CSS

                                No plugin stylesheet required
                            

JS

                                <script src="../../assets/plugins/jquery-validation/jquery.validate.min.js"></script>
                            
Initialization

HTML

                                

JS

                                jQuery(".form-valide").validate({
                                    rules: {
                                        "val-username": {
                                            required: !0,
                                            minlength: 3
                                        }
                                    },
                                    messages: {
                                        "val-username": {
                                            required: "Please enter a username",
                                            minlength: "Your username must consist of at least 3 characters"
                                        }
                                    }
                                });
                            

Chart #back to top

Flot

Required files

CSS

                                No plugins stylesheet dependencies
                            

JS

                                <script src="../../assets/plugins/flot/jquery.flot.js"></script>
                                <script src="../../assets/plugins/flot/jquery.flot.pie.js"></script>
                                <script src="../../assets/plugins/flot/jquery.flot.resize.js"></script>
                                <script src="../../assets/plugins/flot-spline/jquery.flot.spline.min.js"></script>
                            
Initialization

HTML

                                

JS

                                $.plot("#flotBar1", [{
                                    data: [[0, 3], [2, 8], [4, 5], [6, 13], [8, 5], [10, 7], [12, 4], [14, 6]]
                                }], {
                                    series: {
                                        bars: {
                                            show: true,
                                            lineWidth: 0,
                                            fillColor: '#9EE5A1'
                                        }
                                    },
                                    grid: {
                                        borderWidth: 1,
                                        borderColor: 'transparent'
                                    },
                                    yaxis: {
                                        tickColor: 'transparent',
                                        font: {
                                            color: '#fff',
                                            size: 10
                                        }
                                    },
                                    xaxis: {
                                        tickColor: 'transparent',
                                        font: {
                                            color: '#fff',
                                            size: 10
                                        }
                                    }
                                });
                            

Morris Chart

Required files

CSS

                                No plugins stylesheet dependencies
                            

JS

                                <script src="../../assets/plugins/raphael/raphael.min.js"></script>
                                <script src="../../assets/plugins/morris/morris.min.js"></script>
                            
Initialization

HTML

                                

JS

                                // LINE CHART
                                let line = new Morris.Line({
                                    element: 'morris-line-chart',
                                    resize: true,
                                    data: [{
                                            y: '2011 Q1',
                                            item1: 2666
                                        },
                                        {
                                            y: '2011 Q2',
                                            item1: 2778
                                        },
                                        {
                                            y: '2011 Q3',
                                            item1: 4912
                                        },
                                        {
                                            y: '2011 Q4',
                                            item1: 3767
                                        },
                                        {
                                            y: '2012 Q1',
                                            item1: 6810
                                        },
                                        {
                                            y: '2012 Q2',
                                            item1: 5670
                                        },
                                        {
                                            y: '2012 Q3',
                                            item1: 4820
                                        },
                                        {
                                            y: '2012 Q4',
                                            item1: 15073
                                        },
                                        {
                                            y: '2013 Q1',
                                            item1: 10687
                                        },
                                        {
                                            y: '2013 Q2',
                                            item1: 8432
                                        }
                                    ],
                                    xkey: 'y',
                                    ykeys: ['item1'],
                                    labels: ['Item 1'],
                                    gridLineColor: 'transparent',
                                    lineColors: ['#0000FF'], //hrere
                                    lineWidth: 1,
                                    hideHover: 'auto',
                                    pointSize: 0,
                                    axes: false
                                });
                            

CharJS

Required files

CSS

                                No plugin stylesheet required
                            

JS

                                <script src="../../assets/plugins/chart.js/Chart.bundle.min.js"></script>
                            
Initialization

HTML

                                
                            

JS

                                var ctx = document.getElementById("team-chart");
                                ctx.height = 100;
                                new Chart(ctx, {
                                    type: 'line',
                                    data: {
                                        labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
                                        type: 'line',
                                        defaultFontFamily: 'Montserrat',
                                        datasets: [{
                                            data: [0, 15, 7, 12, 85, 10, 50],
                                            label: "Saiful",
                                            backgroundColor: 'rgba(0, 162, 255, .8)',
                                            borderColor: 'rgba(0, 162, 255, .8)',
                                            borderWidth: 0.5,
                                            pointStyle: 'circle',
                                            pointRadius: 5,
                                            pointBorderColor: 'transparent',
                                            pointBackgroundColor: '#00A2FF',
                                        }, {
                                            label: "Saikot",
                                            data: [0, 14, 5, 3, 15, 5, 0],
                                            backgroundColor: 'rgba(52, 199, 59, .8)',
                                            borderColor: 'rgba(52, 199, 59, .8)',
                                            borderWidth: 0.5,
                                            pointStyle: 'circle',
                                            pointRadius: 5,
                                            pointBorderColor: 'transparent',
                                            pointBackgroundColor: '#87de75',
                                        }]
                                    },
                                    options: {
                                        responsive: true,
                                        tooltips: {
                                            mode: 'index',
                                            titleFontSize: 12,
                                            titleFontColor: '#000',
                                            bodyFontColor: '#000',
                                            backgroundColor: '#fff',
                                            titleFontFamily: 'Montserrat',
                                            bodyFontFamily: 'Montserrat',
                                            cornerRadius: 3,
                                            intersect: false,
                                        },
                                        legend: {
                                            position: 'top',
                                            labels: {
                                                usePointStyle: true,
                                                fontFamily: 'Montserrat',
                                            },
                            
                            
                                        },
                                        scales: {
                                            xAxes: [{
                                                display: true,
                                                gridLines: {
                                                    display: false,
                                                    drawBorder: false
                                                },
                                                scaleLabel: {
                                                    display: false,
                                                    labelString: 'Month'
                                                }
                                            }],
                                            yAxes: [{
                                                display: true,
                                                gridLines: {
                                                    display: false,
                                                    drawBorder: false
                                                },
                                                scaleLabel: {
                                                    display: true,
                                                    labelString: 'Value'
                                                }
                                            }]
                                        },
                                        title: {
                                            display: false,
                                        }
                                    }
                                });
                            

Chartist

Required files

CSS

                                <link rel="stylesheet" href="../../assets/plugins/chartist/css/chartist.min.css">
                            

JS

                                <script src="../../assets/plugins/chartist/js/chartist.min.js"></script>
                                <script src="../../assets/plugins/chartist-plugin-tooltips/js/chartist-plugin-tooltip.min.js"></script>
                            
Initialization

HTML

                                

JS

                                var chart = new Chartist.Line('#smil-animations', {
                                    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                                    series: [
                                        [12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
                                        [4,  5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
                                        [5,  3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],
                                        [3,  4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3]
                                    ]
                                    }, {
                                    low: 0,
                                    plugins: [
                                        Chartist.plugins.tooltip()
                                    ]
                                    });
                                    
                                    // Let's put a sequence number aside so we can use it in the event callbacks
                                    var seq = 0,
                                    delays = 80,
                                    durations = 500;
                                    
                                    // Once the chart is fully created we reset the sequence
                                    chart.on('created', function() {
                                    seq = 0;
                                    });
                                    
                                    // On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
                                    chart.on('draw', function(data) {
                                    seq++;
                                    
                                    if(data.type === 'line') {
                                        // If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
                                        data.element.animate({
                                        opacity: {
                                            // The delay when we like to start the animation
                                            begin: seq * delays + 1000,
                                            // Duration of the animation
                                            dur: durations,
                                            // The value where the animation should start
                                            from: 0,
                                            // The value where it should end
                                            to: 1
                                        }
                                        });
                                    } else if(data.type === 'label' && data.axis === 'x') {
                                        data.element.animate({
                                        y: {
                                            begin: seq * delays,
                                            dur: durations,
                                            from: data.y + 100,
                                            to: data.y,
                                            // We can specify an easing function from Chartist.Svg.Easing
                                            easing: 'easeOutQuart'
                                        }
                                        });
                                    } else if(data.type === 'label' && data.axis === 'y') {
                                        data.element.animate({
                                        x: {
                                            begin: seq * delays,
                                            dur: durations,
                                            from: data.x - 100,
                                            to: data.x,
                                            easing: 'easeOutQuart'
                                        }
                                        });
                                    } else if(data.type === 'point') {
                                        data.element.animate({
                                        x1: {
                                            begin: seq * delays,
                                            dur: durations,
                                            from: data.x - 10,
                                            to: data.x,
                                            easing: 'easeOutQuart'
                                        },
                                        x2: {
                                            begin: seq * delays,
                                            dur: durations,
                                            from: data.x - 10,
                                            to: data.x,
                                            easing: 'easeOutQuart'
                                        },
                                        opacity: {
                                            begin: seq * delays,
                                            dur: durations,
                                            from: 0,
                                            to: 1,
                                            easing: 'easeOutQuart'
                                        }
                                        });
                                    } else if(data.type === 'grid') {
                                        // Using data.axis we get x or y which we can use to construct our animation definition objects
                                        var pos1Animation = {
                                        begin: seq * delays,
                                        dur: durations,
                                        from: data[data.axis.units.pos + '1'] - 30,
                                        to: data[data.axis.units.pos + '1'],
                                        easing: 'easeOutQuart'
                                        };
                                    
                                        var pos2Animation = {
                                        begin: seq * delays,
                                        dur: durations,
                                        from: data[data.axis.units.pos + '2'] - 100,
                                        to: data[data.axis.units.pos + '2'],
                                        easing: 'easeOutQuart'
                                        };
                                    
                                        var animations = {};
                                        animations[data.axis.units.pos + '1'] = pos1Animation;
                                        animations[data.axis.units.pos + '2'] = pos2Animation;
                                        animations['opacity'] = {
                                        begin: seq * delays,
                                        dur: durations,
                                        from: 0,
                                        to: 1,
                                        easing: 'easeOutQuart'
                                        };
                                    
                                        data.element.animate(animations);
                                    }
                                    });
                                    
                                    // For the sake of the example we update the chart every time it's created with a delay of 10 seconds
                                    chart.on('created', function() {
                                    if(window.__exampleAnimateTimeout) {
                                        clearTimeout(window.__exampleAnimateTimeout);
                                        window.__exampleAnimateTimeout = null;
                                    }
                                    window.__exampleAnimateTimeout = setTimeout(chart.update.bind(chart), 12000);
                                    });
                            

Sparkline

Required files

CSS

                                No plugin stylesheet required
                            

JS

                                <script src="../../assets/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>
                            
Initialization

HTML

                                
                            

JS

                                $("#sparklinedash").sparkline([10, 15, 26, 27, 28, 31, 34, 40, 41, 44, 49, 64, 68, 69, 72], {
                                    type: "bar",
                                    height: "50",
                                    barWidth: "4",
                                    resize: !0,
                                    barSpacing: "5",
                                    barColor: "#00A2FF"
                                });
                            

Pie chart

Required files

CSS

                                No plugin stylesheet dependencies
                            

JS

                                <script src="../../assets/plugins/easy-pie-chart/jquery.easypiechart.min.js"></script>
                            
Initialization

HTML

                                

JS

                                $(''.chart').easyPieChart({
                                    barColor: function(parcent) {
                                        return parcent > 75 ? 'rgb(0, 171, 197)' : parcent > 50 ? 'rgb(117, 180, 50)' : parcent > 25 ? 'rgb(7, 135, 234)' : 'rgb(192, 10, 39)';
                                    }, 
                                    lineWidth: 2
                                });
                            

Peity

Required files

CSS

                                No plugin stylesheet required
                            

JS

                                <script src="../../assets/plugins/peity/jquery.peity.min.js"></script>
                            
Initialization

HTML

                                5,3,9,6,5,9,7,3,5,2
                            

JS

                                $(".bar-colours-1").peity("bar", {
                                    fill: ["#F44336", "#34C73B", "#0000FF"],
                                    width: "100",
                                    height: "100"
                                });
                            

Buttons #back to top

Following are the general buttons

Button primary
                            
                        
Button secondary
                            
                        
Button success
                            
                        
Button danger
                            
                        
Button warning
                            
                        
Button info
                            
                        
Button light
                            
                        
Button dark
                            
                        

This template has RTL support. It's very ease to turn this template into RTL by following steps.

In the deznav.js file, just change the direction property into 'rtl'

                            direction: "rtl"
                        

That's it, now you are good to go with RTL version.

Customize

If you want to write any style for RTL layout, you may write them into rtl.scss file. This file is located at

                            scss/layout/rtl/rtl.scss
                        

Or if you want to style it via CSS file, you can write all of your css nested by this selector

                                [direction="rtl"] your_selector {

                                }
                        

[direction="rtl"] this is an attribute in the body tag.

Credit #back to top

Code released under the Un License License.

For more information about copyright and license check choosealicense.com.

Hire us #back to top

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

Send me qoute

Copyright and license #back to top

Code released under the ThemeForest License.

Development credit: DexignZone