Set Theme Color
Icon Border Stroke
Layout Section Light/Dark
More App Settings

Documentation

Getting Started

DashBanker is carefully well thought UI frame work that is built on top of Bootstrap 5, This part of the doc will help you to quickly start your project and will you a basic idea about how DashBanker work.

Grunt File & Installation

  1. Installing Grunt: Run npm install grunt --save-dev command from your teminal to install grunt within your project.
  2. Grunt Sass: Run grunt sass command from your project directory. It will compile SASS to CSS for the project. This will read the file `scss/filename.scss` and output a plain-css file to `assets/css/filename.css`.
  3. Grunt Uglify: Run the grunt uglify command from your project directory. It will compile your JavaScript bundle into a single JavaScript file for the project. This command will read the file `bundle/filename.js` and output the file to `assets/js/filename.js`.
  4. Note: However, any SASS code you write must be able compile via Grunt as well.It will generate pre-compiled javascript templates. Reads all the *.html files from `assets/js/filename` and outputs `assets/js/filename.templates.js`. Template.js will contains code of UI design and will be change each time you build solution through above command.

Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting. It uses a command-line interface to run custom tasks defined in a file.

Project structure

  • html
  • node_modules ( NPM dependencies (by default the folder is not included) npm installs dependencies. )
    • assets
      • bundles
      • css
      • fonts
      • images
      • js
      • scss
      • vendor - Third party plugins
    • docs
    • index.html
    • More HTML pages
  • .gitignore
  • gruntfile.js
  • package.json

Layout Setting Class

Enable Light & Dark Mode! 
<html lang="en" data-bs-theme="light">
Change Attribute in html tage light, dark
Theme Color Setting 
<body data-theme="theme-PurpleHeart">
Change class in body tag theme-ValenciaRed, theme-SunOrange, theme-AppleGreen,theme-CeruleanBlue,theme-Mariner,theme-PurpleHeart,theme-FrenchRose

Theme Configurations

Theme color scss file path: dashbanker/src/assets/global/_themes.scss you can change as per your project/client requirements.

Theme light/dark version you can changes in HTML tage data-bs-theme="light" , data-bs-theme="dark"

  • .bg-primary
  • .bg-accent
  • .theme-color1
  • .theme-color2
  • .theme-color3
  • .theme-color4
  • .theme-color5
  • .theme-color6
