1. Overview
  2. Template
  3. Features
  4. Folder Structure
  5. HTML Structure
  6. Top Menu
  7. Main Menu
  8. Theme Color
  9. New Page
  10. References
  11. End Of Documentation

Admin Lab - Responsive Admin Template - shared on weidea.net

Documentation v1.2

Thank You For Purchasing Admin Lab

If you have any questions that are beyond the scope of this help file, please email our support dkmosa@gmail.com.

Introduction

Admin Lab is a responsive admin dashboard template built with Twitter Bootstrap Framework and it has a huge collection of reusable UI components and integrated with jQuery plugins also. Admin Lab can be used for applications(CMS, CRM, Custom Admin Application, Admin Dashboard). Admin Lab template works on all major web browsers, Desktop, iPhone, iPad, Tablet and is any smart phone friendly.

RTL Support

Most of the languages in the world start from Left-To-Right (LTR). But there are some languages like Arabic, Persian, Urdu, Hebrew, Yiddish and some Jewish Languages start from Right-To-Left (RTL). Our new Admin Lab version 1.1 is updated for RTL support too. You can easily use this Admin Dashboard for any of the RTL languages.

By:  Vector Lab
Contact:  dkmosa@gmail.com
Demo: http://thevectorlab.net/adminlab
RTL Demo: http://thevectorlab.net/adminlab-rtl

Template

Features

Folder Structure

admin lab template/
|-- css/
|-- js/
|-- img/
|-- assets/

Root folder: Admin Lab

css: contains all the css files.
img: contains all the image files.
assets: contains all the assets files.
js: contains all the javascript files.

* RTL Folder Structure is same as English Structure

HTML Structure

Including The Core CSS and Core JavaScript Files.

Add the following codes inside the <head> tag.

<head>
  <meta charset="utf-8" />
  <title>Admin Lab Dashboard </title>
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <meta content="" name="description" />
  <meta content="" name="author" />
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-responsive.min.css"/>
  <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.css"/>
  <link rel="stylesheet" href="css/style.css"/>
  <link rel="stylesheet" href="css/style_responsive.css"/>
  <link rel="stylesheet" href="css/style_default.css" id="style_color">
  <link rel="stylesheet" href="assets/fancybox/source/jquery.fancybox.css"/>
  <link rel="stylesheet" href="assets/uniform/css/uniform.default.css" />
  <link rel="stylesheet" href="assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" />
  <link rel="stylesheet" href="assets/jqvmap/jqvmap/jqvmap.css" type="text/css" media="screen"/>
</head>

Header

<!-- BEGIN HEADER -->
<div id="header" class="navbar navbar-inverse navbar-fixed-top">
  <!-- BEGIN TOP NAVIGATION BAR -->
  <div class="navbar-inner">
    <div class="container-fluid">
    <!--LOGO & NAVIGATION BAR-->
    </div>
  </div>
  <!-- END TOP NAVIGATION BAR -->
</div>
<!-- END HEADER -->

Sidebar

<!-- BEGIN SIDEBAR -->
<div id="sidebar" class="nav-collapse collapse">
  <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
  <div class="sidebar-toggler hidden-phone"></div>
  <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
  <!-- BEGIN RESPONSIVE QUICK SEARCH FORM -->
  <div class="navbar-inverse">
    <form class="navbar-search visible-phone">
      <input type="text" class="search-query" placeholder="Search" />
    </form>
  </div>
  <!-- END RESPONSIVE QUICK SEARCH FORM -->
  <!-- SIDEBAR MENU GOES HERE -->
</div>
<!-- END SIDEBAR -->

Content

<!-- BEGIN PAGE -->
<div id="main-content">
  <!-- BEGIN PAGE CONTAINER-->
  <div class="container-fluid">
    <!-- BEGIN PAGE HEADER-->
    <div class="row-fluid">
      <div class="span12">
        <!-- BEGIN PAGE TITLE & BREADCRUMB-->
        <h3 class="page-title">
          Page Title
          <small>page description</small>
        </h3>
        <ul class="breadcrumb">
          <!-- BREADCRUMB & SEARCH GOES HERE-->
        </ul>
        <!-- END PAGE TITLE & BREADCRUMB-->
      </div>
    </div>
    <!-- END PAGE HEADER-->
    <!-- BEGIN PAGE CONTENT-->
    <div id="page">
      <!-- PAGE CONTENT GOES HERE-->
    </div>
    <!-- END PAGE CONTENT-->
  </div>
  <!-- END PAGE CONTAINER-->
</div>
<!-- END PAGE -->

Footer

<!-- BEGIN FOOTER -->
<div id="footer">
  2013 &copy; Admin Lab Dashboard.
  <div class="span pull-right">
    <span class="go-top"><i class="icon-arrow-up"></i></span>
  </div>
</div>
<!-- END FOOTER -->

End Of Page(Javascripts)

<!-- BEGIN JAVASCRIPTS -->
<!-- Load javascripts at bottom, this will reduce page load time -->
<script src="js/jquery-1.8.3.min.js"></script>
<script src="assets/jquery-slimscroll/jquery-ui-1.9.2.custom.min.js"></script>
<script src="assets/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="assets/fullcalendar/fullcalendar/fullcalendar.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.blockui.js"></script>
<script src="assets/js/jquery.cookie.js"></script>
<!-- ie8 fixes -->
<!--[if lt IE 9]>
<script src="js/excanvas.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
<script src="js/scripts.js"></script>
<script>
  jQuery(document).ready(function() {
    // initiate layout and plugins
    App.setMainPage(true);
    App.init();
  });
