Thank you for purchasing our template. We hope that you find all your questions regarding this Template answered in this Documentation as much in details as possible. However, if you still need support, do not hesitate to contact us at our support forum for this Template. If you have any questions that are beyond the scope of this help file, please feel free to email me. Thanks so much!
Dashsage – Bootstrap 5 Admin & Dashboard Template With these template formats, it's very easy to create a presence and grab someone's attention around the web page Because the template is built using HTML5, CSS3, Bootstrap 5 framework and with Sass. So please before you start working with the template take a quick look on the documentation so that you can easily built your admin & dashboard template.
If You Love Our Template Design Please don't forgot to rate it. Thank you so much! 😊
First, you must download and install node.js. NPM stands for node packaged
modules and is a way to manage development dependencies through Node.js.
Download the Node.js source code or a pre-built installer for your platform, and start developing, you can download it from https://nodejs.org/
You can check it in your terminal window using these commands node --version and
npm --version.
GulpJS is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.
main/directory,default
npm i command
(install node js)gulp command (for run
project)NPM use the package.json file and automatically install the required local dependencies listed in it.
Dependencies are: gulp, browser-sync, gulp-autoprefixer, gulp-livereload, gulp-sass, livereload
have added all necessary gulp task in gulpfile.js, for more details about plugin refer this link https://gulpjs.com/plugins/
Once you download the template, you can see a folder with several files and sub folders. You can read description of some important files in continue.
Dashsage follows a simple and easy to customize coding structure. Here is the sample for your reference:
<html lang="en" dir="ltr">
<body class="app sidebar-mini ltr light-mode" >
</body>
</html>
<body class="app sidebar-mini ltr dark-mode" >
</body>
<html lang="en" dir="rtl">
<body class="app sidebar-mini rtl light-mode" >
</body>
</html>
For the whole theme main color change,
go to your scss folder and then find _variables.scss
if you want to change primary color than you have to change --primary-rgb
variable rgb code
// Theme color variable
:root {
--primary-rgb: 13 ,156, 30;
}
if you want to change secondary color than you have to change $secondary
variable hex code
$secondary: #007F6E;
We are use gulp for the scss to css compilation
Note: First, you must download and install node.js You
can
check it in your terminal window using these commands node --version and
npm
--version.
your node version should be v18.7.0
If you want to use scss so you need to follow some steps for compilation process
npm i command (install node js) gulp command in your terminal
If you want to add new scss so you can add in _custom.scss file
because we are update template in future at that time you can
take
update template easily and use it
only one custom scss file you need to put from your side
You can change in assets/scss/_variables.scss file
| Variables set | Content |
|---|---|
$default-color: #051a1a; |
whole themplate body font color set here |
$background: #F5F5F5; |
whole themplate body background color set here |
| Variables set | Content |
|---|---|
$text-color: #F0F8FF; |
whole themplate body font color set here |
$dark-body: #1A1C23; |
whole themplate body background color set here |
You can add your Google font in assets/scss/style.scss file and replace your google font with bellow line
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
| Variables set | Content |
|---|---|
--theme-font-family: "Montserrat", sans-serif; |
set Body font family in variables.scss file |
We would really love to take this opportunity to appreciate guys whose items were helpful to us to make Bunas a really beautiful theme for our awesome users: