admint
Version:
Open source admin dashboard template
918 lines (913 loc) • 43.2 kB
HTML
<html class="no-js" lang="en">
<head>
<!-- Meta Tags -->
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="theme_bubble" />
<!-- Page Title -->
<title>Admint Documentation</title>
<!-- Favicon Icon -->
<link rel="icon" href="assets/img/favicon.png">
<!-- Plugins css -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/material-icons.css">
<link rel="stylesheet" type="text/css" href="assets/css/jqvmap.min.css" />
<link id="mode-option" rel="stylesheet" type="text/css" href="assets/css/style.css" />
</head>
<body class="yoo-white-bg">
<div class="yoo-height-b60 yoo-height-lg-b60"></div>
<header class="yoo-header yoo-style1 yoo-sticky-menu">
<div class="yoo-main-header">
<div class="yoo-main-header-in">
<div class="yoo-main-header-left">
<a href="index.html" class="yoo-logo-link yoo-light-logo"><img src="assets/img/logo-light.svg" alt="logo-light" /></a>
<!-- For Site Title -->
<!-- <span class="yoo-site-title">
<a href="index.html">Logo</a>
</span> -->
</div>
<div class="yoo-main-header-right">
<div class="yoo-nav-wrap yoo-fade-up">
<div class="yoo-nav-toggle">
<i class="material-icons-outlined">more_vert</i>
</div>
<nav class="yoo-nav yoo-desktop-nav">
<ul class="yoo-nav-list">
<li>
<a href="#"><i class="material-icons-outlined">home</i> Home</a>
</li>
<li>
<a href="#"><i class="material-icons-outlined">subscriptions</i> Features</a>
</li>
<li>
<a href="#"><i class="material-icons-outlined">folder</i> Apps</a>
</li>
</ul>
</nav>
<!-- .yoo-nav -->
</div>
<!-- .yoo-nav-wrap -->
<ul class="yoo-ex-nav yoo-style1 yoo-flex yoo-mp0">
<li>
<div class="yoo-toggle-body yoo-search-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-search-btn">
<i class="material-icons-outlined">search</i>
</span>
<div class="yoo-dropdown yoo-search-dropdown">
<form action="#" class="yoo-search yoo-style1">
<input type="text" placeholder="Search..." class="yoo-search-input">
<div class="yoo-toggle-cross">
<i class="material-icons-outlined">close</i>
</div>
<button class="yoo-search-submit"><i class="material-icons-outlined">search</i></button>
</form>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-message-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-message-btn">
<i class="material-icons-outlined">email</i>
<span class="yoo-ex-nav-label">9</span>
</span>
<div class="yoo-dropdown yoo-notify-dropdown">
<h2 class="yoo-nofify-title">
<span class="yoo-nofify-title-left">Messages</span>
<span class="yoo-nofify-title-right"><a href="#">Mark All as Read</a></span>
</h2>
<ul class="yoo-nofify-list yoo-style1 yoo-mp0">
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="assets/img/msg/msg1.png" alt="msg1">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Bob Dylan
<span class="yoo-online-status yoo-live"></span>
</h3>
<div class="yoo-msg">
Contrary to popular belief, Lorem Ipsum is...
</div>
<span class="yoo-notify-time">12:23</span>
</div>
</a>
</li>
<li>
<a href="#" class="active">
<div class="yoo-nofify-thumb">
<img src="assets/img/msg/msg2.png" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
David Gilmour
<span class="yoo-online-status"></span>
</h3>
<div class="yoo-msg">
Contrary to popular belief, Lorem Ipsum is...
</div>
<span class="yoo-notify-time">12:23</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="assets/img/msg/msg3.png" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Jeff Beck
<span class="yoo-online-status yoo-live"></span>
</h3>
<div class="yoo-msg">
Contrary to popular belief, Lorem Ipsum is...
</div>
<span class="yoo-notify-time">12:23</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="assets/img/msg/msg4.png" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Guthrie Govan
<span class="yoo-online-status"></span>
</h3>
<div class="yoo-msg">
Contrary to popular belief, Lorem Ipsum is...
</div>
<span class="yoo-notify-time">12:23</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="assets/img/msg/msg5.png" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Eric Johnson
<span class="yoo-online-status"></span>
</h3>
<div class="yoo-msg">
Contrary to popular belief, Lorem Ipsum is...
</div>
<span class="yoo-notify-time">12:23</span>
</div>
</a>
</li>
</ul>
<a href="#" class="yoo-btn yoo-style2">SEE ALL <i class="material-icons-outlined">navigate_next</i></a>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-notice-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-notice-btn">
<i class="material-icons-outlined">notifications</i>
<span class="yoo-ex-nav-label">3</span>
</span>
<div class="yoo-dropdown yoo-notify-dropdown">
<h2 class="yoo-nofify-title">
<span class="yoo-nofify-title-left">Notifications</span>
</h2>
<ul class="yoo-nofify-list yoo-style1 yoo-mp0">
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color2">
<i class="material-icons-outlined">supervisor_account</i>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">Invite your friends to dashboard.</h3>
<span class="yoo-notify-time">5 hour ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color4">
<i class="material-icons-outlined">calendar_today</i>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">3 Tasks pending this month.</h3>
<span class="yoo-notify-time">6 hour ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color3">
<i class="material-icons-outlined">favorite_border</i>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">7 People loved your activity.</h3>
<span class="yoo-notify-time">9 hour ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color2">
<i class="material-icons-outlined">chat_bubble_outline</i>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">John commented on activity.</h3>
<span class="yoo-notify-time">1 day ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color1">
<img src="assets/img/msg/msg1.png" alt="msg1" />
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">Click your picture or add an account.</h3>
<span class="yoo-notify-time">2 days ago</span>
</div>
</a>
</li>
</ul>
<a href="#" class="yoo-btn yoo-style2">SEE ALL <i class="material-icons-outlined">navigate_next</i></a>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-app-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-sidebar-btn">
<i class="material-icons-outlined">apps</i>
</span>
<div class="yoo-dropdown yoo-notify-dropdown">
<h2 class="yoo-nofify-title">Quick Navigation</h2>
<ul class="yoo-nofify-list yoo-style2 yoo-mp0">
<li>
<a href="#">
<div class="yoo-nofify-icon yoo-icon-color1">
<i class="material-icons-outlined">bar_chart</i>
</div>
<div class="yoo-nofify-text">
<h3>Chart</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-icon yoo-icon-color2">
<i class="material-icons-outlined">bubble_chart</i>
</div>
<div class="yoo-nofify-text">
<h3>Big Data</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-icon yoo-icon-color3">
<i class="material-icons-outlined">folder_open</i>
</div>
<div class="yoo-nofify-text">
<h3>Storage</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-icon yoo-icon-color4">
<i class="material-icons-outlined">security</i>
</div>
<div class="yoo-nofify-text">
<h3>Security</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-icon yoo-icon-color3">
<i class="material-icons-outlined">layers</i>
</div>
<div class="yoo-nofify-text">
<h3>Themes</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-icon yoo-icon-color2">
<i class="material-icons-outlined">attach_file</i>
</div>
<div class="yoo-nofify-text">
<h3>Upload</h3>
</div>
</a>
</li>
</ul>
<hr>
<a href="#" class="yoo-btn yoo-style2">SEE ALL <i class="material-icons-outlined">navigate_next</i></a>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-profile-nav yoo-style1">
<div class="yoo-toggle-btn yoo-profile-nav-btn">
<div class="yoo-profile-nav-text">
<span>Welcome,</span>
<h4>Thom Yorke</h4>
</div>
<div class="yoo-profile-nav-img">
<img src="assets/img/profile-pic.png" alt="profile">
</div>
</div>
<ul class="yoo-dropdown yoo-style1">
<li>
<a href="#"><i class="material-icons-outlined">account_circle</i>My Profile</a>
</li>
<li>
<a href="#"><i class="material-icons-outlined">settings</i>Settings</a>
</li>
<li>
<a href="#"><i class="material-icons-outlined">videocam</i>Upload</a>
</li>
<li>
<a href="#"><i class="material-icons-outlined">help</i>Help</a>
</li>
<li class="yoo-dropdown-cta"><a href="#">Sign Out</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</header><!-- .yoo-header -->
<div class="yoo-sidebarheader-toggle">
<div class="yoo-button-bar1"></div>
<div class="yoo-button-bar2"></div>
<div class="yoo-button-bar3"></div>
</div><!-- .yoo-sidebarheader-toggle -->
<div class="yoo-sidebarheader yoo-white-bg">
<div class="yoo-add">
<div class="yoo-add-in">
<a target="_blank" href="https://yookits.com/product/admint-pro-bootstrap-admin-dashboard-template/" class="yoo-add-thumb">
<img src="assets/img/admint-litee.png" alt="Admint">
</a>
<h2 class="yoo-add-title"><a target="_blank" href="https://yookits.com/product/admint-pro-bootstrap-admin-dashboard-template/">Go Pro & unlock 100+ more UI components & pages.</a></h2>
<a target="_blank" href="https://yookits.com/product/admint-pro-bootstrap-admin-dashboard-template/" class="yoo-add-btn btn btn-success btn-sm">Show Me</a>
</div>
</div>
<div class="yoo-sidebarheader-in" data-scrollbar>
<div class="yoo-sidebar-nav">
<ul class="yoo-sidebar-nav-list yoo-mp0">
<li>
<a href="index.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">dashboard</i></span>
<span class="yoo-sidebar-link-text">Dashboard</span>
</span>
</a>
</li>
<li>
<a href="profile-settings.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">settings</i></span>
<span class="yoo-sidebar-link-text">Profile Settings</span>
</span>
</a>
</li>
<li>
<a href="calendar.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">event_note</i></span>
<span class="yoo-sidebar-link-text">Calender</span>
</span>
</a>
</li>
<li class="yoo-sidebar-has-children">
<a href="#">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">account_circle</i></span>
<span class="yoo-sidebar-link-text">Log In/Sign Up</span>
</span>
</a>
<ul class="yoo-sidebar-nav-dropdown">
<li>
<a href="login.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Log In</span>
</span>
</a>
</li>
<li>
<a href="sighup.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Sign Up</span>
</span>
</a>
</li>
</ul><!-- .yoo-sidebar-nav-dropdown -->
</li>
<li>
<a href="alerts.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">cloud</i></span>
<span class="yoo-sidebar-link-text">Notifications</span>
</span>
</a>
</li>
<li>
<a href="buttons.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">folder</i></span>
<span class="yoo-sidebar-link-text">Buttons</span>
</span>
</a>
</li>
<li>
<a href="tabs.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">table_chart</i></span>
<span class="yoo-sidebar-link-text">Tabs</span>
</span>
</a>
</li>
<li>
<a href="form-element.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">add_to_photos</i></span>
<span class="yoo-sidebar-link-text">Forms</span>
</span>
</a>
</li>
<li>
<a href="pagination.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">flag</i></span>
<span class="yoo-sidebar-link-text">Pagination</span>
</span>
</a>
</li>
<li>
<a href="accordion.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">horizontal_split</i></span>
<span class="yoo-sidebar-link-text">Accordion</span>
</span>
</a>
</li>
<li>
<a href="badge.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">date_range</i></span>
<span class="yoo-sidebar-link-text">Badge</span>
</span>
</a>
</li>
<li>
<a href="breadcrumb.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">aspect_ratio</i></span>
<span class="yoo-sidebar-link-text">Breadcrumb</span>
</span>
</a>
</li>
<li>
<a href="card.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">account_balance_wallet</i></span>
<span class="yoo-sidebar-link-text">Card</span>
</span>
</a>
</li>
<li>
<a href="typography.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">font_download</i></span>
<span class="yoo-sidebar-link-text">Typography</span>
</span>
</a>
</li>
<li>
<a href="color-plate.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">opacity</i></span>
<span class="yoo-sidebar-link-text">Color Plate</span>
</span>
</a>
</li>
<li class="yoo-sidebar-has-children">
<a href="#">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">archive</i></span>
<span class="yoo-sidebar-link-text">Icons</span>
</span>
</a>
<ul class="yoo-sidebar-nav-dropdown">
<li>
<a href="material-icons.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Material Icons</span>
</span>
</a>
</li>
<li>
<a href="font-awesome-icons.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">FontAwesome Icons</span>
</span>
</a>
</li>
<li>
<a href="line-icons.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Line Icons</span>
</span>
</a>
</li>
<li>
<a href="themify-icons.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Themify Icons</span>
</span>
</a>
</li>
</ul><!-- .yoo-sidebar-nav-dropdown -->
</li>
<li>
<a href="svg-maps.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">explore</i></span>
<span class="yoo-sidebar-link-text">SVG Maps</span>
</span>
</a>
</li>
<li class="active">
<a href="documentation.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">library_books</i></span>
<span class="yoo-sidebar-link-text">Documentation</span>
</span>
</a>
</li>
</ul><!-- .yoo-sidebar-nav-list -->
</div>
</div>
</div><!-- .yoo-sidebarheader -->
<div class="yoo-content yoo-style1">
<div class="container">
<div class="yoo-height-b100 yoo-height-lg-b60"></div>
<div class="yoo-doc-wrap">
<div class="yoo-doc-left">
<div class="yoo-doc-nav">
<ul class="yoo-doc-nav-list yoo-onepage-nav">
<li><a href="#int" class="active">Introduction</a></li>
<li><a href="#fs">Files Structure</a></li>
<li><a href="#sty">Stylesheets</a></li>
<li><a href="#chc">CSS Helper Classes</a></li>
<li><a href="#js">Javascript</a></li>
<li><a href="#cp">Color Palettes</a></li>
<li><a href="#ref">References</a></li>
<li><a href="#cs">Customer Support</a></li>
</ul>
</div>
</div>
<div class="yoo-doc-right">
<div class="yoo-doc-body">
<div class="yoo-doc-header" id="doc1">
<h1 class="yoo-doc-title">Admint Documentation</h1>
<div class="yoo-height-b10 yoo-height-lg-b10"></div>
<div class="yoo-doc-subtitle">Thank you so much to see our template. We are trying to explain about Admint, this is a part of our premium dashboard template called AdmintPro. If you have any questions about Admint or AdmintPro, please feel free to mail us.</div>
</div>
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<hr>
<div class="yoo-height-b35 yoo-height-lg-b35"></div>
<div class="yoo-doc-paragraph">
<h2 id="int">Introduction</h2>
<div class="yoo-height-b10 yoo-height-lg-b10"></div>
<p>Admint is modern and clean Bootstrap 4 based dashboard template. It is built using HTML5, CSS3, jQuery and we are using CSS preprocessor SASS. It is super easy to customize and 100% responsive.</p>
<p>It can be used for most type of dashboard and app templates like Analytics, HR, CRM, Crypto, Accounting dashboard or you can create web or desktop apps like Messenger, Live Chat, Project Management, Email or Team Collaboration.</p>
<p>Also, you can create a social networking web app with a profile page, newsfeed and messenger.</p>
</div>
<div class="yoo-doc-paragraph">
<div class="yoo-height-b50 yoo-height-lg-b50"></div>
<h2>Installation</h2>
<div class="yoo-height-b10 yoo-height-lg-b10"></div>
<p>Admint can be installed using multiple methods. Pick your favorite method from the list below.</p>
<div class="yoo-height-b10 yoo-height-lg-b10"></div>
<h5>Via NPM</h5>
<pre>npm i admint</pre>
<div class="yoo-height-b25 yoo-height-lg-b25"></div>
<h5>Via Git</h5>
<ul>
<li>You can fork <a href="https://github.com/yookits/admint" target="_blank" class="yoo-link">Admint Repository</a>. GitHub fork <a href="https://help.github.com/en/github/getting-started-with-github/fork-a-repo" target="_blank" class="yoo-link">Guidline</a></li>
<li>
Clone your machine by using this Command<br>
<pre>git clone https://github.com/yookits/admint.git</pre>
</li>
</ul>
</div>
<div class="yoo-doc-paragraph">
<div class="yoo-height-b50 yoo-height-lg-b50"></div>
<h2 id="fs">Files Structure</h2>
<div class="yoo-height-b10 yoo-height-lg-b10"></div>
<div class="yoo-doc-box">
<ul class="yoo-structure-list">
<li>
<span>Admint</span>
<ul>
<li>
<span>assets</span>
<ul>
<li>css</li>
<li>scss</li>
<li>fonts</li>
<li>img</li>
<li>js</li>
</ul>
</li>
<li>
<span>ui-kits</span> [All UI Kits are added here]
<ul>
<li>according.html</li>
</ul>
</li>
<li>
<span>index.html</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="yoo-doc-paragraph">
<div class="yoo-height-b55 yoo-height-lg-b40"></div>
<h2 id="sty">Stylesheets</h2>
<div class="yoo-height-b10 yoo-height-lg-b10"></div>
<p>We have own CSS class naming convention that begins with prefix 'yoo-'. Some examples of Admint class names would be: yoo-main-header, yoo-sidebarheader, yoo-footer. For this naming convention, you can integrate unlimited 3rd party plugins and resources without worrying about class naming conflicts. However for Bootstrap and other 3rd party plugins class extending we used their own CSS naming format.</p>
<p>We use SASS as a CSS processor. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.</p>
<p>If don't know SASS coding, don't worry you can directly edit CSS file.</p>
</div>
<div class="yoo-doc-paragraph">
<div class="yoo-height-b55 yoo-height-lg-b40"></div>
<h2 id="chc">CSS Helper Classes</h2>
<div class="yoo-height-b10 yoo-height-lg-b10"></div>
<p>We are creating some global class for easy work.</p>
<div class="yoo-height-b10 yoo-height-lg-b10"></div>
<div class="yoo-card yoo-style1">
<div class="yoo-card-body">
<div class="yoo-table yoo-style1 yoo-type1 yoo-equal-width-50 table-responsive">
<table class="table">
<thead>
<tr>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
yoo-margin-[size]<br>
yoo-margin-top-[size]<br>
yoo-margin-bottom-[size]<br>
yoo-margin-left-[size]<br>
yoo-margin-right-[size]
</td>
<td>Margin helper classes where [size] can accept 0 to 15. Example: yoo-margin-0, yoo-margin-top-15</td>
</tr>
<tr>
<td>
yoo-padding-[size]<br>
yoo-padding-top-[size]<br>
yoo-padding-bottom-[size]<br>
yoo-padding-left-[size]<br>
yoo-padding-right-[size]
</td>
<td>Margin helper classes where [size] can accept 0 to 15. Example: yoo-padding-0, yoo-padding-top-15</td>
</tr>
<tr>
<td>yoo-height-b[size] - This is for Larg Screen <br>yoo-height-lg-b[size] - This is for Mobile Screen</td>
<td>Space helper classes where [size] can accept 0, 5, 10, 15, 20. Example: yoo-height-b10, yoo-height-lg-b20</td>
</tr>
<tr>
<td>yoo-font-style-i</td>
<td>Italic Font helper classes.</td>
</tr>
<tr>
<td>
yoo-text-transform-u<br>
yoo-text-transform-l<br>
yoo-text-transform-c
</td>
<td>Text transform helper classes.</td>
</tr>
<tr>
<td>yoo-font-[weight]</td>
<td>Weight helper classes where [weight] can accept light, regular, medium, semi-bold, bold, black. Example: yoo-font-bold</td>
</tr>
<tr>
<td>yoo-radious[size]</td>
<td>Radious helper classes where [size] can accept 1 to 10. Example: yoo-radious1, yoo-radious10</td>
</tr>
</tbody>
</table>
</div><!-- .yoo-table -->
</div>
</div>
</div>
<div class="yoo-doc-paragraph">
<div class="yoo-height-b55 yoo-height-lg-b40"></div>
<h2 id="js">Javascript</h2>
<div class="yoo-height-b10 yoo-height-lg-b10"></div>
<p>We are using jQeury for JS. All custom jQuery and plugin initialize code are written in main.js (there is a separate file for chart.js initialize) file. And all are function-based. Like if you did not want any JS block you just remove that function.</p>
<p>For SVG Maps, we are creating an svg-map folder. Please take your desired file. We also create an <a href="svg-maps.html" class="yoo-link">SVG map</a> preview page.</p>
<div class="yoo-height-b10 yoo-height-lg-b10"></div>
<div class="yoo-card yoo-style1">
<div class="yoo-card-body">
<div class="yoo-table yoo-style1 yoo-type1 yoo-equal-width-50 table-responsive">
<table class="table">
<thead>
<tr>
<th>Function</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>mainMenu()</td>
<td>Initialize Main Menu.</td>
</tr>
<tr>
<td>mobileMenu()</td>
<td>Initialize Mobile Menu.</td>
</tr>
<tr>
<td>sideBarHeader()</td>
<td>Initialize Sidebar Menu.</td>
</tr>
<tr>
<td>stickyHeader()</td>
<td>Initialize Sticky Header.</td>
</tr>
<tr>
<td>onePageNav()</td>
<td>Initialize One Page Navigation.</td>
</tr>
<tr>
<td>tabInt()</td>
<td>Initialize Our Custom Tab.</td>
</tr>
<tr>
<td>accordianInt()</td>
<td>Initialize Our Custom Accordion.</td>
</tr>
<tr>
<td>progressBar()</td>
<td>Initialize Progress Bar.</td>
</tr>
<tr>
<td>calendarInt()</td>
<td>Initialize Calender Plugin.</td>
</tr>
<tr>
<td>customSelectInt()</td>
<td>Initialize Custom Selector.</td>
</tr>
<tr>
<td>modalVideoInt()</td>
<td>Initialize Video Modal.</td>
</tr>
<tr>
<td>nicescrollInt()</td>
<td>Initialize Nice Scroll.</td>
</tr>
<tr>
<td>customToggleInt()</td>
<td>Initialize Custom Toggle Button.</td>
</tr>
<tr>
<td>bootstrapInt()</td>
<td>Bootstrap Element Initialize</td>
</tr>
</tbody>
</table>
</div><!-- .yoo-table -->
</div>
</div>
</div>
<div class="yoo-doc-paragraph">
<div class="yoo-height-b55 yoo-height-lg-b40"></div>
<h2 id="ref">References</h2>
<div class="yoo-height-b10 yoo-height-lg-b10"></div>
<p>We are using some JS and CSS plugins for creating Admint.</p>
<div class="yoo-height-b10 yoo-height-lg-b10"></div>
<div class="yoo-card yoo-style1">
<div class="yoo-card-body">
<div class="yoo-table yoo-style1 yoo-type1 yoo-equal-width-50 table-responsive">
<table class="table">
<thead>
<tr>
<th>Plugins/Libray</th>
<th>List</th>
</tr>
</thead>
<tbody>
<tr>
<td>jQuery</td>
<td><a href="https://jquery.com/" class="yoo-link">https://jquery.com/</a></td>
</tr>
<tr>
<td>Bootstrap</td>
<td><a href="https://getbootstrap.com/" class="yoo-link">https://getbootstrap.com/</a></td>
</tr>
<tr>
<td>Chart JS</td>
<td><a href="https://www.chartjs.org/" class="yoo-link">https://www.chartjs.org/</a></td>
</tr>
<tr>
<td>jQVMap</td>
<td><a href="http://jqvmap.com" class="yoo-link">http://jqvmap.com</a></td>
</tr>
<tr>
<td>jQuery UI</td>
<td><a href="https://jqueryui.com/" class="yoo-link">https://jqueryui.com/</a></td>
</tr>
<tr>
<td>Moment JS</td>
<td><a href="https://momentjs.com/" class="yoo-link">https://momentjs.com/</a></td>
</tr>
<tr>
<td>Quill</td>
<td><a href="https://quilljs.com/" class="yoo-link">https://quilljs.com/</a></td>
</tr>
<tr>
<td>Swiper Slider</td>
<td><a href="https://swiperjs.com/" class="yoo-link">https://swiperjs.com/</a></td>
</tr>
<tr>
<td>Material Icons</td>
<td><a href="https://material.io/" class="yoo-link">https://material.io/</a></td>
</tr>
<tr>
<td>Fontawesome</td>
<td><a href="https://fontawesome.com/" class="yoo-link">https://fontawesome.com/</a></td>
</tr>
<tr>
<td>Themify Icons</td>
<td><a href="https://themify.me/themify-icons" class="yoo-link">https://themify.me/themify-icons</a></td>
</tr>
<tr>
<td>Line Icons</td>
<td><a href="https://lineicons.com/" class="yoo-link">https://lineicons.com/</a></td>
</tr>
</tbody>
</table>
</div><!-- .yoo-table -->
</div>
</div>
</div>
<div class="yoo-doc-paragraph">
<div class="yoo-height-b55 yoo-height-lg-b40"></div>
<h2 id="cs">Customer Support</h2>
<div class="yoo-height-b10 yoo-height-lg-b10"></div>
<p>After buying if you are facing any issues or you can not understand any part you can request for support.</p>
<p>Our dedicated support team will assist you within Two Business Day.</p>
<div class="yoo-height-b20 yoo-height-lg-b20"></div>
<p><b>Note: </b>All images you see in the demos use only for demo purposes and is not allowed to be included in the download file.</p>
</div>
<div class="yoo-height-b100 yoo-height-lg-b60"></div>
</div>
</div>
</div>
</div>
<div class="yoo-footer yoo-style1">
<div class="container-fluid">
<div class="yoo-footer-content">
<div class="yoo-copyride">
Made with coffee & love by <a href="https://yookits.com/">YooKits</a> &
<a href="#">Weebfy</a> ©All rights reserved.
</div>
<ul class="yoo-footer-nav yoo-mp0 yoo-flex">
<li><a href="#">About</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/vendor/modernizr-3.5.0.min.js"></script>
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/Chart.min.js"></script>
<script src="assets/js/chartjs.light.js"></script>
<script src="assets/js/smooth-scrollbar.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>