Admin Template

Color Admin

“Default Flat Design” Documentation by “Sean Ngu” v4.7

Last Updated: 25/October/2020
By: Sean Ngu
Email: nguoksiong@live.co.uk

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email your question to my email nguoksiong@live.co.uk. Thanks so much!

A) HTML Structure - top

This template can be used as an fluid layout with a max of 12 columns next to each other. The general template structure is the same throughout the template. Here is the general structure.

<!-- begin #page-loader -->
<div id="page-loader" class="fade show"><span class="spinner"></span></div>
<!-- end #page-loader -->

<!-- begin #page-container -->
<div id="page-container" class="page-container fade page-sidebar-fixed page-header-fixed">
  <!-- begin #header -->
  <div id="header" class="header navbar-default"></div>
  <!-- end #header -->
  
  <!-- begin #sidebar -->
  <div id="sidebar" class="sidebar"></div>
  <div class="sidebar-bg"></div>
  <!-- end #sidebar -->
  
  <!-- begin #content -->
  <div id="content" class="content"></div>
  <!-- end #content -->
  
  <!-- begin theme-panel -->
  <div class="theme-panel"></div>
  <!-- end theme-panel -->
    
  <!-- begin scroll to top btn -->
  <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" 
    data-click="scroll-top">
    <i class="fa fa-angle-up"></i>
  </a>
  <!-- end scroll to top btn -->
</div>
<!-- end page container -->

B) Beginning of Page - top

Below code is used to detect the internet explorer for browser compatibility & styling setting usage.

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->

C) Page Head - top

Page head contains metadata, javascript and css files:

<head>
  <meta charset="utf-8" />
  <title>Color Admin | Default Design</title>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" 
        name="viewport" />
  <meta content="" name="description" />
  <meta content="" name="author" />
  
  <!-- ================== BEGIN BASE CSS STYLE ================== -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
  <link href="../assets/css/default/app.min.css" rel="stylesheet" />
  <!-- ================== END BASE CSS STYLE ================== -->
</head>

D) Header - top

Top menu structure:

<!-- begin #header -->
<div id="header" class="header navbar-default">
  <!-- begin navbar-header -->
  <div class="navbar-header">
    <a href="index.html" class="navbar-brand">
      <span class="navbar-logo"></span> 
      <b>Color</b> Admin
    </a>
    <button type="button" class="navbar-toggle" data-click="sidebar-toggled">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <!-- end navbar-header -->
  <!-- begin header-nav -->
  <ul class="navbar-nav navbar-right">
    <li class="navbar-form">
      <form action="" method="POST" name="search_form" >
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Enter keyword" />
          <button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
        </div>
      </form>
    </li>
    ...
    <li class="dropdown navbar-user">
      <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
        <img src="../assets/img/user/user-13.jpg" alt="" /> 
        <span class="d-none d-md-inline">Adam Schwartz</span> <b class="caret"></b>
      </a>
      <div class="dropdown-menu dropdown-menu-right">
        ...
      </div>
    </li>
  </ul>
  <!-- end header-nav -->
</div>
<!-- end #header -->

E) Sidebar - top

Sidebar structure:

<!-- begin #sidebar -->
<div id="sidebar" class="sidebar">
  <!-- begin sidebar scrollbar -->
  <div data-scrollbar="true" data-height="100%">
    <!-- begin sidebar nav -->
    <ul class="nav">
      <li class="nav-header">Navigation</li>
      <li class="has-sub active">
        <a href="#">
          <b class="caret"></b>
          <i class="fa fa-th-large"></i>
          <span>Dashboard</span>
        </a>
        <ul class="sub-menu">
          <li class="active"><a href="index.html">Dashboard v1</a></li>
          <li><a href="index_v2.html">Dashboard v2</a></li>
        </ul>
      </li>
      ...
      <!-- begin sidebar minify button -->
      <li>
        <a href="#" class="sidebar-minify-btn" data-click="sidebar-minify">
          <i class="fa fa-angle-double-left"></i>
        </a>
      </li>
      <!-- end sidebar minify button -->
    </ul>
    <!-- end sidebar nav -->
  </div>
  <!-- end sidebar scrollbar -->
</div>
<div class="sidebar-bg"></div>
<!-- end #sidebar -->

F) Page Content - top

Page content consists of page title, breadcrumbs and page's main body. HTML code of Content container as shown below: 

<!-- begin #content -->
<div id="content" class="content">
  <!-- begin breadcrumb -->
  <ol class="breadcrumb float-xl-right">
    <li><a href="javascript:;">Home</a></li>
    <li><a href="javascript:;">Page Options</a></li>
    <li class="active">Blank Page</li>
  </ol>
  <!-- end breadcrumb -->
  <!-- begin page-header -->
  <h1 class="page-header">Blank Page <small>header small text goes here...</small></h1>
  <!-- end page-header -->
  
  <!-- Page Content Here -->  
