DashLite Documentation

DashLite is a modern and user friendly dashboard template with individual concepts.

Introduction

DashLite, a modern and clean premium quality dashboard template based on Bootstrap 4 using concept driven and minimal design. Its well optimized with mobile first responsive approach. Dashlite built using SASS preprocessor, HTML5, CSS3 and help of usefull jQuery plugins. You can use this template for any kind of dashboard project. See the demo.


File And Floders
  |--documentations/
  |--dashLite-template/
  |--|--src/
  |--|--|--assets/
  |--|--|--css/
  |--|--|--fonts/
  |--|--|--icons/
  |--|--|--js/
  |--|--html/
  |--|--|--covid/
  |--|--|--crypto/
  |--|--|--general/
  |--|--|--invest/
  |--|--|--subscription/
  |--|--|--index.html
  |--|--images/
  |--|--|--avatar/
  |--|--|--gfx/
  |--|--|--icons/
  |--|--|--slides/
  |--|--|--thumb/
  |--|--|--favicon.png
  |--|--|--logo.png
  |--|--js/
  |--|--|--charts/
  |--|--|--apps/
  |--|--|--libs/
  |--|--|--bundle.js
  |--|--|--scripts.js
  |--|--scss/
  |--|--|--core/
  |--|--|--crypto/
  |--|--|--extend/
  |--|--|--global/
  |--|--|--invest/
  |--|--|--subscription/
  |--|--|--vendors/
  |--|--|--skins/
  |--|--|--_dashlite_veriables.scss
  |--|--|--dashlite.scss
  |--|--|--theme.scss
  |--|--gulpfile.js
  |--|--package.json

Quick Start - install
  • - Download the latest theme source from themeforest.
  • - Download and install Node.js from nodejs.org/en/download/
  • - Start command prompt window or terminal and change directory to [dashLite-template] folder and run flowing command to install all the "dependencies and devDependencies". It could take few minutes to complete installation.
    npm install
    
  • - Then install gulp gulp-cli if you don't already have it installed.
    npm install --global gulp-cli
    
  • - Then run gulp build command to compile all the assets(sass, js, media) and copy HTML templates to a new folder called [dist] in same directory.
    gulp build
    
  • - Now you can run gulp develop and keep editing in src folder, it will keep running watch command to compile you edit.
    gulp develop
    
For more information about the Gulp build tool, click here.

Scripts
Js File List
<!-- Bundles of Included plugins -->
<script src="assets/js/bundle.js"></script>
<!-- Init Code for plugins and custom sctipts -->
<script src="assets/js/scripts.js"></script>
<!-- Chart init For General Dashboard -->
<script src="assets/js/charts/gd-general.js"></script>
<script src="assets/js/charts/gd-analytics.js"></script>
<script src="assets/js/charts/gd-invest.js"></script>
<!-- Chart init For Crypto Panel -->
<script src="assets/js/charts/chart-crypto.js"></script>
<!-- Chart init For Invest Panel -->
<script src="assets/js/charts/chart-invest.js"></script>
<!-- Example code for sweetalert2 -->
<script src="assets/js/example-sweetalert.js"></script>
<!-- Example code for toastr -->
<script src="assets/js/example-toastr.js"></script>
<!-- Example code for chart -->
<script src="assets/js/example-chart.js"></script>

Styles
CSS File List
<!-- All Generated styles form dashlite -->
<link rel="stylesheet" href="assets/css/dashlite.css">
<!-- This file is for you to include your own styles -->
<link rel="stylesheet" href="assets/css/theme.css">

<!-- Premade Skin style -->
<link rel="stylesheet" href="assets/css/skins/theme-{blue|red|...}.css">

Theming
Header / Sidebar styles.

Use .is-light for white background, .is-dark for dark background .is-theme for theme dark background, remove any of these class for light background, with .nk-sidebar, .nk-header, .nk-apps-sidebar

Example
<div class="nk-sidebar is-dark"></div>
<div class="nk-header is-light"></div>
<div class="nk-apps-sidebar is-theme"></div>
Main UI.

Use .ui-clean for full white background and card border style, .ui-shady, .ui-softy for soft light background with variant shadow, remove any of these class for soft light background and white background with bordered card, with .nk-sidebar, .nk-header, .nk-apps-sidebar

Example
<body class="nk-body ui-clean"></body>
Apply pre made color preset.

Rename your desired theme-{blue|green|purple}.css from assets/css/skins folder to theme.css, then replace it with assets/css/theme.css