Documentation
# Introduction
Hubstack AdminPro is a WebApp template for admin dashboards and control panels. It is fully responsive HTML template, which is based on the CSS framework Bootstrap 5. It utilizes all of the Bootstrap components in its design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications.
# Development Environment Tools
## Bootstrap
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery. https://getbootstrap.com/
## Gulp
Gulp is a cross-platform, streaming task runner that lets developers automate many development tasks. https://gulpjs.com/
## Jekyll
Jekyll is a static site generator. You give it text written in your favorite markup language and it uses layouts to create a static website. You can tweak how you want the site URLs to look, what data gets displayed on the site, and more. https://jekyllrb.com/
# Folder Structure
After purchasing our template extract the zip file and you will see this structure.
├── Hub-AdminPro
├── demo
├── src
| ├── includes/
| ├── layouts/
│ ├── assets/
│ │ └── css/
│ │ └── images/
│ │ └── js/
│ │ ├── scss/
│ │ │ └── config/
│ │ │ └── customs/
│ │ │ └── layouts/
│ │ │ └── style.scss
│ │ │ └── style-light.scss
│ │ │ └── style-dark.scss
│ ├── html/
│ │ └── html pages
│ ├── config.dev.yml
│ ├── config.yml
│ ├── gulpfile.js
│ ├── index.html
| └── package.json
# How to Get Started
You can start by installing Node Package Manager. Npm is a default package manager for the JavaScript runtime environment Node.js
To check whether is node succesfully install or not.
You can procced then by installing Gulp. Gulp is a cross-platform, streaming task runner that lets developers automate many development tasks. To install gulp globally run
If you have previously installed gulp then remove it.
To check whether is gulp succesfully install or not.
You can procced then by installing Jekyll. Jekyll is a static site generator. You give it text written in your favorite markup language and it uses layouts to create a static website. You can tweak how you want the site URLs to look, what data gets displayed on the site, and more. To install Jekyll globally follow the instruction to the jekyll website
https://jekyllrb.com/docs/installation/
To check whether is Jekyll succesfully install or not.
Then You set.
In the root of your project folder, run npm install to install all package.json dependency
What next, you can launch your App with this command
This command will execute all the assets(js,scss and html) to the _site folder separately.
If everything was installed correctly, you should see the compile version running on http://localhost:3000/
Note: If your http://localhost:3000/ is not available or set to a existing server please change the base url on your _config.dev.yml
There is two Yaml configuration files: `_config.yml` and `_config.dev.yml` that when running in development mode the _dev_ configuration file overrides `baseurl` and `jekyll-minifier` default values.
# Features
This is the list of what is included in this template
- Well Crafted Design
- 2 Modes (Light & Dark Mode)
- 4 Dashboards
- 60+ ready to use graph and Charts
- 10+ vector maps for countries
- 5 Layouts
- 50+ Pages
- Authentication Pages
- Calendar
- Mailbox
- Booking layout
- Kanban Board
- Timeline
- Profile Page
- Billing Page
- Files layout
- UI Kits
- Creative Widgets
- Vertical Layout
- Horizontal Layout
- Boxed Layout
- Minimal Layout
- Easy Customization
- Clean Design
- SASS Supported
- Well Commented & Quality Code
- W3C Validated
- All Browser Support
# Usage
Starter Layout
<html>
<head>
<title> ... </title>
<!-- custom styling -->
<link rel="stylesheet" href="/assets/css/style.css">
<!-- jquery -->
<script src="/assets/js/vendor/jquery.min.js" defer></script>
</head>
<body class="sidebar-open">
<div class="page-container animsition">
<!-- Main Menu -->
<div class="topbar shadow">
<div class="container-fluid">
<div class="row">
<div class="col-md-5 hidden-xs">
<div class="logo">
...
</div>
<a href="#" class="menu-toggle wave-effect">
<i class="feather icon-menu"></i>
</a>
</div>
<div class="col-md-7 text-right">
<ul>
<li class="btn-group user-account">
<a href="#" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="user-content">
<div class="user-name">...</div>
</div>
<div class="avatar">
<img src="#" class="rounded-circle" />
</div>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#" class="animsition-link dropdown-item wave-effect"><i class="feather icon-user"></i>...</a></li>
</ul>
</li>
<!-- Notification Menu -->
<li class="btn-group notification">
<a href="#" class="btn dropdown-toggle wave-effect" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="feather icon-bell"><span class="notification-count">...</span></i>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a href="#" class="wave-effect">
<span class="avatar">
<img src="...">
</span>
<span class="name">...</span>
</a>
</li>
</ul>
</li>
<li class="mobile-menu-toggle">
<a href="#" class="menu-toggle wave-effect">
<i class="feather icon-menu"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Main Menu -->
<div class="sidebar">
<div class="logo">
...
</div>
<ul id="sidebarCookie">
<li class="nav-item">
<a class="nav-link wave-effect nav-single" href="#">
<i class="feather icon"></i>
<span class="menu-title">...</span>
</a>
</li>
</ul>
</div>
<main>
<!-- content here -->
</main>
</div>
<!-- Le Javascript -->
<script src="/assets/js/vendor/popper.min.js"></script>
<script src="/assets/js/vendor/bootstrap.min.js"></script>
<script src="/assets/js/vendor/library.min.js"></script>
<script src="/assets/js/core/main.js"></script>
</body>
</html>
## Dark Mode
To use the dark Mode add the style-dark.css just after the style.css, this will overwrite some color property define in the style.css
<link rel="stylesheet" href="/assets/css/style-dark.css">
#Third Party Plugins
We have used some third party plugins, you can check the list