</div>
<!-- end #content -->

G) Panel Box - top

Widget Box used for separate the content clearly by section. 

<!-- begin panel -->
<div class="panel panel-inverse">
  <div class="panel-heading">
    <h4 class="panel-title">Panel Title here</h4>
    <div class="panel-heading-btn">
      <a href="#" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand">
        <i class="fa fa-expand"></i>
      </a>
      <a href="#" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload">
        <i class="fa fa-repeat"></i>
      </a>
      <a href="#" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse">
        <i class="fa fa-minus"></i>
      </a>
      <a href="#" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove">
        <i class="fa fa-times"></i>
      </a>
    </div>
  </div>
  <div class="panel-body">
    Panel Content Here
  </div>
</div>
<!-- end panel -->

H) End of Page (Javascript) - top

Javascript files loaded in the end of page. This will reduce page load time. 

  <!-- ================== BEGIN BASE JS ================== -->
  <script src="../assets/js/app.min.js"></script>
  <script src="../assets/js/theme/default.min.js"></script>
  <!-- ================== END BASE JS ================== -->
</body>
</html>

I) Page Theme Options - top

You may use our pre-generated theme files in ../assets/css/default/theme folder to set the theme color OR you may change the primary color by using SCSS. Select one of the following files and include it in your <head>Section.

Available Theme Options:

<!-- BLUE -->
<link href="../assets/css/default/theme/blue.min.css" rel="stylesheet" />
<!-- PURPLE -->
<link href="../assets/css/default/theme/purple.min.css" rel="stylesheet" />
<!-- RED -->
<link href="../assets/css/default/theme/red.min.css" rel="stylesheet" />
<!-- ORANGE -->
<link href="../assets/css/default/theme/orange.min.css" rel="stylesheet" />
<!-- BLACK -->
<link href="../assets/css/default/theme/black.min.css" rel="stylesheet" />
<!-- AQUA -->
<link href="../assets/css/default/theme/aqua.min.css" rel="stylesheet" />
<!-- TEAL -->
<link href="../assets/css/default/theme/teal.min.css" rel="stylesheet" />
<!-- GREEN -->
<link href="../assets/css/default/theme/green.min.css" rel="stylesheet" />
<!-- LIME -->
<link href="../assets/css/default/theme/lime.min.css" rel="stylesheet" />
<!-- YELLOW -->
<link href="../assets/css/default/theme/yellow.min.css" rel="stylesheet" />
<!-- PINK -->
<link href="../assets/css/default/theme/pink.min.css" rel="stylesheet" />
<!-- INDIGO -->
<link href="../assets/css/default/theme/indigo.min.css" rel="stylesheet" />

J) Page Options - top

Here is the general structure for the each case of page options.

Page Without Sidebar

<!-- begin #page-container -->
<div id="page-container" class="fade page-container page-without-sidebar">
  <!-- begin #sidebar -->
  <div id="sidebar" class="sidebar">
  <!-- end #sidebar -->

Page With Two Sidebar

<!-- begin #page-container -->
<div id="page-container" class="fade page-container page-with-two-sidebar">
  <!-- begin #sidebar -->
  <div id="sidebar" class="sidebar"></div>
  <div class="sidebar-bg"></div>
  <!-- end #sidebar -->
  
  <!-- begin #sidebar-right -->
  <div id="sidebar-right" class="sidebar sidebar-right"></div>
  <div class="sidebar-bg sidebar-right"></div>
  <!-- end #sidebar-right -->

Page With Footer

<!-- begin #page-container -->
<div id="page-container" class="fade page-container">
  <!-- begin #footer -->
  <div id="footer" class="footer">
    ...
  </div>
  <!-- end #footer -->

Top Navigation Default

<!-- begin #page-container -->
<div id="page-container" class="fade page-container">
  <!-- begin #header -->
  <div id="header" class="header navbar navbar-default">

Top Navigation Fixed

<!-- begin #page-container -->
<div id="page-container" class="fade page-container page-header-fixed">
  <!-- begin #header -->
  <div id="header" class="header navbar-default">

Top Navigation Inverse Styling

<!-- begin #page-container -->
<div id="page-container" class="fade page-container">
  <!-- begin #header -->
  <div id="header" class="header navbar-inverse">

Sidebar Default

<!-- begin #page-container -->
<div id="page-container" class="fade page-container">
  <!-- begin #sidebar -->
  <div id="sidebar" class="sidebar">
    ...
  </div>
  <div class="sidebar-bg"></div>
  <!-- end #sidebar -->

Sidebar Fixed

