Posted by : Hammad
Welcome To PlainAdmin Template Documentation.
Firstly, a huge thanks for using PlainAdmin Template, your support is truly appreciated!
This document covers the installation and use of this template and often reveals answers to common problems and issues - read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, feel free to Open a Support Ticket

Quick Start
For using PlainAdmin you will first need to import some files in your project.
This template requires Node and Gulp CLI. Please follow these steps to install the required technologies:
-
Make sure you have Node locally installed.
-
Download Gulp Command Line Interface to be able to use gulp in your Terminal.
-
After installing Gulp, run yarn install in the main plainadmin/ folder to download all the project dependencies. You’ll find them in the node_modules/ folder.
-
Run gulp in the plainadmin/ folder to serve the project files using BrowserSync. Running gulp will compile the theme and open /https://plainadmin.com in your main browser.
yarn add gulp-cli -g
yarn add
gulp
While the gulp command is running, files in the assets/scss/ and all html files will be monitored for changes. Files from the assets/scss/ folder will generate injected CSS.
Hit CTRL+C to terminate the gulp command. This will stop the local server from running.
FILE STRUCTURE
CSS
Copy and paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
<!-- ========== All CSS files linkup ========= -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/LineIcons.css" />
<link rel="stylesheet" href="assets/css/fullcalendar.css" />
<link rel="stylesheet" href="assets/css/morris.css" />
<link rel="stylesheet" href="assets/css/main.css" />
JS
Most of bootstrap components require the use of JavaScript to function. Specifically, they require Bootstrap.bundle.js. We added some popular plugins in the /js folder. Our main.js file contains some additional scripts which may come handy for your project.
<!-- ========= All Javascript files linkup ======== -->
<script src="assets/js/bootstrap.bundle.min.js">
<script src="assets/js/Chart.min.js">
<script src="assets/js/apexcharts.min.js">
<script src="assets/js/dynamic-pie-chart.js">
<script src="assets/js/moment.min.js">
<script src="assets/js/fullcalendar.js">
<script src="assets/js/jsvectormap.min.js">
<script src="assets/js/world-merc.js">
<script src="assets/js/polyfill.js">
<script src="assets/js/main.js">
STARTER TEMPLATE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="shortcut icon"
href="assets/images/favicon.svg"
type="image/x-icon"
/>
<title>Blank Page | PlainAdmin</title>
<!-- ========== All CSS files linkup ========= -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/LineIcons.css" />
<link rel="stylesheet" href="assets/css/fullcalendar.css" />
<link rel="stylesheet" href="assets/css/morris.css" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<!-- ======== sidebar-nav start =========== -->
<aside class="sidebar-nav-wrapper">
<div class="navbar-logo">
</div>
<nav class="sidebar-nav">
</nav>
</aside>
<div class="overlay"></div>
<!-- ======== sidebar-nav end =========== -->
<!-- ======== main-wrapper start =========== -->
<main class="main-wrapper">
<!-- ========== header start ========== -->
<header class="header">
<div class="container-fluid">
</div>
</header>
<!-- ========== header end ========== -->
<!-- ========== section start ========== -->
<section class="section">
<div class="container-fluid">
</div>
<!-- end container -->
</section>
<!-- ========== section end ========== -->
<!-- ========== footer start =========== -->
<footer class="footer">
<div class="container-fluid">
</div>
<!-- end container -->
</footer>
<!-- ========== footer end =========== -->
</main>
<!-- ======== main-wrapper end =========== -->
<!-- ========= All Javascript files linkup ======== -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/Chart.min.js"></script>
<script src="assets/js/apexcharts.min.js"></script>
<script src="assets/js/dynamic-pie-chart.js"></script>
<script src="assets/js/moment.min.js"></script>
<script src="assets/js/fullcalendar.js"></script>
<script src="assets/js/jsvectormap.min.js"></script>
<script src="assets/js/world-merc.js"></script>
<script src="assets/js/polyfill.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
Layout and Theme
We designed this template with two layouts. Right Sidebar and Left Sidebar. Default layout come with Left Sidebar. If you want Right Sidebar you have to add .rightSidebar this class at <body> tag.
<body class="rightSidebar">
.....
Content Here
.....
</body>
We designed this template with two Theme. Light Theme and Dark Theme. Default theme come with Light Version. If you want Dark Version you have to add .darkTheme this class at <body> tag.
<body class="darkTheme">
.....
Content Here
.....
</body>
Colors
BACKGROUND COLORS
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables scss/_variables.scss file.
- .primary-bg
- .secondary-bg
- .success-bg
- .danger-bg
- .warning-bg
- .info-bg
- .dark-bg
- .light-bg
- .active-bg
- .deactive-bg
- .gray-bg
- .purple-bg
- .orange-bg
<ul class="color-box mb-30">
<li class="primary-bg text-white">
.primary-bg
</li>
<li class="secondary-bg text-white">
.secondary-bg
</li>
<li class="success-bg text-white">
.success-bg
</li>
<li class="danger-bg text-white">
.danger-bg
</li>
<li class="warning-bg text-white">
.warning-bg
</li>
<li class="info-bg text-white">
.info-bg
</li>
<li class="dark-bg text-white">
.dark-bg
</li>
<li class="light-bg text-dark">
.light-bg
</li>
<li class="active-bg text-white">
.active-bg
</li>
<li class="deactive-bg text-dark">
.deactive-bg
</li>
<li class="gray-bg text-white">
.gray-bg
</li>
<li class="purple-bg text-white">
.purple-bg
</li>
<li class="orange-bg text-white">
.orange-bg
</li>
</ul>
also primary-bg-100 through primary-bg-900 available. for more info check out scss/default.scss file.
TEXT COLORS
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables scss/_variables.scss file.
- .text-primary
- .text-secondary
- .text-success
- .text-danger
- .text-warning
- .text-info
- .text-dark
- .text-light
- .text-active
- .text-deactive
- .text-gray
- .text-purple
- .text-orange
<ul class="text-color-box mb-30">
<li class="text-primary">
.text-primary
</li>
<li class="text-secondary">
.text-secondary
</li>
<li class="text-success">
.text-success
</li>
<li class="text-danger">
.text-danger
</li>
<li class="text-warning">
.text-warning
</li>
<li class="text-info">
.text-info
</li>
<li class="text-dark">
.text-dark
</li>
<li class="text-light bg-dark-600">
.text-light
</li>
<li class="text-active">
.text-active
</li>
<li class="text-deactive">
.text-deactive
</li>
<li class="text-gray">
.text-gray
</li>
<li class="text-purple">
.text-purple
</li>
<li class="text-orange">
.text-orange
</li>
</ul>
Helper Classes
MARGIN AND PADDING
For controlling negative space you can use .mt-5 through .mt-200 these classes.
Note: .mt- for margin-top, .mb- for margin-bottom, .ml- for margin-left, .mr- for margin-right, .pt- for padding-top, .pb- for padding-bottom, .pl- for padding-left, .pr- for padding-right.
.mt-5 {
margin-top: 5px;
}
.mt-10 {
margin-top: 10px;
}
.mt-15 {
margin-top: 15px;
}
.mt-20 {
margin-top: 20px;
}
Alerts
ALERTS
Alerts are available for any length of text. For proper styling, use one of the these required contextual classes (e.g., .primary-alert ).
Excitement, Energy, Passion, Courage, Attention
Excitement, Energy, Passion, Courage, Attention
Excitement, Energy, Passion, Courage, Attention
Enthusiasm, Opportunity, Spontaneity, Happiness, Positivity
Growth, Harmony, Kindness, Dependability
Safety, Harmony, Stability, Reliability, Balance
Safety, Harmony, Stability, Reliability, Balance
Safety, Harmony, Stability, Reliability, Balance
Safety, Harmony, Stability, Reliability, Balance
<div class="alert-list-wrapper">
<div class="alert-box primary-alert">
<div class="alert">
<p>
Excitement, Energy, Passion, Courage, Attention
</p>
</div>
</div>
<!-- end alert-box -->
<div class="alert-box danger-alert">
<div class="alert">
<p>
Excitement, Energy, Passion, Courage, Attention
</p>
</div>
</div>
<!-- end alert-box -->
<div class="alert-box orange-alert">
<div class="alert">
<p>
Excitement, Energy, Passion, Courage, Attention
</p>
</div>
</div>
<!-- end alert-box -->
<div class="alert-box warning-alert">
<div class="alert">
<p>
Enthusiasm, Opportunity, Spontaneity, Happiness,
Positivity
</p>
</div>
</div>
<!-- end alert-box -->
<div class="alert-box info-alert">
<div class="alert">
<p>
Growth, Harmony, Kindness, Dependability
</p>
</div>
</div>
<!-- end alert-box -->
<div class="alert-box success-alert">
<div class="alert">
<p>
Safety, Harmony, Stability, Reliability, Balance
</p>
</div>
</div>
<!-- end alert-box -->
<div class="alert-box secondary-alert">
<div class="alert">
<p>
Safety, Harmony, Stability, Reliability, Balance
</p>
</div>
</div>
<!-- end alert-box -->
<div class="alert-box gray-alert">
<div class="alert">
<p>
Safety, Harmony, Stability, Reliability, Balance
</p>
</div>
</div>
<!-- end alert-box -->
<div class="alert-box black-alert">
<div class="alert">
<p>
Safety, Harmony, Stability, Reliability, Balance
</p>
</div>
</div>
<!-- end alert-box -->
</div>
Cards
Cards are built with as little markup and styles as possible but still manage to deliver a bunch of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. Cards have no top, left, and right margins by default, so use spacing utilities as needed. They have no fixed width to start, so they’ll fill the full width of its parent.
Card Style One
Card Title here
With supporting text below as a natural lead-in to additional content. consectetur adipiscing elit. Integer posuere erat a ante.
<!-- ========= card-style-1 start ========= -->
<div class="card-style-1 mb-30">
<div class="card-meta">
<div class="image">
<img
src="assets/images/cards/card-style-1/admin-1.png"
alt=""
/>
</div>
<div class="text">
<p class="text-sm text-medium">
Posted by : <a href="#0">Hammad</a>
</p>
</div>
</div>
<div class="card-image">
<a href="#0">
<img
src="assets/images/cards/card-style-1/card-1.jpg"
alt=""
/>
</a>
</div>
<div class="card-content">
<h4><a href="#0"> Card Title here </a></h4>
<p>
With supporting text below as a natural lead-in to
additional content. consectetur adipiscing elit. Integer
posuere erat a ante.
</p>
</div>
</div>
<!-- end card-->
<!-- ========= card-style-1 end ========= -->
Card Style Two
Card Title here
With supporting text below as a natural lead-in to additional content. consectetur adipiscing elit. Integer posuere erat a ante.
<!-- ========= card-style-2 start ========= -->
<div class="card-style-2 mb-30">
<div class="card-image">
<a href="#0">
<img
src="assets/images/cards/card-style-2/card-1.jpg"
alt=""
/>
</a>
</div>
<div class="card-content">
<h4><a href="#0">Card Title here </a></h4>
<p>
With supporting text below as a natural lead-in to
additional content. consectetur adipiscing elit. Integer
posuere erat a ante.
</p>
</div>
</div>
<!-- ========= card-style-2 end ========= -->
Card Style Three
Card Title here
With supporting text below as a natural lead-in to additional content. consectetur adipiscing elit. Integer posuere erat a ante. With supporting text below as a natural lead-in to additional content. consectetur adipiscing elit. Integer posuere erat a ante.
Read More
<!-- ========= card-style-3 start ========= -->
<div class="card-style-3 mb-30">
<div class="card-content">
<h4><a href="#0">Card Title here </a></h4>
<p>
With supporting text below as a natural lead-in to
additional content. consectetur adipiscing elit. Integer
posuere erat a ante. With supporting text below as a
natural lead-in to additional content. consectetur
adipiscing elit. Integer posuere erat a ante.
</p>
<a href="#0" class="read-more">Read More</a>
</div>
</div>
<!-- ========= card-style-3 end ========= -->
Card Style Four
Card Title here
With supporting text below as a natural lead-in to additional content. consectetur adipiscing elit. Integer posuere erat a ante.
Read More
<!-- ========= card-style-4 start ========= -->
<div class="card-style-4 mb-30">
<div class="card-image">
<a href="#0">
<img
src="assets/images/cards/card-style-4/card-1.png"
alt=""
/>
</a>
</div>
<div class="card-content">
<h4><a href="#0">Card Title here </a></h4>
<p>
With supporting text below as a natural lead-in to
additional content. consectetur adipiscing elit. Integer
posuere erat a ante.
</p>
<a href="#0" class="read-more">Read More</a>
</div>
</div>
<!-- ========= card-style-4 end ========= -->
Card Style Five
Card Title here
With supporting text below as a natural lead-in to additional content. consectetur adipiscing elit. Integer posuere erat a ante.
Read More
<!-- ========= card-style-5 start ========= -->
<div class="card-style-5 mb-30">
<div class="card-image">
<a href="#0">
<img
src="assets/images/cards/card-style-5/card-1.jpg"
alt=""
/>
</a>
</div>
<div class="card-content">
<h4><a href="#0">Card Title here </a></h4>
<p>
With supporting text below as a natural lead-in to
additional content. consectetur adipiscing elit. Integer
posuere erat a ante.
</p>
<a href="#0" class="main-btn primary-btn btn-hover"> Read More</a>
</div>
</div>
<!-- end card -->
<!-- ========= card-style-5 end ========= -->
Tabs
We include Bootstrap Tabs also with new styles.
<div class="row">
<div class="col-lg-12">
<div class="tab-style-1 card-style mb-30">
<nav class="nav" id="nav-tab">
<button
class="active"
id="tab-1-1"
data-bs-toggle="tab"
data-bs-target="#tabContent-1-1"
>
Home
</button>
<button
id="tab-1-2"
data-bs-toggle="tab"
data-bs-target="#tabContent-1-2"
>
Profile
</button>
<button
id="tab-1-3"
data-bs-toggle="tab"
data-bs-target="#tabContent-1-3"
>
Contact
</button>
</nav>
<div class="tab-content" id="nav-tabContent1">
<div class="tab-pane fade show active" id="tabContent-1-1">
<p>.....</p>
</div>
<div class="tab-pane fade" id="tabContent-1-2">
<p>.....</p>
</div>
<div class="tab-pane fade" id="tabContent-1-3">
<p>.....</p>
</div>
</div>
</div>
<!-- end card -->
</div>
<!-- end col -->
</div>
Forms
Form Elements
We Designed form elements in few styles.
Input Field
<div class="input-style-1">
<label>Full Name</label>
<input type="text" placeholder="Full Name" />
</div>
<!-- end input -->
<div class="input-style-2">
<input type="text" placeholder="Full Name" />
<span class="icon"> <i class="lni lni-user"></i> </span>
</div>
<!-- end input -->
<div class="input-style-3">
<input type="text" placeholder="Full Name" />
<span class="icon"><i class="lni lni-user"></i></span>
</div>
<!-- end input -->
Textarea Field
<div class="input-style-1">
<label>Message</label>
<textarea placeholder="Message" rows="5"></textarea>
</div>
<!-- end textarea -->
<div class="input-style-3">
<textarea placeholder="Message" rows="5"></textarea>
<span class="icon">
<i class="lni lni-text-format"></i>
</span>
</div>
<!-- end textarea -->
Select
<div class="select-style-1">
<label>Category</label>
<div class="select-position">
<select>
<option value="">Select category</option>
<option value="">Category one</option>
<option value="">Category two</option>
<option value="">Category three</option>
</select>
</div>
</div>
<!-- end select -->
<div class="select-style-2">
<div class="select-position">
<select>
<option value="">Select category</option>
<option value="">Category one</option>
<option value="">Category two</option>
<option value="">Category three</option>
</select>
</div>
</div>
<!-- end select -->
Toggle switch input
<div class="form-check form-switch toggle-switch mb-30">
<input
class="form-check-input"
type="checkbox"
id="toggleSwitch1"
/>
<label class="form-check-label" for="toggleSwitch1"> Default switch checkbox input </label>
</div>
<div class="form-check form-switch toggle-switch">
<input
class="form-check-input"
type="checkbox"
id="toggleSwitch2"
checked
/>
<label class="form-check-label" for="toggleSwitch2"> Default switch checkbox input </label>
</div>
Checkbox
<div class="form-check checkbox-style mb-20">
<input
class="form-check-input"
type="checkbox"
value=""
id="checkbox-1"
/>
<label class="form-check-label" for="checkbox-1">
Default Checkbox</label
>
</div>
<!-- end checkbox -->
<div class="form-check checkbox-style mb-20">
<input
class="form-check-input"
type="checkbox"
value=""
id="checkbox-2"
disabled
/>
<label class="form-check-label" for="checkbox-2">
Disabled Checkbox</label
>
</div>
<!-- end checkbox -->
<div class="form-check checkbox-style checkbox-success mb-20">
<input
class="form-check-input"
type="checkbox"
value=""
id="checkbox-3"
/>
<label class="form-check-label" for="checkbox-3">
Success Checkbox</label
>
</div>
<!-- end checkbox -->
<div class="form-check checkbox-style checkbox-warning mb-20">
<input
class="form-check-input"
type="checkbox"
value=""
id="checkbox-4"
/>
<label class="form-check-label" for="checkbox-4">
Warning Checkbox</label
>
</div>
<!-- end checkbox -->
<div class="form-check checkbox-style checkbox-danger mb-20">
<input
class="form-check-input"
type="checkbox"
value=""
id="checkbox-5"
/>
<label class="form-check-label" for="checkbox-5">
Danger Checkbox</label
>
</div>
<!-- end checkbox -->
Radio
<div class="form-check radio-style mb-20">
<input
class="form-check-input"
type="radio"
value=""
id="radio-1"
/>
<label class="form-check-label" for="radio-1">
Default Radio</label
>
</div>
<!-- end radio -->
<div class="form-check radio-style mb-20">
<input
class="form-check-input"
type="radio"
value=""
id="radio-2"
disabled
/>
<label class="form-check-label" for="radio-2">
Disabled Radio</label
>
</div>
<!-- end radio -->
<div class="form-check radio-style radio-success mb-20">
<input
class="form-check-input"
type="radio"
value=""
id="radio-3"
/>
<label class="form-check-label" for="radio-3">
Success Radio</label
>
</div>
<!-- end radio -->
<div class="form-check radio-style radio-warning mb-20">
<input
class="form-check-input"
type="radio"
value=""
id="radio-4"
/>
<label class="form-check-label" for="radio-4">
Warning Radio</label
>
</div>
<!-- end radio -->
<div class="form-check radio-style radio-danger mb-20">
<input
class="form-check-input"
type="radio"
value=""
id="radio-5"
/>
<label class="form-check-label" for="radio-5">
Danger Radio</label
>
</div>
<!-- end radio -->
Icons
We Use LineIcons and Material Design Icons in our template. You can use any Icon of these icons. You have to include assets/fonts this folder in your project folder and assets/css/lineIcons.css and materialdesignicons.min.css these two files also.
Tables
As we use Bootstrap you can access any of Bootstrap table in you project. and we have some new design you can checkout these at tables.html, basic-table.html and tables-responsive.html
Basic Table
Lead |
Phone No |
Company |
Action |
|
---|---|---|---|---|
![]() Courtney Henry |
(303)555 3343523 |
UIdeck digital agency |
|
|
![]() JOhn Doe |
(303)555 3343523 |
Graygrids digital agency |
|
|
![]() David Smith |
(303)555 3343523 |
Abc agency |
|
|
![]() Jonathon |
(303)555 3343523 |
Creative IT Agency |
|
|
![]() Anna Lee |
(303)555 3343523 |
Halal It agency |
|
|
![]() Gray Simon |
(303)555 3343523 |
DesignCourse |
|
<div class="table-wrapper table-responsive">
<table class="table">
<thead>
<tr>
<th><h6>Lead</h6></th>
<th><h6>Email</h6></th>
<th><h6>Phone No</h6></th>
<th><h6>Company</h6></th>
<th><h6>Action</h6></th>
</tr>
<!-- end table row-->
</thead>
<tbody>
<tr>
<td class="min-width">
<div class="lead">
<div class="lead-image">
<img
src="assets/images/lead/lead-1.png"
alt=""
/>
</div>
<div class="lead-text">
<p>Courtney Henry</p>
</div>
</div>
</td>
<td class="min-width">
<p><a href="#0">yourmail@gmail.com</a></p>
</td>
<td class="min-width">
<p>(303)555 3343523</p>
</td>
<td class="min-width">
<p>UIdeck digital agency</p>
</td>
<td>
<div class="action">
<button class="text-danger">
<i class="lni lni-trash-can"></i>
</button>
</div>
</td>
</tr>
<!-- end table row -->
<tr>
<td class="min-width">
<div class="lead">
<div class="lead-image">
<img
src="assets/images/lead/lead-2.png"
alt=""
/>
</div>
<div class="lead-text">
<p>JOhn Doe</p>
</div>
</div>
</td>
<td class="min-width">
<p><a href="#0">yourmail@gmail.com</a></p>
</td>
<td class="min-width">
<p>(303)555 3343523</p>
</td>
<td class="min-width">
<p>Graygrids digital agency</p>
</td>
<td>
<div class="action">
<button class="text-danger">
<i class="lni lni-trash-can"></i>
</button>
</div>
</td>
</tr>
<!-- end table row -->
<tr>
<td class="min-width">
<div class="lead">
<div class="lead-image">
<img
src="assets/images/lead/lead-3.png"
alt=""
/>
</div>
<div class="lead-text">
<p>David Smith</p>
</div>
</div>
</td>
<td class="min-width">
<p><a href="#0">yourmail@gmail.com</a></p>
</td>
<td class="min-width">
<p>(303)555 3343523</p>
</td>
<td class="min-width">
<p>Abc agency</p>
</td>
<td>
<div class="action">
<button class="text-danger">
<i class="lni lni-trash-can"></i>
</button>
</div>
</td>
</tr>
<!-- end table row -->
<tr>
<td class="min-width">
<div class="lead">
<div class="lead-image">
<img
src="assets/images/lead/lead-4.png"
alt=""
/>
</div>
<div class="lead-text">
<p>Jonathon</p>
</div>
</div>
</td>
<td class="min-width">
<p><a href="#0">yourmail@gmail.com</a></p>
</td>
<td class="min-width">
<p>(303)555 3343523</p>
</td>
<td class="min-width">
<p>Creative IT Agency</p>
</td>
<td>
<div class="action">
<button class="text-danger">
<i class="lni lni-trash-can"></i>
</button>
</div>
</td>
</tr>
<!-- end table row -->
<tr>
<td>
<div class="lead">
<div class="lead-image">
<img
src="assets/images/lead/lead-5.png"
alt=""
/>
</div>
<div class="lead-text">
<p>Anna Lee</p>
</div>
</div>
</td>
<td>
<p><a href="#0">yourmail@gmail.com</a></p>
</td>
<td>
<p>(303)555 3343523</p>
</td>
<td>
<p>Halal It agency</p>
</td>
<td>
<div class="action">
<button class="text-danger">
<i class="lni lni-trash-can"></i>
</button>
</div>
</td>
</tr>
<!-- end table row -->
<tr>
<td>
<div class="lead">
<div class="lead-image">
<img
src="assets/images/lead/lead-6.png"
alt=""
/>
</div>
<div class="lead-text">
<p>Gray Simon</p>
</div>
</div>
</td>
<td>
<p><a href="#0">yourmail@gmail.com</a></p>
</td>
<td>
<p>(303)555 3343523</p>
</td>
<td>
<p>DesignCourse</p>
</td>
<td>
<div class="action">
<button class="text-danger">
<i class="lni lni-trash-can"></i>
</button>
</div>
</td>
</tr>
<!-- end table row -->
</tbody>
</table>
<!-- end table -->
</div>