Your IP : 18.191.84.179
<!DOCTYPE html>
<html>
<head>
<!-- Meta data -->
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=0'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Zanex – Bootstrap5 Admin & Dashboard Template">
<meta name="author" content="Spruko Technologies Private Limited">
<meta name="keywords" content="admin template,admin dashboard,bootstrap 5 admin template,html template,html admin template,admin,bootstrap 5 html template,html dashboard,dashboard,crm,admin pane,admin dashboard template,html responsive template,crm admin template,dashboard template.">
<!-- Title -->
<title>Zanex – Bootstrap5 Admin & Dashboard Template</title>
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<link href="assets/plugins/iconfonts/icons.css" rel="stylesheet" />
<!-- Custom Css -->
<link href="assets/css/main.css" rel="stylesheet">
<!---Internal Prism css-->
<link href="assets/plugins/prism/prism.css" rel="stylesheet">
<link href="assets/plugins/treeview-prism/prism.css" rel="stylesheet">
<link href="assets/plugins/treeview-prism/prism-treeview.css" rel="stylesheet">
<link href="assets/css/themes/all-themes.css" rel="stylesheet" />
</head>
<body class="theme-blush">
<!-- Page Loader -->
<div class="page-loader-wrapper">
<div class="loader">
<div class="preloader">
<div class="spinner-layer pl-blush">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
<!-- #END# Page Loader -->
<!-- Overlay For Sidebars -->
<div class="overlay"></div>
<!-- #END# Overlay For Sidebars -->
<!-- Sidebarover lay -->
<div class="sidebar-overlay" data-toggle="sidebar"></div>
<!-- #Top Bar -->
<section>
<!-- Left Sidebar -->
<aside id="leftsidebar" class="sidebar">
<!-- User Info -->
<div class="admin-image"> <img src="assets/images/logo-3.png" alt="" > </div>
<!-- Menu -->
<div class="menu main-sidebar">
<ul class="list" id="documenter_nav">
<li class="nav-item"><a class="nav-link" href="index.html"><i class="fe fe-airplay sidemenu-icon"></i><span class="sidemenu-label">Introduction</span></a></li>
<li class="nav-item"><a class="nav-link" href="folder-structure.html"><i class="fe fe-folder sidemenu-icon"></i><span class="sidemenu-label">Folder structure</span></a></li>
<li class="nav-item"><a class="nav-link" href="layouts.html"><i class="fe fe-layout sidemenu-icon"></i><span class="sidemenu-label">Layouts</span></a></li>
<li class="nav-item"><a class="nav-link" href="faqs.html"><i class="fe fe-help-circle sidemenu-icon"></i><span class="sidemenu-label text-primary fw-bold mr-5">Faqs </span><i class="fa fa-star float-right sidemenu-icon-2 text-warning"></i></a></li>
<li class="nav-item"><a class="nav-link" href="switcher.html"><i class="fe fe-grid sidemenu-icon"></i><span class="sidemenu-label">Switcher</span></a></li>
<li class="nav-item"><a class="nav-link" href="gulp.html"><i class="fe fe-settings sidemenu-icon"></i><span class="sidemenu-label">Gulp</span></a></li>
<li class="nav-item"><a class="nav-link" href="html-structure.html"><i class="fe fe-codepen sidemenu-icon"></i><span class="sidemenu-label">html-structure</span></a></li>
<li class="nav-item"><a class="nav-link" href="apps.html"><i class="fe fe-briefcase sidemenu-icon"></i><span class="sidemenu-label">Apps</span></a></li>
<li class="nav-item"><a class="nav-link" href="elements.html"><i class="fe fe-aperture sidemenu-icon"></i><span class="sidemenu-label">Elements</span></a></li>
<li class="nav-item"><a class="nav-link" href="form-elements.html"><i class="fe fe-file-text sidemenu-icon"></i><span class="sidemenu-label">Form-elements</span></a></li>
<li class="nav-item"><a class="nav-link" href="form-advanced.html"><i class="fe fe-cpu sidemenu-icon"></i><span class="sidemenu-label">Form-advanced</span></a></li>
<li class="nav-item"><a class="nav-link" href="treeview.html"><i class="fe fe-lock sidemenu-icon"></i><span class="sidemenu-label">Treeview</span></a></li>
<li class="nav-item"><a class="nav-link" href="form-wizard.html"><i class="fe fe-hard-drive sidemenu-icon"></i><span class="sidemenu-label">Form-wizard</span></a></li>
<li class="nav-item"><a class="nav-link" href="form-editor.html"><i class="fe fe-edit sidemenu-icon"></i><span class="sidemenu-label">Form-editor</span></a></li>
<li class="nav-item"><a class="nav-link" href="form-validation.html"><i class="fe fe-file-plus sidemenu-icon"></i><span class="sidemenu-label">Form-validation</span></a></li>
<li class="nav-item"><a class="nav-link" href="maps.html"><i class="fe fe-map-pin sidemenu-icon"></i><span class="sidemenu-label">Maps</span></a></li>
<li class="nav-item"><a class="nav-link" href="charts.html"><i class="fe fe-pie-chart sidemenu-icon"></i><span class="sidemenu-label">Charts</span></a></li>
<li class="nav-item"><a class="nav-link" href="tables.html"><i class="fe fe-database sidemenu-icon"></i><span class="sidemenu-label">Tables</span></a></li>
<li class="nav-item"><a class="nav-link" href="icons.html"><i class="fe fe-anchor sidemenu-icon"></i><span class="sidemenu-label">Icons</span></a></li>
<li class="nav-item"><a class="nav-link" href="others.html"><i class="fe fe-link sidemenu-icon"></i><span class="sidemenu-label">Others</span></a></li>
<li class="nav-item"><a class="nav-link" href="plugins.html"><i class="fe fe-droplet sidemenu-icon"></i><span class="sidemenu-label">Plugins</span></a></li>
<li class="nav-item"><a class="nav-link" href="theme.html"><i class="fe fe-layers sidemenu-icon"></i><span class="sidemenu-label">Theme Style</span></a></li>
</ul>
</div>
<!-- #Menu -->
</aside>
<!-- #END# Left Sidebar -->
</section>
<section class="content home">
<div class="container-fluid">
<div class="block-header mt-3 ml-3">
<h1>Zanex – Bootstrap 5 Admin & Dashboard HTML Template</h1>
</div>
<div class="">
<div class="alert alert-primary-transparent">
<button type="button" class="btn-close" data-dismiss="alert" aria-hidden="true">×</button>
<strong>Note:-</strong>
<hr class="message-inner-separator">
<p>Please refer <b class="text-primary fs-6">Faq's </b>page in documentation itself for queries like customization like color ,rtl ,dark style..etc.</p>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-12 col-lg-12 col-xl-9">
<div class="card">
<div class="body pb-0">
<h5 class="mt-0">SCSS & CSS</h5>
</div>
<div class="body">
<p class="fs-16"> Zanex comes with power of SCSS. The css files can be generated from scss by simply following below steps:</p>
<div class="p-t-5" id="gulp-sass">
<ul class="p-0">
<li><strong>Gulp</strong>
<p>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 <a href="https://gulpjs.com/" target="_blank">gulp</a> which allows to easily compilation of scss to csss.
You can read it more about it <a href="https://gulpjs.com/"
target="_blank">here</a>.</p>
</li>
</ul>
<h5 class="p-t-10">Prerequisites</h5>
<p>Please follow below steps to install and setup all prerequisites:</p>
<ul class="pl-2">
<li><strong>Nodejs</strong>
<p>Make sure to have the <a href="https://nodejs.org/" target="_blank">Node.js</a> 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,</p>
<p><b>Note : </b>If you are using the latest version of Node JS or want to install and use the latest version, <a href="https://nodejs.org/" target="_blank">click here</a> and install all the dependencies manually that are given below in command prompt. </p>
</li>
<li><strong>Gulp</strong>
<p>Make sure to have the <a href="https://gulpjs.com/" target="_blank">Gulp</a> 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 <code>npm install -g gulp</code> from
your terminal.</p>
</li>
<li><p>After Completion of gulp Install. open <code>gulpfile.js</code> And install the "Declaration of gulp variables" in your command promt. In order to install, just run command <br><code>npm install gulp</code>, <br><code>npm install gulp-sass</code>,<br> <code>npm install gulp-postcss</code>, <br><code>npm install autoprefixer</code>, <br><code>npm install gulp-sourcemaps</code>, <br>
<code>npm install browser-sync</code>,<br> <code>npm install gulp-cssbeautify</code>,<br> <code>npm install gulp-beautify</code> from your terminal.</p>
<p>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 <code>gulpfile.js</code> after that run in command promt</p>
</li>
</ul>
<h5 class="p-t-10">Installation</h5>
<p>To setup, follow below mentioned steps:</p>
<ul>
<li><strong>Install Prerequisites</strong>
<p>Make sure to have all above prerequisites installed & running in your computer</p>
</li>
<li><strong>Install Dependencies</strong>
<p>Open your terminal, go to your folder and enter the command <code>npm install</code>. This
would install all required dependencies in <code>node_modules</code> folder.</p>
</li>
</ul>
<p class="mt-4 mb-4">After you finished with above steps, you can run the command to compile scss into css:
<code>gulp</code>
</p>
<p class="fw-bold">Note:-
<span class="fw-normal">
please ensure that you have installed all nodemodules requried to run gulp tasks .
</span>
</p>
</div>
</div>
</div>
<div class="card" id="gulp-commands">
<div class="body pb-0">
<h5 class="mt-0">SCSS & CSS</h5>
</div>
<div class="body component-item">
<h6 class="mt-0">GULP COMMANDS</h6>
<table class="table table-bordered m-0">
<thead>
<tr>
<th style="width: 20%;">
<i class="ti-file"></i> Command</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>gulp</code>
</td>
<td>
Runs the project locally, starts the development server and watches
for any changes in your
code, including your html, javascript, sass, etc. The development
server is accessible at <a href="http://localhost:3000">http://localhost:3000</a>.
</td>
</tr>
<tr>
<td>
<code>gulp --tasks</code>
</td>
<td>
In this template gulp --tasks command is for list all the tasks defined in gulp file .
</td>
</tr>
<tr>
<td>
<code>gulp watch</code>
</td>
<td>
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 <code>assets/css/</code> folder will be watched and upon changes made to these files, the styles task will be executed.
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-12 d-none d-xl-block custom-leftnav">
<div class="main-content-left-components">
<div class="card custom-card">
<div class="card-body component-item">
<div class="collapse navbar-collapse justify-content-end" id="main-menu">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#gulp-sass">Gulp</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gulp-commands">Gulp Commands</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer opened -->
<div class="main-footer ht-40">
<div class="pd-t-0-f ht-100p">
<span>Copyright © <span id="year"></span> <a href="javascript:void(0)">Zanex</a>
. Designed with <span class="fa fa-heart text-danger"></span> by <a href="javascript:void(0)"> Spruko </a> All rights reserved.</span>
</div>
</div>
<!-- Footer closed -->
</section>
<div class="color-bg">
<div class="sidebar__toggle" data-toggle="sidebar">
<a class="open-toggle" href="javascript:void(0);"><i class="fe fe-menu"></i></a>
</div>
<ul class="nav navbar-nav">
<li class="nav-item mr-8"><a class="btn btn-primary btn-header " href="https://themeforest.net/item/zanex-bootstrap-5-admin-dashboard-template/32984858" target="_blank"><i class="icon-help2"></i> Buy Now</a></li>
<li class="nav-item mr-8"><a class="btn btn-secondary btn-header " href="https://1.envato.market/MGEaN" target="_blank"><i class="icon-bag3"></i> Portfolio</a></li>
<li class="nav-item"><a class="btn btn-danger text-white mr-3 btn-header" href="https://spruko.com/licenses.html" target="_blank"><i class="icon-bag3"></i> Licenses</a></li>
</ul>
</div>
<!-- Jquery Core Js -->
<script src="assets/bundles/libscripts.bundle.js"></script> <!-- Lib Scripts Plugin Js -->
<script src="assets/bundles/morphingsearchscripts.bundle.js"></script> <!-- morphing search Js -->
<script src="assets/bundles/vendorscripts.bundle.js"></script> <!-- Lib Scripts Plugin Js -->
<script src="assets/bundles/mainscripts.bundle.js"></script><!-- Custom Js -->
<script src="assets/bundles/morphingscripts.bundle.js"></script><!-- morphing search page js -->
<!-- Internal Prism js-->
<script src="assets/plugins/prism/prism.js"></script>
<!-- Treeview js-->
<script src="assets/plugins/treeview-prism/prism.js"></script>
<script src="assets/plugins/treeview-prism/prism-treeview.js"></script>
<!-- Perfectscroll js-->
<script src="assets/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/plugins/perfect-scrollbar/p-scroll.js"></script>
<!-- Custom js-->
<script src="assets/js/custom.js"></script>
<script src="assets/js/menuspy.min.js.js"></script>
<script>
var elm = document.querySelector('#main-menu');
var ms = new MenuSpy(elm);
</script>
</body>
</html>