<!-- begin #page-container -->
<div id="page-container" class="fade page-container page-sidebar-fixed">
  <!-- begin #sidebar -->
  <div id="sidebar" class="sidebar">

Sidebar Minified

<!-- begin #page-container -->
<div id="page-container" class="fade page-container page-sidebar-minified">
  <!-- begin #sidebar -->
  <div id="sidebar" class="sidebar">
    ...
  </div>
  <div class="sidebar-bg"></div>
  <!-- end #sidebar -->

Sidebar Position Right

<!-- begin #page-container -->
<div id="page-container" class="fade page-container page-with-right-sidebar">
  <!-- begin #sidebar -->
  <div id="sidebar" class="sidebar">

Sidebar Grid Styling

<!-- begin #sidebar -->
<div id="sidebar" class="sidebar sidebar-grid">

Sidebar Gradient Styling NEW

<!-- begin #page-container -->
<div id="page-container" class="fade page-container gradient-enabled">

Full Height Page / Table Column Page NEW

<!-- begin #content -->
<div id="content" class="content content-full-width">
  <div class="vertical-box">
    <div class="vertical-box-column width-250">
      <div class="vertical-box">
        <div class="wrapper bg-blue-darker text-white">
          Header
        </div>
        <div class="vertical-box-row bg-blue text-white">
          <div class="vertical-box-cell">
            <div class="vertical-box-inner-cell">
              <div data-scrollbar="true" data-height="100%" class="wrapper">
                <!-- auto adjust vertical box with scrollbar here -->
              </div>
            </div>
          </div>
        </div>
        <div class="wrapper bg-silver bg-blue-darker text-white">
          Footer
        </div>
      </div>
    </div>
  </div>
  <div class="vertical-box">
    <!-- next vertical box column with same / different option like the previous sample code -->
  </div>
</div>
<!-- end #content -->

Remove Page Loader

If you wish to remove the page loading animation, you just need to remove the #page-loader and remove the class .fade from #page-container

from

<!-- begin #page-loader -->
<div id="page-loader" class="fade show">
  <span class="spinner"></span>
</div>
<!-- end #page-loader -->

<!-- begin #page-container -->
<div id="page-container" class="fade">
</div>
<!-- end #page-container -->

to

<!-- begin #page-container -->
<div id="page-container" class="">
</div>
<!-- end #page-container -->

K) Using Gulp SCSS - top

Installation

Below is the command that required to run / compile the scss with gulpjs. If you are new to the gulpjs, you may refer to their official website for installation guide.

<!-- run the following command -->
cd /your-path-url/admin/src/
npm install
gulp

<!-- available theme command -->
gulp               // default theme
gulp material      // material theme
gulp apple         // apple theme
gulp transparent   // transparent theme
gulp facebook      // facebook theme
gulp google        // google theme

Verify that you are running at least node 10.9.x or later and npm 6.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

Enable RTL Support

To enable the RTL Support, you might need to change the following variable from admin/src/scss/default/_variables.scss. 

<!-- LINE 92 -->
$enable-rtl: true;

<!-- run the command to regenerate the /css/default/app.min.css -->
gulp

Gulp compilation

We are using gulp to compile & combine few plugins js & css into one single file for js & css. This may help to improve the speed for page load if compare to multiple files loading in one page. If you wish to edit the included plugins files, you may refer to the /admin/src/gulpfile.js.

Below is the list of plugins that compile into app.min.css.

return gulp.src([
  'node_modules/animate.css/animate.min.css',
  'node_modules/@fortawesome/fontawesome-free/css/all.min.css',
  'node_modules/jquery-ui-dist/jquery-ui.min.css',
  'node_modules/pace-js/themes/black/pace-theme-flash.css',
  'scss/default/styles.scss'
])
.pipe(sass())
.pipe(concat('app.min.css'))
.pipe(minifyCSS())
.pipe(gulp.dest(distPath + '/assets/css/default/'))
.pipe(livereload());

Below is the list of plugins that compile into app.min.js.

