v1.0Bootstrap 5 responsive admin template
documented by Sean Ngu
UPDATED ON: 10/July/2025
BY: Sean Ngu
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to send your question via ThemeForest. Thanks so much!
When you only need to include CYBER compiled CSS or JS, below is the required core css and javascript.
<!-- Core CSS --> <link href="assets/plugins/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" /> <link href="assets/plugins/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" /> <link href="assets/plugins/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet" /> <link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" /> <link href="assets/css/app.min.css" rel="stylesheet" /> <!-- Core JS --> <script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script> <script src="assets/plugins/jquery/dist/jquery.min.js"></script> <script src="assets/plugins/jquery-ui-dist/jquery-ui.min.js"></script> <script src="assets/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="assets/plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script> <script src="assets/plugins/js-cookie/dist/js.cookie.min.js"></script> <script type="module" src="assets/js/app.min.js"></script>
To configure the SCSS file settings, you'll first need to set up Vite in your development environment.
Follow the steps below to get started. For more detailed information, refer to the official Vite documentation:
Vite Setup Guide
cd /your-path-url/template_html/ npm install // install all dependencies npm run dev // Start the development server npm run build // Build the project for production into /dist folder (including plugins)
Make sure that you are running at least node 22.x and npm 11.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.
File structure overview for CYBER
template/
├── dist/ // Compiled output: HTML, CSS, JS, and copied assets
├── vite.config.js // Vite configuration for build and development
├── package.json // Project dependencies and scripts
└── src/
├── app.js // Main entry point that imports SCSS and JS
├── data/ // JSON data files
├── html/ // HTML source files (with Handlebars support)
├── img/ // image source files
├── js/ // JavaScript source files
└── scss/ // SCSS source files
Below is the general page structure and the required core css / js files for CYBER Admin Template. The css / js files can be found via /dist/assets/ folder.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CYBER</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- ================== BEGIN core-css ================== -->
<link href="assets/plugins/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
<link href="assets/plugins/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
<link href="assets/plugins/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet" />
<link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" />
<link href="assets/css/app.min.css" rel="stylesheet" />
<!-- ================== END core-css ================== -->
<!-- ================== BEGIN core-js ================== -->
<script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script>
<script src="assets/plugins/jquery/dist/jquery.min.js"></script>
<script src="assets/plugins/jquery-ui-dist/jquery-ui.min.js"></script>
<script src="assets/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
<script src="assets/plugins/js-cookie/dist/js.cookie.min.js"></script>
<script type="module" src="assets/js/app.min.js"></script>
<!-- ================== END core-js ================== -->
</head>
<body>
<!-- BEGIN #appLoader -->
<div id="appLoader" class="app-loader">... </div>
<!-- END #appLoader -->
<!-- BEGIN #appCover -->
<div id="appCover" class="app-cover"></div>
<!-- END #appCover -->
<div id="app" class="app">
<!-- app-header -->
<div id="appHeader" class="app-header">... </div>
<!-- app-sidebar -->
<div id="appSidebar" class="app-sidebar">... </div>
<!-- mobile-sidebar-backdrop -->
<button class="app-sidebar-mobile-backdrop"
data-toggle-target=".app"
data-toggle-class="app-sidebar-mobile-toggled"></button>
<!-- END mobile-sidebar-backdrop -->
<!-- app-content -->
<div id="appContent" class="app-content">...</div>
<!-- app-theme-panel -->
<div id="appThemePanel" class="app-theme-panel">...</div>
<!-- btn-scroll-top -->
<a href="#" data-toggle="scroll-to-top" class="btn-scroll-top fade">...</a>
</div>
</body>
</html>
All the core SCSS files used in CYBER are now compiled into a single file:
app.min.css using Vite.
The main entry for compiling styles is defined in /src/app.js, where the SCSS files are imported:
// src/app.js import './scss/font.scss'; import './scss/styles.scss';
This means you only need to modify the SCSS files or the app.js entry if you wish to customize the CSS output.
If you are not using Vite (or not using a dev/build workflow), simply copy the compiled folders below from the build output:
/dist/assets/css
Usage in HTML:
<!-- core lib css file --> <link href="assets/plugins/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" /> <link href="assets/plugins/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet" /> <link href="assets/plugins/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet" /> <link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" /> <!-- core app css file --> <link href="assets/css/app.min.css" rel="stylesheet" />
All the required JavaScript files are now bundled into a single file:
app.min.js using Vite as the build tool.
The main entry point is also /src/app.js, which includes both plugin and core JS imports.
// src/app.js import './js/app.js';
If you want to add or remove any JS functionality, you can do it directly in app.js.
If you’re not using Vite, you can simply copy the compiled folder:
/dist/assets/js
Usage in HTML:
<!-- core lib js file --> <script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script> <script src="assets/plugins/jquery/dist/jquery.min.js"></script> <script src="assets/plugins/jquery-ui-dist/jquery-ui.min.js"></script> <script src="assets/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="assets/plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script> <script src="assets/plugins/js-cookie/dist/js.cookie.min.js"></script> <!-- core app js file --> <script type="module" src="assets/js/app.min.js"></script>
Sidebar collapsed:
<div id="app" class="app app-sidebar-collapsed"> ... </div>
Full height:
<div id="app" class="app app-content-full-height">
...
<div id="content" class="app-content" data-scrollbar="true" data-height="100%">
...
</div>
</div>
Full width:
<div id="app" class="app app-content-full-width"> ... </div>
Fixed footer:
<div id="app" class="app app-footer-fixed">
...
<div id="footer" class="app-footer">
© 2025 seanTheme All Right Reserved
</div>
</div>
Boxed Layout
<div id="app" class="app app-boxed-layout"> ... </div>
Top Nav (without Sidebar)
<div id="app" class="app app-with-top-nav app-without-sidebar"> ... </div>
Top Nav (with Sidebar)
<div id="app" class="app app-with-top-nav"> ... </div>
Boxed Layout with Top Nav & Sidebar
<div id="app" class="app app-with-top-nav app-boxed-layout"> ... </div>
Add the theme class to the <body> tag in order to change the theme color.
<body class="theme-red">...</body> <body class="theme-pink">...</body> <body class="theme-orange">...</body> <body class="theme-yellow">...</body> <body class="theme-lime">...</body> <body class="theme-green">...</body> <body class="theme-teal">...</body> <body class="theme-cyan">...</body> <body class="theme-blue">...</body> <body class="theme-purple">...</body> <body class="theme-indigo">...</body> <body class="theme-white">...</body> <body class="theme-gray-100">...</body> <body class="theme-gray-200">...</body> <body class="theme-gray-300">...</body> <body class="theme-gray-400">...</body> <body class="theme-gray-500">...</body> <body class="theme-gray-600">...</body> <body class="theme-gray-700">...</body> <body class="theme-gray-800">...</body> <body class="theme-gray-900">...</body>
Global Variables
The /src/scss/_variables.scss file contains the variables that control the styles of your application.
To edit these variables, navigate to the /src/scss/_variables.scss file in your code editor and modify the values of the variables to suit your needs.
<!-- global variable --> /src/scss/_variables.scss
I've used the following images, icons or other files as listed.
jQuery Plugins
Photos