Sash – Node JS Bootstrap 5 Admin & Dashboard Template

Note:-

Please refer Faq's page in documentation itself for queries like customization like color ,rtl ,dark style..etc.

Dashboard
Welcome to Sash – Node JS Bootstrap 5 Admin & Dashboard Template
  • Created Date: 29/Sept/2022
  • Author: Spruko
  • Company: Spruko Technologies Private Limited
  • Support: support@spruko.com

Thank you for showing interest towards our admin template. Feel free to contact us any time. If you have any queries please contact live chat. We have a dedicated team to provide you the best support. If you want any queries please contact live chat or email : sprukotechnologies@gmail.com.

If You Love Our Template Design Please don't forgot to rate it. Thank you so much!

Introduction
Welcome to Sash – Node JS Bootstrap 5 Admin & Dashboard Template

Sash - Node JS Bootstrap 5 Admin 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 website.

If You Love Our Template Design Please don't forgot to rate it. Thank you so much! 😊

Template Description

Sash– is a Node JS Bootstrap 5 Admin & Dashboard template using modern and minimal design. It is fully flexible user-friendly and responsive. Sash admin template is powered with HTML 5, SASS, & Bootstrap 5 which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 110+ .ejs Pages & 60+ Plugins more UI elements . No Need to do hard work for this template customization. We already designed it and you can easily design your website just how you like it. Advanced Form-Elements like Date pickers, form elements are included. This template using Bootstrap 5 framework. This admin template is fully 100% Premium Admin Templates quality. This template designed for using HTML5,CSS3,Jquery. After Purchased this template you will get all ejs,css, Scss and JS Files.

It has super clean flat user interface admin Backend design, easy customizable components and widgets.The Template comes with a awesome unique design also we ensure you can easily design admin template.

it is a fully responsive layout for all type of devices. Works on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart phone devices

Once you Purchase Sash– is a Node JS Bootstrap 5 Admin & Dashboard template, you will be able to get free download of all future updates.

Template Features

110+

.ejs Pages

60+

Customized Plugins

6

Types of Charts

11

Types of Icons

Single Dashboard Horizontal and Vertical-menu Bootstrap 5 Responsive Framework
Well Commented Code 24 * 7 Professional Company Support Regular Updates
Select2 Mail Inbox File upload
Message Chat Form Elements Month & Date & Year Range Pickers
FormAdvanced Elements Data Tables Lockscreen Page
Error Page Under Construction Page Full Calendar
User Profile Invoice Page Pricing Tables
Easy to customize More Widgets Very Easy to Create your Own Site
Neat, clean and simple design W3C Validated Sweet Alert
Minimum Requirements
  • ejs >= "^3.1.7"
  • express >= ^4.18.1
  • path >= "^0.12.7"
  • http >= "^0.0.1-security"
  • express-ejs-layouts >= "^2.5.1"
  • body-parser >= "^1.20.0"
  • connect-flash >= "^0.1.1"
How to install and Run Node JS Project

If you have installed Node js on your system then please follow the below steps

1. Download and Install the Node JS from official site https://nodejs.org/

2. Then Run the command npm install

3. Then Run the command node index.js now type the url in the browser to access the project.

versions
  • Gulp : "4.0.2",
  • node : "16.17.1",
  • npm : "8.4.0",
Check out the folder structure of the Layout
        
											         

												├── views
												|   ├── layouts
												|   |   ├── landing
												|   |   |   ├── app-header.ejs
												|   |   |   ├── app-header1.ejs
												|   |   |   ├── app-sidebar.ejs
												|   |   |   ├── app-sidebar1.ejs
												|   |   |   ├── commoncss.ejs
												|   |   |   ├── commonjs.ejs
												|   |   |   ├── footer.ejs
												|   |   |   └── switcher.ejs
												|   |   ├── app-header.ejs
												|   |   ├── app-header1.ejs
												|   |   ├── app-sidebar.ejs
												|   |   ├── commoncss.ejs
												|   |   ├── commonjs.ejs
												|   |   ├── custom-mainjs.ejs
												|   |   ├── custom-switcher.ejs
												|   |   ├── customcss.ejs
												|   |   ├── customjs.ejs
												|   |   ├── footer.ejs
												|   |   ├── mainjs.ejs
												|   |   ├── modal.ejs
												|   |   ├── sidebar-right.ejs
												|   |   └── switcher.ejs
												|   ├── Layout.ejs
												|   ├── LayoutCustompage.ejs
												|   ├── LayoutCustompage1.ejs
												|   ├── LayoutLandingpage.ejs
												|   ├── Layoutswitcher.ejs
												|   └── (120+ .ejs pages)
How to Create Routers