return gulp.src([
  'node_modules/pace-js/pace.min.js',
  'node_modules/jquery/dist/jquery.min.js',
  'node_modules/jquery-ui-dist/jquery-ui.min.js',
  'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',
  'node_modules/jquery-slimscroll/jquery.slimscroll.min.js',
  'node_modules/js-cookie/src/js.cookie.js',
  'js/app.js',
])
.pipe(sourcemaps.init())
.pipe(concat('app.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest(distPath + '/assets/js/'))
.pipe(livereload())

Gulp & SCSS file structure

To change the color theme / primary color, you may refer to the _variables.scss and set the variable. Npm can be used to update the plugins version as well.

admin/src/
├── gulpfile.js
├── package.json
├── js/
└── scss/
    ├── default/
    │   ├── _app.scss
    │   ├── _functions.scss
    │   ├── _helper.scss
    │   ├── _layout.scss
    │   ├── _mixins.scss
    │   ├── _plugins.scss
    │   ├── _reboot.scss
    │   ├── _ui.scss
    │   ├── _ui.scss
    │   ├── _variables.scss
    │   ├── theme.scss
    │   ├── styles.scss
    │   ├── app/
    │   ├── images/
    │   ├── layout/
    │   ├── mixins/
    │   ├── plugins/
    │   └── ui/
    ├── apple/
    ├── facebook/
    ├── material/
    └── transparent/

L) Plugins & Resources - top

Below is the list of all plugins and external resources used to power this template.

Name CSS Files
Bootstrap 4

Bootstrap 4 has been included in app.min.css & app.min.js

Official Link:
http://getbootstrap.com/
FontAwesome

FontAwesome has been included in app.min.css

Official Link:
https://fontawesome.com/
Animate.css

Animate.css has been included in app.min.css

Official Link:
http://daneden.github.io/animate.css/
jQuery

jQuery has been included in app.min.js

Official Link:
http://jquery.com/
jQuery UI

jQuery UI has been included in app.min.css & app.min.js

Official Link:
http://jqueryui.com/
jQuery slimScroll

jQuery slimScroll has been included in app.min.js

Official Link:
http://rocha.la/jQuery-slimScroll
JavaScript Cookie

Required JS File

JavaScript Cookie has been included in app.min.js

Official Link:
https://github.com/js-cookie/js-cookie
jvectormap

Required CSS File

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

Required JS File

<script src="../assets/plugins/jvectormap-next/jquery-jvectormap.min.js"></script>
<script src="../assets/plugins/jvectormap-next/jquery-jvectormap-world-mill.js"></script>

Official Link:
http://jvectormap.com/
flot charts

Required JS File

<script src="../assets/plugins/flot/jquery.flot.js"></script>
<script src="../assets/plugins/flot/jquery.flot.time.js"></script>
<script src="../assets/plugins/flot/jquery.flot.resize.js"></script>
<script src="../assets/plugins/flot/jquery.flot.pie.js"></script>
<script src="../assets/plugins/flot/jquery.flot.stack.js"></script>
<script src="../assets/plugins/flot/jquery.flot.crosshair.js"></script>
<script src="../assets/plugins/flot/jquery.flot.categories.js"></script>

Official Link:
http://www.flotcharts.org/
fullcalendar

Required CSS File

<link href="../assets/plugins/fullcalendar/dist/fullcalendar.print.css" rel="stylesheet" media='print' />
<link href="../assets/plugins/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet" />

Required JS File

<script src="../assets/plugins/moment/moment.js"></script>
<script src="../assets/plugins/fullcalendar/dist/fullcalendar.min.js"></script>

Official Link:
https://fullcalendar.io/
Gritter

Required CSS File

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

Required JS File

<script src="../assets/plugins/gritter/js/jquery.gritter.js"></script>

Official Link:
https://github.com/jboesch/Gritter
Isotope

Required JS File

<script src="../assets/plugins/isotope-layout/dist/isotope.pkgd.min.js"></script>

Official Link:
http://isotope.metafizzy.co/
Lightbox 2

Required CSS File

<link rel="stylesheet" href="../assets/plugins/lightbox2/dist/css/lightbox.css" />

Required JS File

<script src="../assets/plugins/lightbox2/dist/js/lightbox.min.js"></script>

Official Link:
http://lokeshdhakar.com/projects/lightbox2/
Bootstrap Datepicker

Required CSS File

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

Required JS File

<script src="../assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>

Official Link:
http://bootstrap-datepicker.readthedocs.io/en/latest/
Bootstrap Timepicker

Required CSS File

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

Required JS File

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

Official Link:
http://jdewit.github.io/bootstrap-timepicker/
Bootstrap Colorpicker

Required CSS File

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

Required JS File

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

Official Link:
https://farbelous.io/bootstrap-colorpicker/
Bootstrap ComboBox

Required CSS File

<link rel="stylesheet" href="../assets/plugins/@danielfarrell/bootstrap-combobox/css/bootstrap-combobox.css" />

Required JS File

<script src="../assets/plugins/@danielfarrell/bootstrap-combobox/js/bootstrap-combobox.js"></script>

Official Link:
https://github.com/danielfarrell/bootstrap-combobox
Tag It

Required CSS File

<link rel="stylesheet" href="../assets/plugins/tag-it/css/jquery.tagit.css" />

Required JS File

<script src="../assets/plugins/tag-it/js/tag-it.min.js"></script>

Official Link:
http://aehlke.github.io/tag-it/
Bootstrap Select

Required CSS File

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

Required JS File

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

Official Link:
https://developer.snapappointments.com/bootstrap-select/
Masked Input

Required JS File

<script src="../assets/plugins/jquery.maskedinput/src/jquery.maskedinput.js"></script>

Official Link:
https://github.com/excellalabs/jquery.maskedinput
jQuery Password Strength Meter for Twitter Bootstrap

Required JS File

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

Official Link:
https://github.com/ablanco/jquery.pwstrength.bootstrap
Parsley Validation

Required JS File

<script src="../assets/plugins/parsleyjs/dist/parsley.min.js"></script>

Official Link:
http://parsleyjs.org/
bootstrap Wysihtml5

Required CSS File

<link rel="stylesheet" href="../assets/plugins/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.min.css" />

Required JS File

<script src="../assets/plugins/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.all.min.js"></script>

Official Link:
https://github.com/Waxolunist/bootstrap3-wysihtml5-bower
CKEditor

Required JS File

<script src="../assets/plugins/ckeditor/ckeditor.js"></script>

Official Link:
http://ckeditor.com/
Sparkline

Required JS File

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

Official Link:
http://omnipotent.net/jquery.sparkline/
DataTables

Required CSS File

<link rel="stylesheet" href="../assets/plugins/datatables.net-bs4/css/dataTables.bootstrap4.min.css" />

Required JS File

<script src="../assets/plugins/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../assets/plugins/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>

Official Link:
http://www.datatables.net/

Extension:

- AutoFill 
<link rel="stylesheet" href="../assets/plugins/datatables.net-autofill-bs4/css/autofill.bootstrap4.min.css" />
<script src="../assets/plugins/datatables.net-autofill/js/dataTables.autofill.min.js"></script>
<script src="../assets/plugins/datatables.net-autofill-bs4/js/autofill.bootstrap4.min.js"></script>
- Buttons 
<link rel="stylesheet" href="../assets/plugins/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css" />
<script src="../assets/plugins/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="../assets/plugins/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js"></script>
<script src="../assets/plugins/datatables.net-buttons/js/buttons.colVis.min.js"></script>
<script src="../assets/plugins/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="../assets/plugins/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="../assets/plugins/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="../assets/plugins/pdfmake/build/pdfmake.min.js"></script>
<script src="../assets/plugins/pdfmake/build/vfs_fonts.js"></script>
<script src="../assets/plugins/jszip/dist/jszip.min.js"></script>
- colReorder 
<link rel="stylesheet" href="../assets/plugins/datatables.net-colreorder-bs4/css/colreorder.bootstrap4.min.css" />
<script src="../assets/plugins/datatables.net-colreorder/js/dataTables.colreorder.min.js"></script>
<script src="../assets/plugins/datatables.net-colreorder-bs4/js/colreorder.bootstrap4.min.js"></script>
- fixedColumns 
<link rel="stylesheet" href="../assets/plugins/datatables.net-fixedcolumns-bs4/css/fixedcolumns.bootstrap4.min.css" />
<script src="../assets/plugins/datatables.net-fixedcolumns/js/dataTables.fixedcolumns.min.js"></script>
<script src="../assets/plugins/datatables.net-fixedcolumns-bs4/js/fixedcolumns.bootstrap4.min.js"></script>
- fixedHeader 
<link rel="stylesheet" href="../assets/plugins/datatables.net-fixedheader-bs4/css/fixedheader.bootstrap4.min.css" />
<script src="../assets/plugins/datatables.net-fixedheader/js/dataTables.fixedheader.min.js"></script>
<script src="../assets/plugins/datatables.net-fixedheader-bs4/js/fixedheader.bootstrap4.min.js"></script>
- keyTable 
<link rel="stylesheet" href="../assets/plugins/datatables.net-keytable-bs4/css/keytable.bootstrap4.min.css" />
<script src="../assets/plugins/datatables.net-keytable/js/dataTables.keytable.min.js"></script>
<script src="../assets/plugins/datatables.net-keytable-bs4/js/keytable.bootstrap4.min.js"></script>
- Responsive 
<link rel="stylesheet" href="../assets/plugins/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" />
<script src="../assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="../assets/plugins/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>
- rowReorder 
<link rel="stylesheet" href="../assets/plugins/datatables.net-rowreorder-bs4/css/rowreorder.bootstrap4.min.css" />
<script src="../assets/plugins/datatables.net-rowreorder/js/dataTables.rowreorder.min.js"></script>
<script src="../assets/plugins/datatables.net-rowreorder-bs4/js/rowreorder.bootstrap4.min.js"></script>
- scroller 
<link rel="stylesheet" href="../assets/plugins/datatables.net-scroller-bs4/css/scroller.bootstrap4.min.css" />
<script src="../assets/plugins/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
<script src="../assets/plugins/datatables.net-scroller-bs4/js/scroller.bootstrap4.min.js"></script>
- select 
<link rel="stylesheet" href="../assets/plugins/datatables.net-select-bs4/css/select.bootstrap4.min.css" />
<script src="../assets/plugins/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="../assets/plugins/datatables.net-select-bs4/js/select.bootstrap4.min.js"></script>
Ion Range Slider

Required CSS File

<link rel="stylesheet" href="../assets/plugins/ion-rangeslider/css/ion.rangeSlider.min.css" />

Required JS File

<script src="../assets/plugins/ion-rangeslider/js/ion.rangeSlider.min.js"></script>

Official Link:
http://ionden.com/a/plugins/ion.rangeSlider/en.html
jQuery Countdown

Required CSS File

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

Required JS File

<script src="../assets/plugins/countdown/jquery.plugin.min.js"></script>
<script src="../assets/plugins/countdown/jquery.countdown.min.js"></script>

Official Link:
http://countdownjs.org/
Zurb Email Template

Official Link:
https://foundation.zurb.com/emails/email-templates.html
Switchery

Required CSS File

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

Required JS File

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

Official Link:
http://abpetkov.github.io/switchery/
Powerange

Required CSS File

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

Required JS File

<script src="../assets/plugins/abpetkov-powerange/dist/powerange.min.js"></script>

Official Link:
http://abpetkov.github.io/powerange/
X-Editable

Required CSS File

<link href="../assets/plugins/x-editable-bs4/dist/bootstrap4-editable/css/bootstrap-editable.css" rel="stylesheet" />
<link href="../assets/plugins/x-editable-bs4/dist/inputs-ext/address/address.css" rel="stylesheet" />
<link href="../assets/plugins/x-editable-bs4/dist/inputs-ext/typeaheadjs/lib/typeahead.js-bootstrap.css" rel="stylesheet" />
<link href="../assets/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="../assets/plugins/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.min.css" rel="stylesheet" />
<link href="../assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<link href="../assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css" rel="stylesheet" />
<link href="../assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" />

Required JS File

<script src="../assets/plugins/jquery-migrate/dist/jquery-migrate.min.js"></script>
<script src="../assets/plugins/x-editable-bs4/dist/bootstrap4-editable/js/bootstrap-editable.min.js"></script>
<script src="../assets/plugins/x-editable-bs4/dist/inputs-ext/address/address.js"></script>
<script src="../assets/plugins/x-editable-bs4/dist/inputs-ext/typeaheadjs/lib/typeahead.js"></script>
<script src="../assets/plugins/x-editable-bs4/dist/inputs-ext/typeaheadjs/typeaheadjs.js"></script>
<script src="../assets/plugins/x-editable-bs4/dist/inputs-ext/wysihtml5/wysihtml5.js"></script>
<script src="../assets/plugins/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.all.min.js"></script>
<script src="../assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="../assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="../assets/plugins/select2/dist/js/select2.full.min.js"></script>
<script src="../assets/plugins/moment/moment.js"></script>

Official Link:
http://vitalets.github.io/x-editable/
jQuery File Upload

Required CSS File

<link href="../assets/plugins/blueimp-gallery/css/blueimp-gallery.min.css" rel="stylesheet" />
<link href="../assets/plugins/blueimp-file-upload/css/jquery.fileupload.css" rel="stylesheet" />
<link href="../assets/plugins/blueimp-file-upload/css/jquery.fileupload-ui.css" rel="stylesheet" />

Required JS File

<script src="../assets/plugins/blueimp-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="../assets/plugins/blueimp-tmpl/js/tmpl.js"></script>
<script src="../assets/plugins/blueimp-load-image/js/load-image.all.min.js"></script>
<script src="../assets/plugins/blueimp-canvas-to-blob/js/canvas-to-blob.js"></script>
<script src="../assets/plugins/blueimp-gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="../assets/plugins/blueimp-file-upload/js/jquery.iframe-transport.js"></script>
<script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload.js"></script>
<script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload-process.js"></script>
<script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload-image.js"></script>
<script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload-audio.js"></script>
<script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload-video.js"></script>
<script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload-validate.js"></script>
<script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload-ui.js"></script>
<!--[if (gte IE 8)&(lt IE 10)]>
  <script src="../assets/plugins/jquery-file-upload/js/cors/jquery.xdr-transport.js"></script>
<![endif]-->

Official Link:
http://blueimp.github.io/jQuery-File-Upload/
jQuery-Knob

Required JS File

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

Official Link:
https://github.com/aterrien/jQuery-Knob
Simple Line Icons

Required CSS File

<link rel="stylesheet" href="../assets/plugins/simple-line-icons/css/simple-line-icons.css" />

Official Link:
https://thesabbir.github.io/simple-line-icons
Morris Chart

Required CSS File

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

Required JS File

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

Official Link:
http://morrisjs.github.io/morris.js/index.html
Superbox

Required CSS File

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

Required JS File

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

Official Link:
https://github.com/seyDoggy/superbox
Chart JS

Required JS File

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

Official Link:
http://www.chartjs.org/
JS Tree

Required CSS File

<link href="../assets/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" />

Required JS File

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

Official Link:
http://www.jstree.com/
Bootstrap Date Range Picker

Required CSS File

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

Required JS File

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

Official Link:
https://github.com/dangrossman/bootstrap-daterangepicker
Select 2

Required CSS File

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

Required JS File

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

Official Link:
https://select2.github.io/
Flag Icon

Required CSS File

<link href="../assets/plugins/flag-icon-css/css/flag-icon.min.css" rel="stylesheet" />

Official Link:
https://github.com/lipis/flag-icon-css
Bootstrap DateTime Picker

Required CSS File

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

Required JS File

<script src="../assets/plugins/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>

Official Link:
http://eonasdan.github.io/bootstrap-datetimepicker/
Nvd3

Required CSS File

<link href="../assets/plugins/nvd3/build/nv.d3.css" rel="stylesheet" />

Required JS File

<script src="../assets/plugins/d3/d3.min.js"></script>
<script src="../assets/plugins/nvd3/build/nv.d3.js"></script>

Official Link:
http://nvd3.org/
Boostrap Social

Required CSS File

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

Official Link:
https://lipis.github.io/bootstrap-social/
Intro JS

Required CSS File

<link href="../assets/plugins/intro.js/minified/introjs.min.css" rel="stylesheet" />

Required JS File

<script src="../assets/plugins/intro.js/minified/intro.min.js"></script>

Official Link:
http://introjs.com/
Bootstrap Color Palette

Required CSS File

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

Required JS File

<script src="../assets/plugins/bootstrap-colorpalette/js/bootstrap-colorpalette.js"></script>

Official Link:
https://github.com/extremeFE/bootstrap-colorpalette
jQuery Simple Color Picker

Required CSS File

<link href="../assets/plugins/jquery-simplecolorpicker/jquery.simplecolorpicker.css" rel="stylesheet" />
<link href="../assets/plugins/jquery-simplecolorpicker/jquery.simplecolorpicker-fontawesome.css" rel="stylesheet" />
<link href="../assets/plugins/jquery-simplecolorpicker/jquery.simplecolorpicker-glyphicons.css" rel="stylesheet" />

Required JS File

<script src="../assets/plugins/jquery-simplecolorpicker/jquery.simplecolorpicker.js"></script>

Official Link:
https://github.com/tkrotoff/jquery-simplecolorpicker
Bootstrap Show Password

Required JS File

<script src="../assets/plugins/bootstrap-show-password/dist/bootstrap-show-password.js"></script>

Official Link:
https://github.com/wenzhixin/bootstrap-show-password
Dropzone

Required CSS File

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

Required JS File

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

Official Link:
http://www.dropzonejs.com/
Summernote

Required CSS File

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

Required JS File

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

Official Link:
http://summernote.org/
SweetAlert

Required JS File

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

Official Link:
https://sweetalert.js.org/
clipboard.js

Required JS File

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

Official Link:
https://clipboardjs.com/
jQuery Smart Wizards

Required CSS File

<link href="../assets/plugins/smartwizard/dist/css/smart_wizard.css" rel="stylesheet" />

Required JS File

<script src="../assets/plugins/smartwizard/dist/js/jquery.smartWizard.js"></script>

Official Link:
http://techlaboratory.net/smartwizard
Highlight JS

Required JS File

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

Official Link:
https://highlightjs.org/
Apex Chart

Required JS File

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

Official Link:
https://apexcharts.com/
Lity

Required CSS File

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

Required JS File

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

Official Link:
http://sorgalla.com/lity/
Ionicons

Required CSS File

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

Official Link:
https://ionicons.com/
jQuery Mockjax

Required JS File

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

Official Link:
https://github.com/jakerella/jquery-mockjax
jQuery Migrate

Required JS File

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

Official Link:
https://github.com/jquery/jquery-migrate
AngularJS

Required JS File

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

Official Link:
http://angularjs.org/
Angular UI Router

Required JS File

<script src="../assets/plugins/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../assets/plugins/angular-ui-router/release/stateEvents.min.js"></script>

Official Link:
https://ui-router.github.io/
Angular UI Bootstrap

Required JS File

<script src="../assets/plugins/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>

Official Link:
http://angular-ui.github.io/bootstrap/
Angular oclazyload

Required JS File

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

Official Link:
https://oclazyload.readme.io

M) References - top

