: HotelAir : Hotel Management Admin Dashboard Template

Getting Started

HotelAir 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 HotelAir work.

Grunt File & Installation

Installing Grunt: Run npm install grunt --save-dev command from your teminal to install grunt within your project.
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`.
Grunt JSHint: Run grunt jshint command from your project directory. It will checks all *.js files under `assets/js/filename` for common syntax or coding errors using the JSHint utility.
Grunt Sprite: Run grunt sprite command from your project directory.
Further help: To get more help on the grunt checkout Grunt
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

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

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: hotelair/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));
        }

HotelAir 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.

Widgets

Charts

Plugin (NPM)