369 lines
20 KiB
HTML
369 lines
20 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8" />
|
|
<title>Setup | Webadmin Admin & Dashboard Template</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta content="Webadmin Premium Multipurpose Admin & Dashboard Template documentation of HTML" name="description" />
|
|
<meta content="Themesdesign" name="author" />
|
|
<meta name="keywords" content="Webadmin Admin & Dashboard Template Documentation">
|
|
<!-- App favicon -->
|
|
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
|
|
|
<!-- Bootstrap Css -->
|
|
<link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
|
|
<!-- Icons Css -->
|
|
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
|
|
<!-- App Css-->
|
|
<link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
|
|
|
|
</head>
|
|
|
|
<body data-topbar="dark" data-spy="scroll" data-target=".right-side-nav" data-offset="175">
|
|
|
|
<!-- Begin page -->
|
|
<div id="layout-wrapper">
|
|
|
|
<header id="page-topbar">
|
|
<div class="navbar-header">
|
|
<div class="d-flex">
|
|
<!-- LOGO -->
|
|
<div class="navbar-brand-box">
|
|
<a href="index.html" class="logo logo-light">
|
|
<span class="logo-sm">
|
|
<img src="assets/images/logo-light-sm.png" alt="" height="30">
|
|
</span>
|
|
<span class="logo-lg">
|
|
<img src="assets/images/logo-light.png" alt="" height="30">
|
|
</span>
|
|
</a>
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-sm px-3 font-size-24 header-item waves-effect d-lg-none" id="vertical-menu-btn">
|
|
<i class="mdi mdi-menu"></i>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="d-flex">
|
|
|
|
|
|
<div class="d-inline-block">
|
|
<h5 class="header-item m-0"><span class="badge badge-danger">v1.0.0</span></h5>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ========== Left Sidebar Start ========== -->
|
|
<div class="vertical-menu">
|
|
|
|
<div data-simplebar class="h-100">
|
|
|
|
<!--- Sidemenu -->
|
|
<div id="sidebar-menu">
|
|
<!-- Left Menu Start -->
|
|
<ul class="metismenu list-unstyled" id="side-menu">
|
|
<li class="menu-title">Docs</li>
|
|
|
|
<li>
|
|
<a href="index.html" class="waves-effect">
|
|
<i class="mdi mdi-text-box-outline"></i>
|
|
<span>Introduction</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="setup.html" class=" waves-effect">
|
|
<i class="mdi mdi-cog-outline"></i>
|
|
<span>Setup</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="menu-title">Layouts</li>
|
|
|
|
<li>
|
|
<a href="horizontal.html" class=" waves-effect">
|
|
<i class="mdi mdi-flip-vertical"></i>
|
|
<span>Horizontal</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="vertical.html" class=" waves-effect">
|
|
<i class="mdi mdi-flip-horizontal"></i>
|
|
<span>Vertical</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="menu-title">Themes</li>
|
|
|
|
<li>
|
|
<a href="dark.html" class=" waves-effect">
|
|
<i class="mdi mdi-weather-night"></i>
|
|
<span>Dark Version</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="rtl.html" class=" waves-effect">
|
|
<i class="mdi mdi-web"></i>
|
|
<span>RTL Version</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="menu-title">Other</li>
|
|
|
|
<li>
|
|
<a href="changelog.html" class=" waves-effect">
|
|
<i class="mdi mdi-format-list-bulleted"></i>
|
|
<span>Changelog</span>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
<!-- Sidebar -->
|
|
</div>
|
|
</div>
|
|
<!-- Left Sidebar End -->
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- Start right Content here -->
|
|
<!-- ============================================================== -->
|
|
<div class="main-content">
|
|
|
|
<div class="page-content">
|
|
<div class="container-fluid">
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="card ">
|
|
<div class="card-body">
|
|
<div class="p-lg-1">
|
|
|
|
<div class="d-xl-flex">
|
|
|
|
<div class="w-100">
|
|
|
|
<h4 class="mt-0 mb-4">Setup HTML</h4>
|
|
|
|
<div id="desc" class="mb-5">
|
|
<h5 class="mt-4">Introduction</h5>
|
|
<p>
|
|
We are using
|
|
<a href="https://gulpjs.com/" target="_blank">gulp</a> which
|
|
allows having complete automation for build flow. In case if you
|
|
don't know Gulp then it's easy to use it. Gulp is a toolkit for
|
|
automating painful or time-consuming tasks in the development
|
|
workflow, so you can stop messing around while building any
|
|
project. You can read it more about it <a
|
|
href="https://gulpjs.com/" target="_blank">here</a>.
|
|
Please follow below steps to install and setup all
|
|
prerequisites:
|
|
</p>
|
|
</div>
|
|
|
|
<div id="prerequisites" class="mb-5">
|
|
<h5 class="mt-4">Prerequisites</h5>
|
|
|
|
<p>
|
|
Please follow below steps to install and setup all
|
|
prerequisites:
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
<li>
|
|
<strong>Yarn</strong>
|
|
<p>
|
|
Make sure to have the <a
|
|
href="https://classic.yarnpkg.com/en/"
|
|
target="_blank">Yarn</a> installed & running
|
|
in your computer.
|
|
If you already have installed Yarn on your computer, you
|
|
can skip this step. We suggest you to use Yarn instead
|
|
of NPM.</p>
|
|
</li>
|
|
<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 already have installed Node on your computer, you
|
|
can skip this step if your existing node latest version 16.13.2. </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 already have installed gulp on run
|
|
command <code>npm install -g gulp</code> from your
|
|
terminal.</p>
|
|
</li>
|
|
|
|
<li>
|
|
<strong>Git</strong>
|
|
|
|
<p>Make sure to have the <a href="https://git-scm.com/"
|
|
target="_blank">Git</a> installed globally &
|
|
running on your computer. If you already have installed
|
|
git on your computer, you can skip this step.</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="installation">
|
|
<h5 class="mt-4">Installation</h5>
|
|
|
|
<p>
|
|
To setup the admin theme, follow below-mentioned steps:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>
|
|
<strong>Install Prerequisites</strong>
|
|
<p>
|
|
Make sure to have all above prerequisites installed
|
|
& running on your computer
|
|
</p>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<p class="mt-4">
|
|
After you finished with the above steps, you can run the
|
|
following commands into the terminal / command prompt from the
|
|
root directory of the project to run the project locally or
|
|
build for
|
|
production use:
|
|
</p>
|
|
<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>yarn install</code>
|
|
</td>
|
|
<td>
|
|
This would install all the required dependencies in
|
|
the <code>node_modules</code> folder.
|
|
</td>
|
|
</tr>
|
|
<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 build</code>
|
|
</td>
|
|
<td>
|
|
Generates a <code>/dist</code> directory with all
|
|
the production files.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="tips">
|
|
<h5 class="mt-4">Tips</h5>
|
|
|
|
<p>
|
|
SCSS: We suggest you to do not change any scss files from the assets/scss/custom folders because to get new updates will might be break your SCSS changes if any you have made. We strongly suggest you
|
|
to create new custom.scss file and use that instead of overwrite
|
|
any theme's custom scss files.
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Start right-side-nav -->
|
|
<div class="d-none d-xl-block">
|
|
<div class="right-side-nav">
|
|
<ul class="nav nav-pills flex-column">
|
|
<li class="nav-item">
|
|
<a href="#desc" class="nav-link">Description</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#prerequisites" class="nav-link">Prerequisites</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#installation" class="nav-link">Installation</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#tips" class="nav-link">Tips</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- End right-side-nav -->
|
|
</div>
|
|
|
|
</div> <!-- end padding-->
|
|
</div> <!-- end card-body-->
|
|
</div> <!-- end card-->
|
|
</div>
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
</div> <!-- container-fluid -->
|
|
</div>
|
|
<!-- End Page-content -->
|
|
|
|
|
|
<footer class="footer">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<script>document.write(new Date().getFullYear())</script> © Themesdesign.
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="text-sm-right d-none d-sm-block">
|
|
Crafted with <i class="mdi mdi-heart text-danger"></i> by <a href="https://themesdesign.in/" target="_blank" class="text-muted">Themesdesign</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<!-- end main content-->
|
|
|
|
</div>
|
|
<!-- END layout-wrapper -->
|
|
|
|
|
|
<!-- JAVASCRIPT -->
|
|
<script src="assets/libs/jquery/jquery.min.js"></script>
|
|
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/libs/simplebar/simplebar.min.js"></script>
|
|
<script src="assets/libs/jquery.easing/jquery.easing.min.js"></script>
|
|
|
|
<script src="assets/js/app.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |