Documentation

Label admin template is a sophisticated responsive admin dashboard template made on top of Bootstrap 4. It is packed with highly customizable Bootstrap components that help web development easy and faster than ever with the advanced automated Gulp workflow.

File Structure

Label dashboard comes with a simple and logically organized file structure for easy to understand and maintainability.

            
  Label
  ├── gulp-tasks
  ├── src
  │ └── Assets
  │ │ └── css
  │ │ └── fonts
  │ │ └── images
  │ │ └── js
  │ │ └── scss
  │ │ └── vendors
  │ └── Demo_1
  │ │ └── Pages
  │ │ └── Partials
  │ │ └── Index.html
  │ └── Docs
  │ │ └── docs.html
  ├── CHANGELOG.md
  ├── gulpfile.js
  ├── package.json
Name Description
preview This is the dist folder which contains the final production-ready minified compiled files.
gulp-tasks This folder contains some .js files for performing various gulp tasks.
src In this folder you'll find the template's source code, if you want to customize the template to fit your specific needs, this is the right place to start with.
gulpfile.js The Gulpfile for gulp to execute. All the gulp task inside the 'gulp-tasks' directory will be referenced in this file.
package.json This is the npm manifest file in which we define what are going to be our workflow dependencies and our main tasks.

Basic HTML Structure

Label dashboard follows a simple basic structure that is easy to use.

            
  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>Label - Premium Responsive Bootstrap 4 Admin & Dashboard Template</title>
      <!-- plugins:css -->
      <link rel="stylesheet" href="vendors/iconfonts/mdi/css/materialdesignicons.css">
      <link rel="stylesheet" href="vendors/css/vendor.addons.css">
      <!-- endinject -->
      <!-- vendor css for this page -->
      <!-- End vendor css for this page -->
      <!-- inject:css -->
      <link rel="stylesheet" href="css/style.css">
      <!-- endinject -->
      <link rel="shortcut icon" href="images/favicon.ico" />
  </head>
  
  <body class="header-fixed">
      <nav class="t-header">
          <!-- Navbar Header-->
      </nav>
      <div class="page-body">
          <div class="sidebar">
              <!-- Sidebar Content-->
          </div>
          <div class="page-content-wrapper">
              <div class="page-content-wrapper-inner">
                  <div class="viewport-header">
                      <!-- Page Header Content -->
                  </div>
                  <div class="content-viewport">
                      <!-- Page contents here -->
                  </div>
              </div>
              <!-- content viewport ends -->
              <footer class="footer">
                  <!-- Footer Element-->
              </footer>
          </div>
          <!-- page content ends -->
      </div>
      <!--page body ends -->
      <!-- plugins:js -->
      <script src="vendors/js/core.js"></script>
      <script src="vendors/js/vendor.addons.js"></script>
      <!-- endinject -->
      <!-- build:js -->
      <script src="js/template.js"></script>
      <!-- endbuild -->
  </body>
  
  </html>

Installation

We are using gulp which allows having complete automation to build flow. In case if you don't know - Gulp is a gulp is a toolkit for automating painful or time-consuming tasks in development workflow, so you can stop messing around and build something. You can read it more about it here. Please follow the below steps to install and setup all prerequisites:

  1. Install nodejs (v9.11.2) and gulp (v3.9.1)
    If you have already installed nodejs and gulp, you can skip this step.
    • Make sure to have the Node.js installed & running on your computer. If you are using the latest version (10x), you might run into some issue based your operating system. We would encourage to install and use the specified version only.
    • Open your terminal and install gulp globally. You can use command npm install -g gulp@3.9.1
  2. Install dependencies
    Go to your folder and enter the command npm install. This would install all dependencies in node_modules folder.

After you finished with above two steps, you can run the automated tasks (as described below) to build the application.

Command Description
gulp start Watch for file changes and compile scss files. The browser will automatically reload when the changes are made.
gulp inject Inject partial files such as '_navbar.html', '_sidebar.html etc' from the partials folder to the pages.

Customization

You can customize various elements including navbar, sidebar, form elements etc by simply editing Sass files in 'scss' directory or removing unnecessary components from style.scss main file.

Make sure that the gulp start task is running in the terminal to compile scss files when you make changes. Once the changes are made, the scss file will be compiled and the changes will be reflected in the browser after an automatic browser reload.

Credits

Name Reference
Apex Charts https://apexcharts.com/
Bootstrap http://getbootstrap.com/
Chart.js https://www.chartjs.org/
Flag Icons http://flag-icon-css.lip.is/
FontAwesome https://fontawesome.com/
Jquery https://jquery.com/
MDI Icons https://materialdesignicons.com/
Popper Js https://popper.js.org/