Introduction
Cimex – Multipurpose Bootstrap HTML Template
Cimex – Multipurpose Bootstrap HTML 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.
Support and Updates:
When you purchase Cimex, you gain access to free future updates to ensure your template remains up-to-date. Plus, our support team is always ready to assist with any questions.
Dependencies for Cimex
What Do You Get with the Cimex:
Cimex provides all necessary HTML, CSS, SCSS, JS files, along with detailed Documentation to help you easily customize and implement the template.
Cimex Compatibility with Popular Browsers:
Cimex is fully compatible with major browsers, ensuring a seamless user experience across Chrome, Firefox, Safari, Edge, and Opera.
Folder Structure
FAQ'S
If you don't want to use scss files,you are in no need of Esbuild and other related files & folders so please remove below shown files
You can simply use dist folder with only css, or can use by renaming it😊.
Step 1:
Go To style.scss (src/assets/scss/styles.scss )
if you want to change another font-family Go to the site Google Fonts And Select One font Family and import in to styles.scss file
How to Select font Family
Step 2:
And paste Your Selected font-family in style.scss
Step 3:
And add the Your Selected font-family in _customs.scss(src/assets/scss/custom/_customs.scss)
code
body {
font-size: 1rem;
font-family: "Roboto", sans-serif;
font-weight: 400;
color: #{$color};
background-color: #{$background};
line-height: 1.4;
text-align: start;
overflow-x: clip;
padding: 0;
margin: 0;
}By default menu icons are Bootstrap icons if you want to change icons please follow below steps
Step 1 :
To change Menu icons, open header.html page and go through
app-sidebar
section, in that section you will find Bootstrap icons of menu in
i
tag, there you can replace previous icon with your icon. Example
as shown in below
html
Go To "src/assets/images/brand-logos" 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.
Please follow the below steps to enable RTL Version
Step1:
To enable RTL Version you have to open
custom-switcher.js
(assets/js/custom-switcher.js) file
and remove comments for rtl as shown in below
javascript
//RTL
if (!localStorage.getItem("cimexrtl")) {
// html.setAttribute("dir" , "rtl") // for rtl version
}Step2:
Remove the comments to enablertl as
shown
below
javascript
//RTL
if (!localStorage.getItem("cimexrtl")) {
html.setAttribute("dir" , "rtl") // for rtl version
}Please follow the below steps to enable Boxed Version
Step1:
To enable Boxed Version you have to open
custom-switcher.js
(assets/js/custom-switcher.js) file
and remove comments for Boxed as shown in below
javascript
//Boxed styles
if (!localStorage.getItem("cimexboxed")) {
// html.setAttribute("data-width" , "boxed") // for boxed style
}Step2:
Remove the comments to enableboxed as
shown
below
javascript
//Boxed styles
if (!localStorage.getItem("cimexboxed")) {
html.setAttribute("data-width" , "boxed") // for boxed style
}
Please follow the below steps to enable Dark Theme
Step1:
To enable Dark Theme you have to open
custom-switcher.js
(assets/js/custom-switcher.js) file
and remove comments for dark-mode as shown in below
javascript
//Dark Theme Style
if (!localStorage.getItem("cimexdarktheme")) {
// html.setAttribute("data-theme-mode" , "dark") // for dark theme
}Step2:
Remove the comments to enable dark-modeas shown below
javascript
//Dark Theme Style
if (!localStorage.getItem("cimexdarktheme")) {
html.setAttribute("data-theme-mode" , "dark") // for dark theme
}Step1:
To clear LocalStorage loading functions you need to remove
localStorageBackup2() function in custom-switcher.min.js assets/js/custom-switcher.min.js as shown
below
javascript
function localStorageBackup() {
// if there is a value stored, update color picker and background color
// Used to retrive the data from local storage
if (localStorage.primaryRGB) {
if (document.querySelector('.theme-container-primary')) {
document.querySelector('.theme-container-primary').value = localStorage.primaryRGB;
}
document.querySelector('html').style.setProperty('--primary-rgb', localStorage.primaryRGB);
}
if (localStorage.bodyBgRGB) {
if (document.querySelector('.theme-container-background')) {
document.querySelector('.theme-container-background').value = localStorage.bodyBgRGB;
}
document.querySelector('html').style.setProperty('--body-bg-rgb', localStorage.bodyBgRGB);
let html = document.querySelector('html');
html.setAttribute('theme-mode', 'dark');
document.querySelector('#switcher-dark-theme').checked = true;
}
if (localStorage.cimexdarktheme) {
let html = document.querySelector('html');
html.setAttribute('theme-mode', 'dark');
}
if (localStorage.cimexrtl) {
let html = document.querySelector('html');
html.setAttribute('dir', 'rtl');
rtlFn();
}
if (localStorage.cimexboxed) {
let html = document.querySelector('html');
html.setAttribute('width', 'boxed');
}
if(localStorage.cimexltr){
ltrFn()
}
}Step2:
To remove complete LocalStorage saving you need to remove
all localstorage related calling functions like localStorage.setItem,
localStorage.removeItem, localStorage.getItem,
localStorage.clear in
custom-switcher.js
assets/js/custom-switcher.min.jsfile.Below are the some examples to find out.
javascript
localStorage.setItem( );
localStorage.removeItem( );
localStorage.getItem( )
localStorage.clear();
localStorageBackup();Please follow the below steps to change Primary Color
Step 1 :
To change Primary Color you have to open _variables.scss file and replace what color you want as shown in below
Rootpath : _variables.scss (src/assets/scss/_variables.scss )
Please follow the below steps to change Dark body Color
Step 1 :
Make sure the theme is set completely to dark mode by adding the following attributes to the html tag data-theme-mode="dark" data-header-styles="dark" data-menu-styles="dark"
Step 2 :
To change Dark body Color you have to open _variables.scss file and replace what color you want as shown in below
Rootpath : _variables.scss (src/assets/scss/_variables.scss )
Step 3 :
Also Change the following variable colors to the desired theme background accordingly in [data-theme-mode="dark"]
--light-rgb : --form-control-bg : --input-border : --gray-3 :Html Structure
General HTML structure of the Cimex-Business Consulting HTML Template Here is the Folder structure.
Rootpath : html/partials/header.html
html
<header class="top-menu">
<div class="container top-menu-brand px-0">
<ul class="nav list-unstyled align-items-center">
<li><a href="tel:+(123) 678-8767" class="nav-link d-flex"><i
class="bi bi-headset me-2"></i>24x7 Technical Support</a></li>
<li>
<a href="mailto:john@gmail.com" class="nav-link"><i class="bi bi-envelope-plus me-2"></i>john@gmail.com</a>
</li>
</ul>
<ul class="nav list-unstyled align-items-center">
<li>
<a href="javascript:void(0);" class="nav-link"><i class="bi bi-question-circle me-2"></i>Help</a>
</li>
<li>
<a href="javascript:void(0);" class="nav-link d-flex"><i class="bi bi-person me-2"></i>Contact</a>
</li>
</ul>
</div>
</header>
<header class="main-header" id="stickyHeader">
<!-- Start::main-brand-header -->
<div class="main-brand-header">
<div class="container brand-header-container px-sm-0">
<div class="d-flex align-items-center">
<!-- Start::header-element -->
<div class="header-element me-1">
<!-- Start::header-link -->
<a href="javascript:void(0);" class="sidemenu-toggle1 header-link" data-bs-toggle="sidebar">
<span class="open-toggle">
<i class="bi bi-text-indent-left header-link-icon"></i>
</span>
</a>
<!-- End::header-link -->
</div>
<!-- End::header-element -->
<a href="index.html" class="brand-main">
<img src="../assets/images/brand/logo-white.png" alt="img" class="desktop-logo logo-dark">
<img src="../assets/images/brand/toggle-dark.png" alt="img" class="mobile-logo mobile-dark me-3">
<img src="../assets/images/brand/logo-color.png" alt="img" class="desktop-logo logo-color">
<img src="../assets/images/brand/toggle-color.png" alt="img" class="mobile-logo mobile-color">
</a>
<ul class="categories-dropdowns">
<li class="category-dropdown px-2 py-3">
<a href="javascript:void(0);" class="avatar bg-white-1 border rounded-circle tx-15 border-white-2">
<i class="bi bi-grid text-white"></i>
</a>
<ul class="main-dropdown">
<li>
<div class="categories-dropdowns__item">
<span class="me-1"><i class="bi bi-cast tx-17"></i></span>
Web Hosting
<span class="float-end"><i class="bi bi-chevron-right tx-11"></i></span>
</div>
<ul class="category-menu">
<li><a href="linux-shared-hosting.html" class="category-item">Linux Shared Hosting</a></li>
<li><a href="windows-shared-hosting.html" class="category-item">Windows Shared Hosting</a></li>
<li><a href="wordpress-shared-hosting.html" class="category-item">Wordpress Shared Hosting</a></li>
</ul>
</li>
-------------------------
-------------------------
</ul>
</li>
</ul>
</div>
<ul class="nav list-unstyled align-items-center">
<li class="d-flex align-items-center position-relative me-md-4 me-2">
<a href="tel:+123 678 9657" class="stretched-link"></a>
<span class="avatar bg-white-1 border rounded-circle tx-15 border-white-2 me-2"><i class="bi bi-telephone text-white"></i></span>
<div class="d-none d-md-block">
<a href="javascript:void(0);" class="nav-link tx-15 p-0">Call to Us</a>
<a href="tel:+123 678 9657" class="mb-0 nav-link p-0 tx-13 op-8 lh-sm">+123 678 9657</a>
</div>
</li>
<li class="d-flex align-items-center position-relative">
<a id="live-chat" href="javascript:void(0);" class="stretched-link"></a>
<span class="avatar bg-white-1 border rounded-circle tx-15 border-white-2 me-2"><i class="bi bi-chat-text text-white"></i></span>
<div class="d-none d-md-block">
<a href="javascript:void(0);" class="nav-link tx-15 p-0">Live Chat</a>
<p class="mb-0 nav-link p-0 tx-13 op-8 lh-sm">Chat With Us</p>
</div>
</li>
</ul>
</div>
</div>
<!-- End::main-brand-header -->
</header>
enable switcher in any page
To enable the switcher then you must have to place below html, css, js in your html page .
Rootpath for switcher: html/partials/switcher.html
Rootpath for switcher-icon: html/partials/switcher-icon.html
If you want switcher icon in html pages then replace
below code in app header section
<!-- Start Switcher-Icon -->
<div class="">
<a class="switcher-icon" role="button" data-bs-toggle="offcanvas" href="#switcher-canvas" aria-controls="switcher-canvas">
<i class="fa fa-cog fa-spin"> </i>
</a>
</div>
Cimex comes with power of Esbuild
esbuild is a blazing-fast JavaScript bundler and minifier designed for modern web development workflows. It is known for its exceptional speed, minimal configuration, and powerful features. Check here.
Prerequisites:
To install and set up all the prerequisites, follow these steps:
Ensure that Node.js is installed and running on your computer. If Node.js is already installed, you can skip this step. Otherwise, install it on your computer.
If you want to install and use the latest version of Node.js, you can find the necessary instructions on the official website.
To set up esbuild, you need to install it globally on your system. Run one of the following commands in your terminal:
code
npm install -g esbuildcode
npm install --save-dev esbuildInstallation
Please follow below steps to install and setup all pre requisites:
Make sure to have all above pre requisites installed & running in your computer
Open your terminal, go to your folder and enter below command. This would install all required dependencies in node_modules folder.
code
npm installBuild Production File
After completing the above steps, run the following command from the project root (Cimex/src) in your terminal or command prompt:
code
npm run devNote:-Ensure all required node_modules are installed to run the Esbuild tasks successfully.
The following command performs several tasks to streamline your development workflow below are some of the task it performs :
- Generates the
dist/directory - Starts the local development server
- Watches for changes in the
src/folder (HTML, JavaScript, SCSS, etc.) - Automatically reflects those changes in the
dist/output for live development
Credit's
Icons Credit
| Icons | References |
|---|---|
| Font Awesome | https://fontawesome.com/ |
| Bootstrap Icons | https://icons.getbootstrap.com/ |
| Boxicons | https://boxicons.com/ |
| Feather Icons | https://feathericons.com/ |
Images Credit
| Images | References |
|---|---|
| Vecteezy | https://www.vecteezy.com/ |
| Iconscount | https://iconscout.com/ |
| Unsplash | https://unsplash.com/ |
Fonts Credit
| Font | References |
|---|---|
| Google Fonts | https://fonts.google.com/ |
Choices JS :
Choices JS is very simple javascript plugin to style default select..
html
css
js
plugin link
https://choices-js.github.io/Choices/Reference Link
https://www.npmjs.com/package/choices.jsSwiper JS :
Swiper JS is very modern javascript plugin to replace bootstrap carousel..
html
css
js
Plugin Link
https://swiperjs.com/Reference Link
https://www.npmjs.com/package/swipernoui slider :
noui slider is a modern javascript plugin for alert messages..
html
css
js
<!-- noUiSlider JS -->
<script src="../assets/libs/nouislider/nouislider.min.js"></script>
<script src="../assets/libs/wnumb/wNumb.min.js"></script>
/* default slider */
var slider = document.getElementById('slidermain');
noUiSlider.create(slider, {
start: [30, 80],
connect: true,
range: {
'min': 0,
'max': 100
}
});Plugin link
https://refreshless.com/nouislider/Reference Link
https://www.npmjs.com/package/nouisliderGLightbox (Gallery) : :
GLightbox is a modern javascript gallery plugin..
html
css
js
var lightboxVideo = GLightbox({
selector: '.glightbox'
});
lightboxVideo.on('slide_changed', ({ prev, current }) => {
console.log('Prev slide', prev);
console.log('Current slide', current);
const { slideIndex, slideNode, slideConfig, player } = current;
});Plugin link
https://biati-digital.github.io/glightbox/Reference Link
https://www.npmjs.com/package/glightboxAdditional Plugins Included :
The following plugins have also been included, apart from the ones already listed in the above sections
| Plugin | Version | URL |
|---|---|---|
| Bootstrap | v5.3.8 | https://www.npmjs.com/package/bootstrap |