1. By default router will check for the Layout.ejs file. To project the view.

     
												
		Ex:
			module.exports = function (app) {
				// Dashboard
				app.get('/', function (req, res) {
						res.locals = { title: 'Dashboard' };
						res.render('Dashboard/dashboard');
				});

2. If you don't want to use or having more than one layout then you can use layout: 'Your layout name'. 

     
											
		Ex:	
				// ERROR PAGES
				app.get('/404', function(req,res){
					res.render('custom-pages/ErrorPages/404', { layout: 'layoutsError' })
				})
Styles Folder Structure

1. In the assets folder you will see colors, css, iconfonts, images, js, plugins and switcher folders

        
		  
			├── public
			|   ├── assets
			|   |   ├──  colors
			|   |   ├──  css
			|   |   ├──  iconfonts
			|   |   ├──  images
			|   |   ├──  js
			|   |   ├──  plugins
			|   |   ├──  scss
			|   |   └──  switcher

2. Now you can compile or customize your styles in scss files that are present in the assets folder.

3. Once the changes made in the files in order to apply those changes to your template you need to run the gulp commands in the same terminal or command prompt that you have set your project root path.

4. After Compilation, all your .scss files are converted into .css.

Folder Structure
        
										
											├── public
											|   ├── assets
											|   |   ├── colors
											|   |   ├── css
											|   |   ├── iconfonts
											|   |   ├── images
											|   |   ├── js
											|   |   ├── plugins
											|   |   ├── scss
											|   |   └── switcher
											├── routers
											|   └── router.js
											├── views
											|   ├── layouts
											|   |   ├── landing
											|   |   |   ├── app-header.ejs
											|   |   |   ├── app-header1.ejs
											|   |   |   ├── app-sidebar.ejs
											|   |   |   ├── app-sidebar1.ejs
											|   |   |   ├── commoncss.ejs
											|   |   |   ├── commonjs.ejs
											|   |   |   ├── footer.ejs
											|   |   |   └── switcher.ejs
											|   |   ├── app-header.ejs
											|   |   ├── app-header1.ejs
											|   |   ├── app-sidebar.ejs
											|   |   ├── commoncss.ejs
											|   |   ├── commonjs.ejs
											|   |   ├── custom-mainjs.ejs
											|   |   ├── custom-switcher.ejs
											|   |   ├── customcss.ejs
											|   |   ├── customjs.ejs
											|   |   ├── footer.ejs
											|   |   ├── mainjs.ejs
											|   |   ├── modal.ejs
											|   |   ├── sidebar-right.ejs
											|   |   └── switcher.ejs
											|   ├── Apps
											|   |   └── 19.ejs(pages)
											|   ├── Bootstrap
											|   |   └── 27.ejs(pages)
											|   ├── Charts
											|   |   └── 9.ejs(pages)
											|   ├── Custompages
											|   |   └── 10.ejs(pages)
											|   ├── Dashboard
											|   |   └── 1.ejs(page)
											|   ├── E-Commerce
											|   |   └── 6.ejs(pages)
											|   ├── File-Manager
											|   |   └── 4.ejs(pages)
											|   ├── Icons
											|   |   └── 11.ejs(pages)
											|   ├── LandingPage
											|   |   └── 1.ejs(page)
											|   ├── Maps
											|   |   └── 3.ejs(pages)
											|   ├── Pages
											|   |   └── 31.ejs(pages)
											|   ├── Layout.ejs
											|   ├── LayoutCustompage.ejs
											|   ├── LayoutCustompage1.ejs
											|   ├── LayoutLandingpage.ejs
											|   ├── layoutsSwitcher.ejs
											|   └── Layoutswitcher.ejs
											├── gulpfile.js
											├── index.ejs
											├── package.json
											└── package-lock.json
SCSS & CSS

Sash comes with power of SCSS. The css files can be generated from scss by simply following below steps:

  • Gulp

    Gulp is a JavaScipt streaming task runner. It automate many development tasks. Using gulp you can perform tasks like running a local server, minifying code, compilation, Browser sync ,optimizing images, etc... We are using gulp which allows to easily compilation of scss to csss. You can read it more about it here.

Prerequisites

Please follow below steps to install and setup all prerequisites:

  • Nodejs

    Make sure to have the Node.js installed & running in your computer. If you have already installed nodejs on your computer, you can skip this step, otherwise install nodejs on your computer,

    Note : If you are using the latest version of Node JS or want to install and use the latest version, click here and install all the dependencies manually that are given below in command prompt.

  • Gulp

    Make sure to have the Gulp installed & running in your computer. If you have already installed gulp on your computer, you can skip this step. In order to install, just run command npm install -g gulp from your terminal.

  • After Completion of gulp Install. open gulpfile.js And install the "Declaration of gulp variables" in your command promt. In order to install, just run command
    npm install gulp,
    npm install gulp-sass,
    npm install gulp-postcss,
    npm install autoprefixer,
    npm install gulp-sourcemaps,
    npm install browser-sync,
    npm install gulp-cssbeautify,
    npm install gulp-beautify from your terminal.

    Make sure to have all above prerequisites installed & running in your computer. If you want to install more variables for your template, just declare the variables in gulpfile.js after that run in command promt

Installation

To setup, follow below mentioned steps:

  • Install Prerequisites

    Make sure to have all above prerequisites installed & running in your computer

  • Install Dependencies

    Open your terminal, go to your folder and enter the command npm install. This would install all required dependencies in node_modules folder.

After you finished with above steps, you can run the command to compile scss into css: gulp

Note:- please ensure that you have installed all nodemodules requried to run gulp tasks .

SCSS & CSS
GULP COMMANDS
Command Description
gulp --tasks In this template gulp --tasks command is for list all the tasks defined in gulp file .
gulp watch In this template gulp watch command is for what ever changes made in scss folder, will watch and run an appropriate task. All the CSS files under public/assets/css/ folder will be watched and upon changes made to these files, the styles task will be executed.
gulp dark In this template gulp dark command is for what ever changes are made in dark-style.scss will be watched and the changes automatically updated in dark-style.css file in css folder.
gulp skins In this template gulp skins command is for what ever changes are made in skin-modes.scss will be watched and the changes automatically updated in skin-modes.css file in css folder.
gulp color In this template gulp color command is for what ever changes are made in color1.scss will be watched and the changes automatically updated in color1.css file in css folder.
gulp transparent In this template gulp transparent command is for what ever changes are made in transparent-style.scss will be watched and the changes automatically updated in transparent-style.css file in css folder.
SWITCHER?

If you want to add switcher to your template follow the below process.

NOTE:The switcher is different for custom pages, if you want to add switcher to the custom pages then follow the process.(Skip this process if this is not your requirement).

Chart color

NOTE: If you want to change your chart colors according to the theme colors, then follow the process.(Skip this process if this is not your requirement).

How to apply colors to the new chart?

Open themecolor.js (root path: public/assets/js/themecolor.js) and paste the below code inside of the function names() function of (// chart colors) section.

     
				
		
			export function names() {
		
				Ex:
					if(document.querySelector('#chartId1') !== null){
						myChart1();
					}
		
					if(document.querySelector('#chartId2') !== null){
						myChart2();
					}
  • Here (#chartId1) is nothing but, the id that you used for your particular chart.
  • Here myChart1(); is nothing but a function that you used for your particular chart.
  • Open empty.js file and add( myVarVal ) variable in a place, where you want to change the colors of your chart according to the primary color of the template.
  • NOTE: For more understanding please refer below code which we used in index1.js file present in root path: "public/assets/js/index1.js".
    • colors: [ myVarVal || "#38cab3","#e4e7ed"],
  • Here myVarVal is nothing but a variable name, if you use this variable anywhere then the color of that particular place will change according to theme color
FAQS
General Style

How to Change Font Style ?

Step 1:

Go To _fonts.scss (public/assets/scss/custom/fonts/_fonts.scss )

if you want to change another font-family Go to the site Google Fonts And Select One font Family and import In to style.css file

How to Select font Family

Example:

Step 2:

And paste Your Selected font-family in _fonts.scss

Example:
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");

Step 3:

And add the Your Selected font-family in _bootstrap-styles.scss(public/assets/scss/bootstrap/_bootstrap-styles.scss)

Example:

																body {
																	margin: 0;
																	font-family: "Roboto", sans-serif;
																	font-size: 14px;
																	font-weight: 400;
																	line-height: 1.5;
																	color: $default-color;
																	text-align: left;
																	background-color: $background;
																}

Note : After Changing font you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.

How to change Menu icons ?

By default menu icons are feather icons if you want to change icons please follow below steps
Step 1 :

To change Menu icons, Rootpath views/layouts/app-sidebar.ejsopen app-sidebar.ejs in that section you will find feather icons of menu in i tag, there you can replace previous icon with your icon. Example as shown in below

How to Change Logo ?

Go To "public/assets/images/brand" folder and replace your logo with Previous Logos within in image size. note: Please don't increase logo sizes. Replace your logo within given image size. otherwise the logo will not fit in particular place it disturbs the template design.

How to change Date Format ?

Step 1 :

To change Date Format, you have to add below js (dateFormat: "yy-mm-dd") in respective folder (public/assets/js/form-elements.js)
Font-use

Google fonts are used in the template. They are as follows: Google Fonts

All Images are used: Pexels.com

thank you!

Copyright © Sash. Designed with by Spruko All rights reserved.