DashLite DashLite

View Dashboard

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 5 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
  |--docs/
  |--dashLite-template/
  |--|--demo1
  |--|--|--src/
  |--|--|--|--assets/
  |--|--|--|--|--fonts/
  |--|--|--|--html/
  |--|--|--|--|--components/
  |--|--|--|--|--pages/
  |--|--|--|--|--index.html
  |--|--|--|--images/
  |--|--|--|--|--avatar/
  |--|--|--|--|--gfx/
  |--|--|--|--|--icons/
  |--|--|--|--|--favicon.png
  |--|--|--|--|--logo.png
  |--|--|--|--js/
  |--|--|--|--|--charts/
  |--|--|--|--|--apps/
  |--|--|--|--|--libs/
  |--|--|--|--|--bundle.js
  |--|--|--|--|--scripts.js
  |--|--|--|--scss/
  |--|--|--|--|--core/
  |--|--|--|--|--extend/
  |--|--|--|--|--global/
  |--|--|--|--|--vendors/
  |--|--|--|--|--skins/
  |--|--|--|--|--_dashlite_veriables.scss
  |--|--|--|--|--dashlite.scss
  |--|--|--|--|--theme.scss
  |--|--|--gulpfile.js
  |--|--|--package.json
  |--|--demo2
  |--|--|--src/
  |--|--demo3
  |--|--|--src/
  |--|--demo4
  |--|--|--src/
  | More
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/demo{1|2|3|4|...}] folder and run following 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-default.js"></script>
<script src="assets/js/charts/gd-analytics.js"></script>
<script src="assets/js/charts/gd-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>
<!-- Code for Dual Listbox -->
<script src="assets/js/libs/dual-listbox.js"></script>
<script src="assets/js/example-listbox.js"></script>
<!-- Code for Tree -->
<script src="assets/js/libs/jstree.js"></script>
<script src="assets/js/example-tree.js"></script>
<!-- Plugins for Rich Text Editor -->
<script src="assets/js/libs/editors/quill.js"></script>
<script src="assets/js/libs/editors/summernote.js"></script>
<script src="assets/js/libs/editors/tinymce.js"></script>
<!-- Init Code for Rich Text Editor -->
<script src="assets/js/editors.js"></script>
<!-- Export plugins for Datatable -->
<script src="assets/js/libs/datatable-btns.js"></script>
<!-- Code for FullCalendar -->
<script src="assets/js/libs/fullcalendar.js"></script>
<script src="assets/js/apps/calendar.js"></script>
<!-- Code for Kanban Board -->
<script src="assets/js/libs/jkanban.js"></script>
<script src="assets/js/apps/kanban.js"></script>
<!-- Plugin for jquery Vector Maps -->
<script src="assets/js/libs/jqvmap.js"></script>
<!-- Plugin for Tag styled input -->
<script src="assets/js/libs/tagify.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">
Use Widgets from other demo

If you want to use widgets one demo from another demo, example you want to use all the invest (demo6 layout) widget into demo5 (crypto) layout. Then just copy related css codes and markup from demo6 to demo5.

Also all the concept based css code are found separate folder as /scss/crypto, /scss/subscription or /scss/invest etc. You can easily copy paste and reuse any where in any demo layout.

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 the classes .nk-sidebar, .nk-header, .nk-apps-sidebar.

Please note: This style only works on light theme mode.

Example
<div class="nk-sidebar is-dark"></div>
<div class="nk-header is-light"></div>
<div class="nk-apps-sidebar is-theme"></div>
Dark Theme Mode.

Use .dark-mode class & theme="dark" attribute instead of light-mode in body tag for the dark theme mode enable. Also you can use .dark-switch class with <a> link to toggle dark/light mode using jquery. Example code found in profile menu.

Please note: Header and Sidebar style (is-dark, is-light & is-theme style) will forcely override in dark mode theme.

Please note: Right now we don't have Dark Mode support for Covid demo layout.
Example
// For Dark Mode
<body class="nk-body dark-mode" theme="dark"></body>

// For Light Mode
<body class="nk-body light-mode"></body>

// Class toggle using jQuery 
<a class="dark-switch" href="#"><em class="icon ni ni-moon"></em></a>
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-body / body tag.

Example
<body class="nk-body ui-clean"></body>
Main UI Class Supported based on Demo
Demo Name Class
Demo 1 .ui-{default|clean|shady|softy}
Demo 2 .ui-{default|bordered}
Demo 3 .ui-{default|clean|shady}
Demo 4 .ui-{default|softy}
Demo 5 .ui-{default|shady}
Demo 6 .ui-{default|clean|shady|softy}
Demo 7 .ui-{default|softy}
Demo 8 .ui-{default|clean|softy}
Demo 9 .ui-{default}
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

RTL Support
Enable RTL.

To enable RTL, use dir="rtl" attribute and add has-rtl class on body tag. After that linking (rtl) stylesheet as simply change stylesheet from /assets/css/dashlite.css to /assets/css/dashlite.rtl.css in your html markup.

Also if you want to use rich editors (available in template) then you also need to replace rtl versions of that editor files. For example, if you add tinymce then you need to replace /css/editors/tinymce.css with /css/editors/tinymce.rtl.css similar as above.

Please note: Right now we don't have RTL support for Covid demo layout.
Update to version 3.0.0
For update bootstrap 5

We're introducing new version of bootstrap (v5 latest) for Dashlite. We updated Markup Structure and utility classes according to migration guide form Bootstrap Docs .

If you are using any version before v3, update is not recommanded. Still if you need to update then follow Bootstrap5 migration guide.
Class Update for Bootstrap 5

Select2 - Modified class name as .form-select to .js-select2.

Note : Previously we used .form-select for select2 initialize. As bootstrap changes class name for select as .custom-select to .form-select. As a reason had to changed for select2 as .form-select to .js-select2.