</script>
<!-- END JAVASCRIPTS -->

CSS Code Comment Sample

/*Form wizard*/
.form-wizard .progress {
  margin-bottom: 30px;
}
.form-wizard .steps {
  padding: 10px 0;
  margin-bottom: 15px;
}

CSS Code for RTL

For RTL direction should be mentioned direction: rtl;

body {
    direction: rtl;
}

 

Top Menu

Top menu enables an easy access to most frequently accessed information and pages.

Theme Color

Admin Lab have 4 theme colors but you can add more themes.

New Page

To create a new page, you can use blank.html which provides basic page layout which you can extend and modify further.

References

Below is the list of all plugins and external resources used to power this template.

Name Description URL
jQuery 1.8.3 Core Javascript library http://www.jquery.com
Twitter Bootstrap 2.3.1 Sleek, intuitive, and powerful front-end framework for faster and easier web development http://twitter.github.com/bootstrap/
Twitter Bootstrap RTL 2.3.1 Sleek, intuitive, and powerful front-end framework for faster and easier web development https://github.com/muayyad-alsadi/bootstrap-rtl
Bootstrap Tree A lightweight Tree component, built for use with the Twitter Bootstrap framework. https://github.com/cutterbl/Bootstrap-Tree
Nestable Drag & drop hierarchical list with mouse and touch compatibility (jQuery / Zepto plugin) https://github.com/dbushell/Nestable
Dropzone DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews. http://www.dropzonejs.com/
jQuery BlockUI The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser http://jquery.malsup.com/block/
jQuery Knob Nice, downward compatible, touchable, jQuery dial http://anthonyterrien.com/knob/
Peity Peity (sounds like deity) is a simple jQuery plugin that converts an element's content into a simple canvas mini pie line or bar chart and is compatible with any browser that supports canvas: Chrome, Firefox, IE9+, Opera, Safari. http://benpickles.github.com/peity/
jQuery Cookie A simple, lightweight jQuery plugin for reading, writing and deleting cookies. https://github.com/carhartl/jquery-cookie
jQuery Pulsate jQuery Pulsate provides animated pulsating effect that's useful for focussing attention to a certain part of your webpage in a subtle way. http://kilianvalkhof.com/jquerypulsate/
Respond A fast & lightweight polyfill for min/max-width and CSS3 Media Queries (for IE 6-8, and more) https://github.com/scottjehl/Respond
Excanvas Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages http://excanvas.sourceforge.net/
Colorpicker for Bootstrap Add color picker to field or to any other element http://www.eyecon.ro/bootstrap-colorpicker/
Datepicker for Bootstrap Add datepicker picker to field or to any other element http://www.eyecon.ro/bootstrap-datepicker/
Date Range Picker for Bootstrap This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates https://github.com/dangrossman/bootstrap-daterangepicker
Bootstrap Timepicker Easily select a time for a text input using your mouse or keyboards arrow keys. http://jdewit.github.com/bootstrap-timepicker/
Clockface Timepicker Clockface is a simple timepicker for Twitter Bootstrap http://vitalets.github.com/clockface/
jQuery Tags Input Magically convert a simple text input into a cool tag list with this jQuery plugin https://github.com/xoxco/jQuery-Tags-Input
Bootstrap Toggle Bootstrap Toggle Buttons Plugin https://github.com/nostalgiaz/bootstrap-toggle-buttons
Bootstrap WYSIWYG5 Simple WYSIWYG Editor for Bootstrap http://jhollingworth.github.com/bootstrap-wysihtml5/
CKEditor CKEditor is a ready-for-use HTML text editor designed to simplify web content creation http://ckeditor.com/
Chosen for Twitter Bootstrap Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly http://chosen-sass-bootstrap.herokuapp.com/
DataTables DataTables for Twitter Bootstrap http://www.datatables.net/blog/Twitter_Bootstrap_2
Input Mask Bootstrap Inputmask http://jasny.github.io/bootstrap/javascript.html#inputmask
JSlider JSlider https://github.com/egorkhmelev/jslider
Bootstrap Fileupload The file upload plugin allows you to create a visually appealing file or image upload widgets http://jasny.github.com/bootstrap/javascript.html#fileupload
FancyBox FancyBox is a tool for displaying images, html content and multi-media http://fancybox.net/
Flot Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. http://www.flotcharts.org/
gmaps.js gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code http://hpneo.github.com/gmaps/
FullCalendar FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar http://arshaw.com/fullcalendar/
Gritter Notifications The super awesome background is just to show you that all notifications are transparent http://boedesign.com/demos/gritter/
jQuery slimScroll slimScroll is a small (3.7KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar http://rocha.la/jQuery-slimScroll
JQVMAP JQVMap is a jQuery plugin that renders Vector Maps. It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9. Legacy support for older versions of Internet Explorer 6-8 is provided via VML. http://jqvmap.com/
Uniform Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility http://uniformjs.com/
Font Awesome The iconic font designed for use with Twitter Bootstrap http://fortawesome.github.com/Font-Awesome/

End Of Documentation

Once again, thanks for purchasing Admin Lab.