// Theme color variable
                                        [data-theme="theme-ValenciaRed"] {
                                
                                            --primary-color: 		#D63B38;
                                            --accent-color: 		#8467cb;
                                            
                                            --primary-rgb: 			214, 59, 56;
                                            --accent-rgb: 			132, 103, 203;
                                
                                            --theme-color1:	 		#da3164;
                                            --theme-color2: 		#ce3c8d;
                                            --theme-color3: 		#b152b1;
                                            --theme-color4: 		#8467cb;
                                            --theme-color5: 		#9aa9e0;
                                            --theme-color6: 		#314674;
                                
                                            --primary-gradient: linear-gradient(-45deg, var(--primary-color), var(--secondary-color));
                                        }
                                        [data-theme="theme-SunOrange"] {
                                
                                            --primary-color: 		#F7A614;
                                            --accent-color: 		#006b60;
                                
                                            --primary-rgb: 			247, 166, 20;
                                            --accent-rgb: 			0, 107, 96;
                                
                                            --theme-color1:	 		#F7A614;
                                            --theme-color2: 		#c25450;
                                            --theme-color3: 		#ff8982;
                                            --theme-color4: 		#9e7c50;
                                            --theme-color5: 		#ffc0b7;
                                            --theme-color6: 		#2f4858;
                                
                                            --primary-gradient: linear-gradient(-45deg, var(--primary-color), var(--secondary-color));
                                        }
                                        [data-theme="theme-AppleGreen"] {
                                            
                                            --primary-color: 		#5BC43A;
                                            --accent-color: 		#006b5f;
                                
                                            --primary-rgb: 			91, 196, 58;
                                            --accent-rgb: 			0, 107, 95;
                                
                                            --theme-color1:	 		#00b864;
                                            --theme-color2: 		#0097aa;
                                            --theme-color3: 		#0084bd;
                                            --theme-color4: 		#004e72;
                                            --theme-color5: 		#96b0b7;
                                            --theme-color6: 		#2f4858;
                                
                                            --primary-gradient: linear-gradient(-45deg, var(--primary-color), var(--secondary-color));
                                        }
                                        [data-theme="theme-CeruleanBlue"] {
                                
                                            --primary-color: 		#00B8D6;
                                            --accent-color: 		#00a686;
                                
                                            --primary-rgb: 			0, 184, 214;
                                            --accent-rgb: 			0, 166, 134;
                                
                                            --theme-color1:	 		#00b8d6;
                                            --theme-color2: 		#8966a4;
                                            --theme-color3: 		#bf9adb;
                                            --theme-color4: 		#b2a8b8;
                                            --theme-color5: 		#96b0b7;
                                            --theme-color6: 		#00a686;
                                
                                            --primary-gradient: linear-gradient(-45deg, var(--primary-color), var(--secondary-color));
                                        }
                                        [data-theme="theme-Mariner"] {
                                
                                            --primary-color: 		#0066FE;
                                            --accent-color: 		#DEAD00;
                                
                                            --primary-rgb: 			0, 102, 254;
                                            --accent-rgb: 			222, 173, 0;
                                
                                            --theme-color1:	 		#2561BE;
                                            --theme-color2: 		#d3a518;
                                            --theme-color3: 		#f26a7f;
                                            --theme-color4: 		#002878;
                                            --theme-color5: 		#858fbb;
                                            --theme-color6: 		#5b9591;
                                
                                            --primary-gradient: linear-gradient(-45deg, var(--primary-color), var(--secondary-color));
                                        }
                                        [data-theme="theme-PurpleHeart"] {
                                            --primary-color: 	#4C3575;
                                            --accent-color: 	#e05170;
                                
                                            --primary-rgb: 		76, 53, 117;
                                            --accent-rgb: 		224, 81, 112;
                                
                                            --theme-color1:	 	#4C3575;
                                            --theme-color2: 	#354175;
                                            --theme-color3: 	#98427e;
                                            --theme-color4: 	#d55a75;
                                            --theme-color5: 	#fb8665;
                                            --theme-color6: 	#d19a8b;
                                
                                            --primary-gradient: linear-gradient(145deg, var(--primary-color), var(--accent-color));
                                
                                            .page-header .header-right>li > a,
                                            .page-header .header-right>li > div > a{
                                                color: var(--white-color) !important;
                                            }
                                        }
                                        [data-theme="theme-FrenchRose"] {
                                
                                            --primary-color: 		#EB5393;
                                            --accent-color: 		#4d74c9;
                                
                                            --primary-rgb: 			235, 83, 147;
                                            --accent-rgb: 			77, 116, 201;
                                
                                            --theme-color1:	 		#c82f75;
                                            --theme-color2: 		#4d74c9;
                                            --theme-color3: 		#5bbab5;
                                            --theme-color4: 		#b861c2;
                                            --theme-color5: 		#ddd7c6;
                                            --theme-color6: 		#765a76;
                                
                                            --primary-gradient: linear-gradient(-45deg, var(--primary-color), var(--secondary-color));
                                        }

DashBanker Template References

Google font https://fonts.google.com/
Bootstrap https://v5.getbootstrap.com/
Jquery https://jquery.com/
SASS https://sass-lang.com/
Grunt https://gruntjs.com/
NPM https://www.npmjs.com/
Tabler Icon https://tabler.io/
Datatables https://datatables.net/
Apex Charts https://apexcharts.com/
Peity Chart https://benpickles.github.io/peity/
Fullcalendar https://fullcalendar.io/
Pexels https://www.pexels.com/
Tiny slider https://ganlanyuan.github.io/tiny-slider/demo/
Flatpickr https://flatpickr.js.org/
Tagify https://yaireo.github.io/tagify/
Summernote https://summernote.org/

Thank you!

All the important stuff – compiling the source, file structure, build tools, file includes – is documented here, but should you have any questions, always feel free to reach out to pixelwibes@gmail.com

If you really like our work, design, performance and support then please don't forgot to rate us on Themeforest, it really motivate us to provide something better.