- Item Name : CRMS - Sales, CRM, Accounts Admin Bootstrap Template (HTML + Laravel + Vue + React + Angular + Nodejs + Framework7)
- Published : 06 August 2020
- Item Version : v2.2.7
- Author : Dreams Technologies
- Support via email : [email protected]
- Support via Themeforest : Take me there
CRMS - Sales, CRM, Accounts Admin Bootstrap Template
CRMS is a admin template for Human Resource Management. CRMS is a well-designed fully responsive admin template that makes the web administration process easier than ever. It is equipped with various functionalities and is platform compatible.
Key Features:
Creative Design
Fully Responsive
Color & Fonts is easily changed
W3C Validated Code
Build with Bootstrap v5.x used
Compatible Browsers: IE8+, Firefox, Safari, Opera, Chrome
Dark, Light with RTL Supported
Various Sidebar Colours
Json data implemented in tables
Tabler Icons used
Dark Mode
Multiple Layouts
Easy to Customize with SCSS Variables
Featured Applications:
Calendar
Chat
To Do
Notes
File Manager
Social Feed
Kanban
Invoices
Email
Call
CRMS is powered by the robust Bootstrap Framework, the most trusted admin toolkit for developing responsive and mobile-first websites.
Below is sample coding structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>Crms - Bootstrap Admin HTML Template</title>
<link rel="shortcut icon" href="assets/img/favicon.png">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
<link rel="stylesheet" href="assets/plugins/select2/css/select2.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="main-wrapper">
<div class="header">
</div>
<div class="sidebar">
</div>
<div class="content container-fluid">
</div>
</div>
</div>
<script src="assets/js/jquery-3.7.1.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/plugins/simplebar/simplebar.min.js"></script>
<script src="assets/plugins/select2/js/select2.min.js"></script>
<script src="assets/plugins/datatables/js/jquery.dataTables.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
You can change the logo or replace it from img folder or you can edit it from HTML file.
<script src="assets/js/jquery-3.7.1.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="assets/plugins/select2/js/select2.min.js"></script>
<script src="assets/js/jquery.dataTables.min.js"></script>
<script src="assets/js/script.js"></script>
Step 1:
After unzipping Template Files, you will find our product Crms->HTML(Source code)
Step 2:
Open HTML folder, copy all files and paste in your localhost or server root folder
Step 3:
Now you can run this Template in any web browser from your PC or Laptop
localhost/Crms/index.html or www.example.com/index.html
Step 1:
Install Node.js
Step 2:
Initialize NPM
Step 3:
Install Node-Sass
Step 4:
Write Node-sass Command (sass --watch main.scss:../css/style.css)
Step 5:
Run the Script
Install Node.js
Node.js is a run-time environment which includes everything you need to execute a program written in JavaScript. It’s used for running scripts on the server to render content before it is delivered to a web browser. In a web browser, navigate to https://nodejs.org/en/download/..
Update Your NPM
Npm is the package for JavaScript and the world's largest software registry. Npm is a separate project from node.js, and tends to update more drequently. As a result, even if uou've just downloaded Node.js (and therefore npm), you'll probably need to update your npm.
npm install --global npm@latestInstall all dependencies
If you want to update or develop this theme, you need to install all dependencies by running:
npm installInstall Sass
If you use Node.js, you can also install Sass using npm by running
npm install -g sasssass --watch main.scss:../css/style.css
Quick customization of layout using scss.
You can make changes in the assets/scss/variables.scss file.
You can manage those colors to update the color theme.
$white: #fff; $gray-100: #CDCDCD; $gray-200: #B5B5B5; $gray-300: #9D9D9D; $gray-400: #868787; $gray-500: #707070; $gray-600: #5A5B5B; $gray-700: #454646; $gray-800: #323333; $gray-900: #1F2020; $black: #000;
.settings-sidebar {
a {
color: var(--#{$prefix}gray-500);
&:hover {
color: var(--#{$prefix}primary);
}
}
}This file allows you to define and update core theme values such as:
Colors – Easily change primary, secondary, background, text, and other utility colors.
Font Sizes & Font Families – Set global typography and scale for headings, body text, and UI elements.
Spacing (Padding & Margin) – Adjust default paddings, margins, and gutters across components.
Bootstrap Component Styles – Customize the appearance of elements like buttons, dropdowns, modals, forms, and alerts by overriding Bootstrap’s SCSS variables.
By editing this file, you can maintain a consistent design system across the entire project without modifying individual components manually.
You can set the default layout in the html tag.
<html data-layout="default" data-topbar="white" data-color="primary" data-sidebar="light">
data-layout="mini" - To set default layout as Mini Sidebar
data-layout="hoverview" - To set default layout as Hover View - Sidebar on Hover Show Menu
data-layout="hidden" - To set default layout as Hidden
data-layout="full-width" - To set default layout as Full Width
data-bs-theme="light" - To set Light layout mode.
data-bs-theme="dark" - To set Dark layout mode.
data-sidebar="topbar1", data-sidebar="topbar2" - To set the Topabar-1, Topbar-2, .. colors of Topbar.
data-topbar="white" - To set the Light color of Topbar.
data-sidebar="light" - To set the Light color of left Sidebar.
data-sidebar="sidebar1", data-sidebar="sidebar2" - To set the Sidebar-1, Sidebar-2,.. colors of left Sidebar.
You can create Header, sidebar variables in assets/scss/variables-custom.scss the file.
// Menu
$menu-bg: var(--#{$prefix}menu-bg);
$menu-title-color: var(--#{$prefix}menu-title-color);
$menu-item-heading: var(--#{$prefix}menu-item-heading);
$menu-item-color: var(--#{$prefix}menu-item-color);
$menu-item-hover-color: var(--#{$prefix}menu-item-hover-color);
$menu-item-hover-bg: var(--#{$prefix}menu-item-hover-bg);
You can set Header, sidebar colors in assets/scss/theme-variables.scss the file.
:root {
--#{$prefix}menu-bg: #{$white};
--#{$prefix}menu-icon-bg: #{$light};
--#{$prefix}menu-title-color: #{$gray-500};
--#{$prefix}menu-item-heading: #{$gray-900};
--#{$prefix}menu-item-color: #{$gray-500};
--#{$prefix}menu-item-hover-color: #{var(--#{$prefix}primary)};
--#{$prefix}menu-item-hover-bg: #{rgba(var(--#{$prefix}primary-rgb), 0.1)};
&[data-sidebar="sidebar4"] {
--#{$prefix}menu-bg: #{$primary};
--#{$prefix}menu-item-color: #{$gray-200};
}
&[data-topbar="white"] {
--#{$prefix}topbar-item-color: #{$gray-900};
--#{$prefix}topbar-item-hover-color: #{var(--#{$prefix}primary)};
--#{$prefix}topbar-item-hover-bg: #{$light};
}
}