idashboard

<!DOCTYPE html> <html class="no-js" 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" /> <meta name="author" content="YooKits" />  <title>Documentation</title>  <link rel="icon" href="assets/img/favicon.png">  <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="assets/css/iDashboard.css" /> </head> <body> <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.svg" alt="logo-light" /></a>   </div> <div class="yoo-main-header-right"> <div class="yoo-nav-wrap yoo-fade-up"> <div class="yoo-nav-toggle"> <ion-icon name="ellipsis-vertical"></ion-icon> </div> <nav class="yoo-nav yoo-desktop-nav"> <ul class="yoo-nav-list"> <li><a href="#"><ion-icon name="albums"></ion-icon> Home</a></li> <li><a href="#"><ion-icon name="cloud"></ion-icon> Contact</a></li> </ul> </nav>  </div>  <ul class="yoo-ex-nav yoo-style1 yoo-flex yoo-mp0"> <li> <div class="yoo-toggle-body yoo-message-area yoo-style1"> <span class="yoo-toggle-btn yoo-ex-nav-btn yoo-message-btn"> <ion-icon name="mail"></ion-icon> </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/user/1.jpg" alt=""> </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"> Thank you for purchasing! <br> When you arrive prepared to negotiate </div> <span class="yoo-notify-time">10:23</span> </div> </a> </li> <li> <a href="#" class="active"> <div class="yoo-nofify-thumb"> <img src="assets/img/user/2.jpg" 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"> Thank you for purchasing! <br> When you arrive prepared to negotiate </div> <span class="yoo-notify-time">12:23</span> </div> </a> </li> <li> <a href="#"> <div class="yoo-nofify-thumb"> <img src="assets/img/user/3.jpg" 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"> Thank you for purchasing! <br> When you arrive prepared to negotiate </div> <span class="yoo-notify-time">Jan 05</span> </div> </a> </li> <li> <a href="#"> <div class="yoo-nofify-thumb"> <img src="assets/img/user/4.jpg" 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"> Thank you for purchasing! <br> When you arrive prepared to negotiate </div> <span class="yoo-notify-time">Jan 10</span> </div> </a> </li> <li> <a href="#"> <div class="yoo-nofify-thumb"> <img src="assets/img/user/5.jpg" 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"> Thank you for purchasing! <br> When you arrive prepared to negotiate </div> <span class="yoo-notify-time">Jan 16</span> </div> </a> </li> </ul> <a href="#" class="yoo-btn yoo-style2">SEE ALL <ion-icon name="chevron-forward"></ion-icon></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"> <ion-icon name="notifications"></ion-icon> <span class="yoo-ex-nav-label">3</span> </span> <div class="yoo-dropdown yoo-notify-dropdown"> <h2 class="yoo-nofify-title">Notification</h2> <ul class="yoo-nofify-list yoo-style1 yoo-mp0"> <li> <a href="#" class="yoo-nofify-list-in"> <div class="yoo-nofify-icon yoo-gray-box"> <ion-icon name="people"></ion-icon> </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-green-box"> <ion-icon name="today"></ion-icon> </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-light-blue-box"> <ion-icon name="heart"></ion-icon> </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-gray-box"> <ion-icon name="chatbox"></ion-icon> </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-blue-box"> <img src="assets/img/user/1.jpg" 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 <ion-icon name="chevron-forward"></ion-icon></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="#"><ion-icon name="person-circle"></ion-icon>My Profile</a> </li> <li> <a href="#"><ion-icon name="settings"></ion-icon>Settings</a> </li> <li> <a href="#"><ion-icon name="videocam"></ion-icon>Upload</a> </li> <li> <a href="#"><ion-icon name="help-circle"></ion-icon>Help</a> </li> <li class="yoo-dropdown-cta"><a href="#">Sign Out</a></li> </ul> </div> </li> </ul> </div> </div> </div> </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> <div class="yoo-sidebarheader"> <div class="yoo-add"> <div class="yoo-add-in"> <a target="_blank" href="https://yookits.com/product/idashboard-pro-bootstrap-admin-template/" class="yoo-add-thumb"> <img src="assets/img/idashboard.jpg" alt="idashboard"> </a> <h2 class="yoo-add-title"><a target="_blank" href="https://yookits.com/product/idashboard-pro-bootstrap-admin-template/">Go Pro & unlock 100+ more UI components & pages.</a></h2> <a target="_blank" href="https://yookits.com/product/idashboard-pro-bootstrap-admin-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-search"> <form action="#" class="yoo-search yoo-style1 yoo-search-md"> <input type="text" placeholder="Search..." class="yoo-search-input"> <button class="yoo-search-submit"><ion-icon name="search"></ion-icon></button> <button class="yoo-voice-btn"><ion-icon name="mic"></ion-icon></button> </form> </div> <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 yoo-style1"><ion-icon name="layers"></ion-icon></span> <span class="yoo-sidebar-link-text">Dashboard</span> </span> </a> </li> <li> <a href="settings.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="create"></ion-icon></span> <span class="yoo-sidebar-link-text">Profile Settings</span> </span> </a> </li> <li> <a href="calender.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="calendar"></ion-icon></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 yoo-style1"><ion-icon name="person-circle"></ion-icon></span> <span class="yoo-sidebar-link-text">Sign 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="signup.html" > <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Sign Up</span> </span> </a> </li> </ul> </li> <li> <a href="alerts.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="notifications"></ion-icon></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 yoo-style1"><ion-icon name="albums"></ion-icon></span> <span class="yoo-sidebar-link-text">Buttons</span> </span> </a> </li> <li> <a href="tables.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="cube"></ion-icon></span> <span class="yoo-sidebar-link-text">Table</span> </span> </a> </li> <li> <a href="forms.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="duplicate"></ion-icon></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 yoo-style1"><ion-icon name="trail-sign"></ion-icon></span> <span class="yoo-sidebar-link-text">Pagination</span> </span> </a> </li> <li> <a href="typography.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="text"></ion-icon></span> <span class="yoo-sidebar-link-text">Typography</span> </span> </a> </li> <li class="yoo-sidebar-has-children"> <a href="#" > <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="cloud"></ion-icon></span> <span class="yoo-sidebar-link-text">Components</span> </span> </a> <ul class="yoo-sidebar-nav-dropdown"> <li> <a href="badge.html" > <span class="yoo-sidebar-link-title"> <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-text">Breadcrumb</span> </span> </a> </li> <li> <a href="card.html" > <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Card</span> </span> </a> </li> <li> <a href="carousel.html" > <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Carousel</span> </span> </a> </li> <li> <a href="dropdowns.html" > <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Dropdowns</span> </span> </a> </li> <li> <a href="list-group.html" > <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">List Group</span> </span> </a> </li> <li> <a href="modal.html" > <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Modal</span> </span> </a> </li> <li> <a href="progress.html" > <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Progress</span> </span> </a> </li> <li> <a href="tooltips.html" > <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Tooltips</span> </span> </a> </li> </ul> </li> <li> <a href="icons.html" target="_blank"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="archive"></ion-icon></span> <span class="yoo-sidebar-link-text">Icons</span> </span> </a> </li> <li> <a href="svgmaps.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="map"></ion-icon></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 yoo-style1"><ion-icon name="reader"></ion-icon></span> <span class="yoo-sidebar-link-text">Documentation</span> </span> </a> </li> </ul> </div> </div> </div> <div class="yoo-content yoo-style1"> <div class="yoo-height-b30 yoo-height-lg-b30"></div> <div class="container"> <div class="yoo-uikits-heading"> <h2 class="yoo-uikits-title">iDashboard Documentation</h2> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="yoo-documentation-body"> <div class="yoo-height-b5 yoo-height-lg-b5"></div> <h4>Introduction</h4> <p>iDashboard is a part of our premium Dashboard called iDashboardPro. We are using the famous Bootstrap 4 framework and maintain iOS Design pattern. The technology that we are using is 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 types of dashboards and app templates. It has all types of the component which needs for developing any types of web app or website. If you can't see any feature that you need for your project on this free version, definitely you should use iDashboardPro, here we added all kinds of possible features, components, and elements for Dashboard.</p> <div class="yoo-height-b15 yoo-height-lg-b15"></div> <h4>Installation</h4> <p>iDashboard can be installed using multiple methods. Pick your favorite method from the list below.</p> <h5>Via NPM</h5> <pre>npm i idashboard</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/idashboard" target="_blank">iDashboard Repository</a>. GitHub fork <a href="https://help.github.com/en/github/getting-started-with-github/fork-a-repo" target="_blank">Guidline</a></li> <li> Clone your machine by using this Command<br> <pre>git clone https://github.com/yookits/idashboard.git</pre> </li> </ul> <div class="yoo-height-b25 yoo-height-lg-b25"></div> <h4>Files Structure</h4> <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>index.html</span> </li> </ul> </li> </ul> </div> <div class="yoo-height-b35 yoo-height-lg-b35"></div> <h4>Stylesheets</h4> <p>We have own CSS class naming convention that begins with prefix 'yoo-'. Some examples of iDashboard 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 preprocessor. 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 class="yoo-height-b35 yoo-height-lg-b35"></div> <h4>CSS Helper Classes</h4> <p>We are creating some global class for easy work.</p> <div class="yoo-card yoo-style1"> <div class="yoo-table yoo-style1 yoo-type1 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 class="text-left w-50">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 class="text-left w-50">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 class="text-left w-50">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 class="text-left w-50">Italic Font helper classes.</td> </tr> <tr> <td> yoo-text-transform-u<br> yoo-text-transform-l<br> yoo-text-transform-c </td> <td class="text-left w-50">Text transform helper classes.</td> </tr> <tr> <td>yoo-font-[weight]</td> <td class="text-left w-50">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 class="text-left w-50">Radious helper classes where [size] can accept 1 to 10. Example: yoo-radious1, yoo-radious10</td> </tr> </tbody> </table> </div> </div> <div class="yoo-height-b35 yoo-height-lg-b35"></div> <h4>Javascript</h4> <p>We are using jQeury. All custom jQuery and plugin initialize code are written in iDashboard.js (there is a separate file for chart and svg map initialize) file. And all are function-based. Like if you did not want any JS block you just remove or comment 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="svgmaps.html">SVG map</a> preview page.</p> <div class="yoo-card yoo-style1"> <div class="yoo-table yoo-style1 yoo-type1 table-responsive"> <table class="table"> <thead> <tr> <th class="w-50">Function</th> <th class="text-left w-50">Description</th> </tr> </thead> <tbody> <tr> <td class="w-50">mainMenu()</td> <td class="text-left w-50">Initialize Main Menu.</td> </tr> <tr> <td class="w-50">mobileMenu()</td> <td class="text-left w-50">Initialize Mobile Menu.</td> </tr> <tr> <td class="w-50">sideBarHeader()</td> <td class="text-left w-50">Initialize Sidebar Menu.</td> </tr> <tr> <td class="w-50">stickyHeader()</td> <td class="text-left w-50">Initialize Sticky Header.</td> </tr> <tr> <td class="w-50">calendarInt()</td> <td class="text-left w-50">Initialize Calender Plugin.</td> </tr> <tr> <td class="w-50">nicescrollInt()</td> <td class="text-left w-50">Initialize Nice Scroll.</td> </tr> <tr> <td class="w-50">customToggleInt()</td> <td class="text-left w-50">Initialize Custom Toggle Button.</td> </tr> <tr> <td class="w-50">bootstrapInt()</td> <td class="text-left w-50">Bootstrap Element Initialize</td> </tr> <tr> <td class="w-50">checkMark()</td> <td class="text-left w-50">For Custome Check Box</td> </tr> <tr> <td class="w-50">formField()</td> <td class="text-left w-50">For iOS Form Style</td> </tr> </tbody> </table> </div> </div> <div class="yoo-height-b35 yoo-height-lg-b35"></div> <h4>Color Palettes</h4> <p>All color comes from SASS variable, if you would like to use your own color pallet, just go to variables.scss file and replace color to your own color. The compiler will change all colors to your color.</p> <div class="yoo-height-b35 yoo-height-lg-b35"></div> <h4>Customer Support</h4> <p>After buying if you are facing any issues or you can not understand any part you can request for support. Our dedicated support team will assist you within Two Business Day.</p> </div> </div> </div> </div> <div class="yoo-height-b40 yoo-height-lg-b40"></div> <footer class="yoo-footer yoo-style1"> <div class="container"> <div class="yoo-footer-content"> <div class="yoo-copyride">Made with coffee & love by <a href="https://yookits.com/" target="_blank">YooKits</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> </footer> </div>  <script src="assets/js/jquery-1.12.4.min.js"></script> <script src="assets/js/bootstrap.bundle.min.js"></script> <script src="assets/js/smooth-scrollbar.js"></script> <script src="assets/js/iDashboard.js"></script> <script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script> </body> </html>