I've used the following images, icons or other files as listed.

jQuery Plugins

  1. Angular 8:https://angular.io/
  2. Angular JS:http://angularjs.org/
  3. Angular UI Router:https://ui-router.github.io/
  4. Angular UI Bootstrap:http://angular-ui.github.io/bootstrap/
  5. Apex Chart:https://apexcharts.com/
  6. Animate.css:http://daneden.github.io/animate.css/
  7. Bootstrap:http://getbootstrap.com/
  8. Bootstrap Datepicker:http://bootstrap-datepicker.readthedocs.io/en/latest/
  9. Bootstrap Timepicker:http://jdewit.github.io/bootstrap-timepicker/
  10. Bootstrap Colorpicker:https://farbelous.io/bootstrap-colorpicker/
  11. Bootstrap Combobox:https://github.com/danielfarrell/bootstrap-combobox
  12. Bootstrap Show Password:https://github.com/wenzhixin/bootstrap-show-password
  13. Bootstrap Color Palette:https://github.com/extremeFE/bootstrap-colorpalette
  14. Bootstrap Social:https://lipis.github.io/bootstrap-social/
  15. Bootstrap Datetimepicker:http://eonasdan.github.io/bootstrap-datetimepicker/
  16. Bootstrap Daterangepicker:https://github.com/dangrossman/bootstrap-daterangepicker
  17. Bootstrap WYSIHTML5:https://github.com/Waxolunist/bootstrap3-wysihtml5-bower
  18. Bootstrap Select:https://developer.snapappointments.com/bootstrap-select/
  19. Chart JS:http://www.chartjs.org/
  20. CKEditor:http://ckeditor.com/
  21. Clipboard:https://clipboardjs.com/
  22. DataTables:https://www.datatables.net/
  23. Dropzone:http://www.dropzonejs.com/
  24. FontAwesome:https://fontawesome.com/
  25. Fullcalendar:https://fullcalendar.io/
  26. Flot chart:http://www.flotcharts.org/
  27. Flag Icon:https://github.com/lipis/flag-icon-css
  28. Gritter:https://github.com/jboesch/Gritter
  29. Highlight.js:https://highlightjs.org/
  30. Isotope:http://isotope.metafizzy.co/
  31. Ionicons:https://ionicons.com/
  32. Ion Range Slider:http://ionden.com/a/plugins/ion.rangeSlider/en.html
  33. Intro.js:http://introjs.com/
  34. jQuery:http://jquery.com/
  35. jQuery UI:http://jqueryui.com/
  36. jQuery slimScroll:http://rocha.la/jQuery-slimScroll
  37. jQuery File Upload:http://blueimp.github.io/jQuery-File-Upload/
  38. jQuery Knob:https://github.com/aterrien/jQuery-Knob
  39. jQuery Password Strength Meter for Twitter Bootstrap:https://github.com/ablanco/jquery.pwstrength.bootstrap
  40. jVectormap:http://jvectormap.com/
  41. jQuery Smart Wizards:http://techlaboratory.net/smartwizard
  42. jQuery Simple Colorpicker:https://github.com/tkrotoff/jquery-simplecolorpicker
  43. jQuery Mockjax:https://github.com/jakerella/jquery-mockjax
  44. jQuery Migrate:https://github.com/jquery/jquery-migrate
  45. jQuery Countdown:http://countdownjs.org/
  46. Javascript Cookie:https://github.com/js-cookie/js-cookie
  47. JS Tree:http://www.jstree.com/
  48. Laravel:https://laravel.com/
  49. Lity:http://sorgalla.com/lity/
  50. Lightbox 2:http://lokeshdhakar.com/projects/lightbox2/
  51. Masked Input:https://github.com/excellalabs/jquery.maskedinput
  52. Morris Chart:http://morrisjs.github.io/morris.js/index.html
  53. Nvd3:http://nvd3.org/
  54. oclazyload:https://oclazyload.readme.io
  55. Parsley Validation:http://parsleyjs.org/
  56. Powerange:http://abpetkov.github.io/powerange/
  57. React.js:https://reactjs.org/
  58. Summernote:http://summernote.org/
  59. Superbox:https://github.com/seyDoggy/superbox
  60. SweetAlert:https://sweetalert.js.org/
  61. Select 2:https://select2.github.io/
  62. Switchery:http://abpetkov.github.io/switchery/
  63. Sparkline:http://omnipotent.net/jquery.sparkline/
  64. Simple Line Icons:https://thesabbir.github.io/simple-line-icons
  65. Tag It:http://aehlke.github.io/tag-it/
  66. Vue.js:https://vuejs.org/
  67. X-editable:http://vitalets.github.io/x-editable/
  68. Zurb Email Templates:https://foundation.zurb.com/emails/email-templates.html