A full featured, premium web application admin dashboard built with Twitter Bootstrap 3. It comes with a myriad of ready to use components ideal for bulding you web application, CRM, CMS, admin panel, dashboard, or any other type of application backend.

You can visit the Bootstrap page to find out all the various components that you can implement with Sublime. The docs are comprehensive and they include everything to help you get started with using all the various components.

Once you've purchased Sublime, please leave a rating! Positive ratings help bring out more updates and add more features to the template.

If you have any questions that are beyond the scope of this help file, please feel free to get in touch.

Support requests can go through the form on my ThemeForest profile page
Admin/
├── bootstrap/
│   ├── css/
│   ├── js/
│   └── fonts/
├── css/
│   ├── fonts/
│   └── skins/
├── data/
├── fonts/
├── img/
│   └── flags/
├── js/
├── less/
├── plugins/

Sublime download includes precompiled CSS, JavaScript, font assets, img assets, json data files, php files along with source LESS files. plugins folder contains third party plugin resources.

All layout variations follow this basic layout skeleton...
HTML5 doctype
<!DOCTYPE html>
<html class="no-js {page class}">
                
Head
<head>
    <!-- meta -->
    <meta charset="utf-8">
    <meta name="description" content="Flat, Clean, Responsive, application admin template built with bootstrap 3">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <!-- /meta -->

    <title>Sublime - Web Application Admin Dashboard</title>

    <!-- page level plugin styles -->
    <!-- /page level plugin styles -->

    <!-- core styles -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/themify-icons.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <!-- /core styles -->

    <!-- template styles -->
    <link rel="stylesheet" href="css/skins/palette.css">
    <link rel="stylesheet" href="css/fonts/font.css">
    <link rel="stylesheet" href="css/main.css">
    <!-- template styles -->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- load modernizer -->
    <script src="plugins/modernizr.js"></script>
</head>

                
body
<!-- body -->

<body>
    <div class="app">
        <!-- top header -->
        <header class="header header-fixed navbar">

            <div class="brand">
                <!-- toggle offscreen menu -->
                <a href="javascript:;" class="ti-menu off-left visible-xs" data-toggle="offscreen" data-move="ltr"></a>
                <!-- /toggle offscreen menu -->

                <!-- logo -->
                <a href="index.html" class="navbar-brand">
                    <img src="img/logo.png" alt="">
                    <span class="heading-font">
                        Sublime
                    </span>
                </a>
                <!-- /logo -->
            </div>

            <ul class="nav navbar-nav">
                <li class="hidden-xs">
                    <!-- toggle small menu -->
                    <a href="javascript:;" class="toggle-sidebar">
                        <i class="ti-menu"></i>
                    </a>
                    <!-- /toggle small menu -->
                </li>
                <li class="header-search">
                    <!-- toggle search -->
                    <a href="javascript:;" class="toggle-search">
                        <i class="ti-search"></i>
                    </a>
                    <!-- /toggle search -->
                    <div class="search-container">
                        <form role="search">
                            <input type="text" class="form-control search" placeholder="type and press enter">
                        </form>
                    </div>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">

                <li class="dropdown hidden-xs">
                    <a href="javascript:;" data-toggle="dropdown">
                        <i class="ti-more-alt"></i>
                    </a>
                    <ul class="dropdown-menu animated zoomIn">
                        <li class="dropdown-header">Quick Links</li>
                        <li>
                            <a href="javascript:;">Start New Campaign</a>
                        </li>
                        <li>
                            <a href="javascript:;">Review Campaigns</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:;">Settings</a>
                        </li>
                        <li>
                            <a href="javascript:;">Wish List</a>
                        </li>
                        <li>
                            <a href="javascript:;">Purchases History</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:;">Activity Log</a>
                        </li>
                        <li>
                            <a href="javascript:;">Settings</a>
                        </li>
                        <li>
                            <a href="javascript:;">System Reports</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:;">Help</a>
                        </li>
                        <li>
                            <a href="signin.html">Report a Problem</a>
                        </li>
                    </ul>
                </li>

                <li class="notifications dropdown">
                    <a href="javascript:;" data-toggle="dropdown">
                        <i class="ti-bell"></i>
                        <div class="badge badge-top bg-danger animated flash">
                            <span>3</span>
                        </div>
                    </a>
                    <div class="dropdown-menu animated fadeInLeft">
                        <div class="panel panel-default no-m">
                            <div class="panel-heading small"><b>Notifications</b>
                            </div>
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <a href="javascript:;">
                                        <span class="pull-left mt5 mr15">
                                            <img src="img/faceless.jpg" class="avatar avatar-sm img-circle" alt="">
                                        </span>
                                        <div class="m-body">
                                            <div class="">
                                                <small><b>CRYSTAL BROWN</b></small>
                                                <span class="label label-danger pull-right">ASSIGN AGENT</span>
                                            </div>
                                            <span>Opened a support query</span>
                                            <span class="time small">2 mins ago</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="list-group-item">
                                    <a href="javascript:;">
                                        <div class="pull-left mt5 mr15">
                                            <div class="circle-icon bg-danger">
                                                <i class="ti-download"></i>
                                            </div>
                                        </div>
                                        <div class="m-body">
                                            <span>Upload Progress</span>
                                            <div class="progress progress-xs mt5 mb5">
                                                <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                                </div>
                                            </div>
                                            <span class="time small">Submited 23 mins ago</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="list-group-item">
                                    <a href="javascript:;">
                                        <span class="pull-left mt5 mr15">
                                            <img src="img/faceless.jpg" class="avatar avatar-sm img-circle" alt="">
                                        </span>
                                        <div class="m-body">
                                            <em>Status Update:</em>
                                            <span>All servers now online</span>
                                            <span class="time small">5 days ago</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>

                            <div class="panel-footer">
                                <a href="javascript:;">See all notifications</a>
                            </div>
                        </div>
                    </div>
                </li>

                <li class="off-right">
                    <a href="javascript:;" data-toggle="dropdown">
                        <img src="img/faceless.jpg" class="header-avatar img-circle" alt="user" title="user">
                        <span class="hidden-xs ml10">Gerald Morris</span>
                        <i class="ti-angle-down ti-caret hidden-xs"></i>
                    </a>
                    <ul class="dropdown-menu animated fadeInRight">
                        <li>
                            <a href="javascript:;">Settings</a>
                        </li>
                        <li>
                            <a href="javascript:;">Upgrade</a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="badge bg-danger pull-right">3</div>
                                <span>Notifications</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">Help</a>
                        </li>
                        <li>
                            <a href="signin.html">Logout</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </header>
        <!-- /top header -->

        <section class="layout">
            <!-- sidebar menu -->
            <aside class="sidebar offscreen-left">
                <!-- main navigation -->
                <nav class="main-navigation" data-height="auto" data-size="6px" data-distance="0" data-rail-visible="true" data-wheel-step="10">
                    <p class="nav-title">MENU</p>
                    <ul class="nav">
                        <!-- dashboard -->
                        <li>
                            <a href="index.html">
                                <i class="ti-home"></i>
                                <span>Dashboard</span>
                            </a>
                        </li>
                        <!-- /dashboard -->

                        <!-- ui -->
                        <li>
                            <a href="javascript:;">
                                <i class="toggle-accordion"></i>
                                <i class="ti-layout-media-overlay-alt-2"></i>
                                <span>UI Elements</span>
                            </a>
                            <ul class="sub-menu">
                                <li>
                                    <a href="buttons.html">
                                        <span>Buttons</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="general.html">
                                        <span>General Elements</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="typography.html">
                                        <span>Typography</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="tabs_accordion.html">
                                        <span>Tabs &amp; Accordions</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="icons.html">
                                        <span>Fontawesome Icons</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="themify_icons.html">
                                        <span>Themify Icons</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="grid.html">
                                        <span>Grid Layout</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="widgets.html">
                                        <span>Widgets</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- /ui -->

                        <!-- Components -->
                        <li>
                            <a href="javascript:;">
                                <i class="toggle-accordion"></i>
                                <i class="ti-support"></i>
                                <span>Components</span> 
                            </a>
                            <ul class="sub-menu">
                                <li>
                                    <a href="calendar.html">
                                        <span>Calendar</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="gallery.html">
                                        <span>Gallery</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="sortable.html">
                                        <span>Sortable &amp; Nestable Lists</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="chart.html">
                                        <span>Charts</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="progress_slider.html">
                                        <span>Progress bars &amp; Sliders</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="tree.html">
                                        <span>Tree View</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="notifications.html">
                                        <span>Notifications</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="animated.html">
                                        <span>Animated Elements</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- /components -->

                        <!-- layouts -->
                        <li>
                            <a href="javascript:;">
                                <i class="toggle-accordion"></i>
                                <i class="ti-layout"></i>
                                <span>Layouts</span>
                            </a>
                            <ul class="sub-menu">
                                <li>
                                    <a href="small_menu.html">
                                        <span>Small Menu</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="right_menu.html">
                                        <span>Right Side Menu</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="push_sidebar.html">
                                        <span>Chat Sidebar</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="language_bar.html">
                                        <span>Language Switcher</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="footer_layout.html">
                                        <span>Layout With Footer</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="horizontal_menu.html">
                                        <span>Horizontal Menu</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="boxed.html">
                                        <span>Boxed Layout</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="horizontal_menu_boxed.html">
                                        <span>Horizontal Boxed</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="fixed_scroll.html">
                                        <span>Fixed Header &amp; Scrollable Layout</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="blank.html">
                                        <span>Blank Page</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- /layouts -->

                        <!-- forms -->
                        <li>
                            <a href="javascript:;">
                                <i class="toggle-accordion"></i>
                                <i class="ti-folder"></i>
                                <span>Forms</span>
                            </a>
                            <ul class="sub-menu">
                                <li>
                                    <a href="forms.html">
                                        <span>Forms Elements</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="form_custom.html">
                                        <span>Customized Elements</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="form_validation.html">
                                        <span>Form Validation</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="form_wizard.html">
                                        <span>Form Wizards</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="form_wysiwyg.html">
                                        <span>WYSIWYG/Markdown Editors</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="form_inline.html">
                                        <span>Content Editable</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="form_dropzone.html">
                                        <span>Dropzone</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="form_masks.html">
                                        <span>Input Masks</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="form_pickers.html">
                                        <span>Form Pickers</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="form_crop.html">
                                        <span>Image Crop</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- /forms -->

                        <!-- tables -->
                        <li>
                            <a href="javascript:;">
                                <i class="toggle-accordion"></i>
                                <i class="ti-window"></i>
                                <span>Tables</span>
                            </a>
                            <ul class="sub-menu">
                                <li>
                                    <a href="table_basic.html">
                                        <span>Basic Tables</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="table_responsive.html">
                                        <span>Resonsive Table</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="datatable.html">
                                        <span>Data Tables</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="table_editable.html">
                                        <span>Editable Table</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- /tables -->

                        <!-- maps -->
                        <li>
                            <a href="javascript:;">
                                <i class="toggle-accordion"></i>
                                <i class="ti-map"></i>
                                <span>Maps</span>
                            </a>
                            <ul class="sub-menu">
                                <li>
                                    <a href="google_maps.html">
                                        <span>Google Maps</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="vector.html">
                                        <span>Vector Maps</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- /maps -->

                        <!-- pages -->
                        <li>
                            <a href="javascript:;">
                                <i class="toggle-accordion"></i>
                                <i class="ti-layers"></i>
                                <span>Ready Pages</span>
                            </a>
                            <ul class="sub-menu">
                                <li>
                                    <a href="mail.html">
                                        <span>Mailbox</span> 
                                    </a>
                                </li>
                                <li>
                                    <a href="mail_view.html">
                                        <span>Mail View</span> 
                                    </a>
                                </li>
                                <li>
                                    <a href="compose.html">
                                        <span>Compose</span> 
                                    </a>
                                </li>
                                <li>
                                    <a href="profile.html">
                                        <span>Profile</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="invoice.html">
                                        <span>Invoice</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="signin.html">
                                        <span>Signin</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="signup.html">
                                        <span>Signup</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="forgot.html">
                                        <span>Forgot Password</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="lock.html">
                                        <span>Lock Screen</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="404.html">
                                        <span>404 Page</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="500.html">
                                        <span>500 Page</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="changelog.html">
                                        <span>Change Log</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="timeline.html">
                                        <span>Timeline</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="catalog.html">
                                        <span>Catalog</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="chat.html">
                                        <span>Chat</span>
                                    </a>
                                </li>

                            </ul>
                        </li>
                        <!-- /pages -->
                    </ul>
                    <p class="nav-title">LABELS</p>
                    <ul class="nav">
                        <li>
                            <a href="javascript:;">
                                <i class="ti-control-record text-warning"></i>
                                <span>Projects</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="ti-control-record text-success"></i>
                                <span>Apps</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="ti-control-record text-danger"></i>
                                <span>Support</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </aside>
            <!-- /sidebar menu -->

            <!-- main content -->
            <section class="main-content">

                <!-- content wrapper -->
                <div class="content-wrap">

                    <!-- inner content wrapper -->
                    <div class="wrapper"></div>
                    <!-- /inner content wrapper -->

                </div>
                <!-- /content wrapper -->
                <a class="exit-offscreen"></a>
            </section>
            <!-- /main content -->
        </section>

    </div>

    <!-- core scripts -->
    <script src="plugins/jquery-1.11.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="plugins/jquery.slimscroll.min.js"></script>
    <script src="plugins/jquery.easing.min.js"></script>
    <script src="plugins/appear/jquery.appear.js"></script>
    <script src="plugins/jquery.placeholder.js"></script>
    <!-- /core scripts -->

    <!-- page level scripts -->
    <!-- /page level scripts -->

    <!-- template scripts -->
    <script src="js/offscreen.js"></script>
    <script src="js/main.js"></script>
    <!-- /template scripts -->

    <!-- page script -->
    <!-- /page script -->

</body>
<!-- /body -->
                                        

Layout Options

  • .fixed-scroll gives you scrollable sidebar and content layout
  • .boxed activates boxed layout
  • .right-menu right aligned sidebar. see right-menu.html
  • .small-menu activates collapsed menu

Off-canvas Navigation

You can setup Off screen menus positioned outside of the viewport and slide in when activated.

The markup

Wrap your off screen aside elements in either .offscreen-leftfor a left positioned off screen aside or .offscreen-rightfor a right positioned.

Add your triggers somewhere in your layout.
    
<a href="javascript:;" class="ti-menu visible-xs" data-toggle="offscreen" data-move="ltr"></a>

<a href="javascript:;" class="ti-menu visible-xs" data-toggle="offscreen" data-move="rtl"></a>
                    

data-move="rtl" reveals .offscreen-right. data-move="lrt" reveals .offscreen-left.

These are the available helper classes

  • .no-bremoves all borders from an element
  • .borderedAdd a border to all 4 sides of an element
  • .blAdd left border to an element
  • .brAdd right border to an element
  • .btAdd top border to an element
  • .bbAdd bottom border to an element
  • .bg-noneOverwites elements background color to transparent
  • .no-shadowremove box shadow
  • .shadowadd box shadow
  • .no-radiusremoves rounded corners
  • .roundedadds rounded corners
  • .brtltop left border radius
  • .brtrtop right border radius
  • .brblbottom left border radius
  • .brbrbottom right border radius
  • .no-mremoves all margin space from an element
  • .no-premoves all padding space from an element
  • .ptlabsolute positioned top left
  • .ptrabsolute positioned top right
  • .pblabsolute positioned bottom left
  • .pbrabsolute positioned bottom right
  • .overflow-hiddenoverflow hidden

p,m,b = padding,margin,border
Directions
t,b,r,l,n = top,bottom,right,left, negative
Sizing
5,10,15,20,25 = extra-small(5px),small(10px),medium(@15px),default(20px),large(25px)

Margins
Class Description
.mn -15px margin left and right
.mrn -15px margin right
.mln -15px margin left
.ml0 remove left margin
.mr0 remove right margin
.mt0 remove top margin
.mb0 remove bottom margin
.m25 Adds 25px margin to an element
.mr25 Adds 25px right margin
.mb25 Adds 25px bottom margin
.ml25 Adds 25px left margin
.mt25 Adds 25px top margin
.m20 Adds 20px margin to an element
.mr20 Adds 20px right margin
.mb20 Adds 20px bottom margin
.ml20 Adds 20px left margin
.mt20 Adds 20px top margin
.m15 Adds 15px margin to an element
.mr15 Adds 15px right margin
.mb15 Adds 15px bottom margin
.ml15 Adds 15px left margin
.mt15 Adds 15px top margin
.m10 Adds 10px margin to an element
.mr10 Adds 10px right margin
.mb10 Adds 10px bottom margin
.ml10 Adds 10px left margin
.mt10 Adds 10px top margin
.m5 Adds 5px margin to an element
.mr5 Adds 5px right margin
.mb5 Adds 5px bottom margin
.ml5 Adds 5px left margin
.mt5 Adds 5px top margin
Paddings
Class Description
.pl0 remove left padding
.pr0 remove right padding
.pt0 remove top padding
.pb0 remove bottom padding
.p25 Adds 25px padding to an element
.pr25 Adds 25px right padding
.pb25 Adds 25px bottom padding
.pl25 Adds 25px left padding
.pt25 Adds 25px top padding
.p20 Adds 20px padding to an element
.pr20 Adds 20px right padding
.pb20 Adds 20px bottom padding
.pl20 Adds 20px left padding
.pt20 Adds 20px top padding
.p15 Adds 15px padding to an element
.pr15 Adds 15px right padding
.pb15 Adds 15px bottom padding
.pl15 Adds 15px left padding
.pt15 Adds 15px top padding
.p10 Adds 10px padding to an element
.pr10 Adds 10px right padding
.pb10 Adds 10px bottom padding
.pl10 Adds 10px left padding
.pt10 Adds 10px top padding
.p5 Adds 5px padding to an element
.pr5 Adds 5px right padding
.pb5 Adds 5px bottom padding
.pl5 Adds 5px left padding
.pt5 Adds 5px top padding

Select plugin from dropdown below for more information


animate.css, just-add-water CSS animations

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Dependencies
<link rel="stylesheet" href="css/animate.min.css">
Official Documentation
http://daneden.github.io/animate.css/
Bootstrap Datepicker

Bootstrap-datepicker provides a flexible datepicker widget in the Twitter bootstrap style.

Dependencies
<!-- CSS stylesheets -->
<link rel="stylesheet" href="plugins/bootstrap-datepicker/datepicker.css">

<script href="plugins/bootstrap-datepicker/bootstrap-datepicker.js"></script>
Official Documentation
http://bootstrap-datepicker.readthedocs.org/
X-editable

This library allows you to create editable elements on your page. It can be used with any engine (bootstrap, jquery-ui, jquery only) and includes both popup and inline modes. Please try out demo to see how it works.

Dependencies
<!-- CSS stylesheets -->
<link rel="stylesheet" href="plugins/x-editable/bootstrap-editable.css">
<link rel="stylesheet" href="plugins/address/address.css">
<link rel="stylesheet" href="plugins/typeaheadjs/lib/typeahead.js-bootstrap.css">
<link rel="stylesheet" href="plugins/select2/select2.css">

<!-- Javascripts -->
<script href="plugins/x-editable/bootstrap-editable.js"></script>
<script href="plugins/address/address.js"></script>
<script href="plugins/typeaheadjs/typeaheadjs.js"></script>
<script href="plugins/typeaheadjs/lib/typeahead.js"></script>
<script href="plugins/moment.js"></script>
<script href="plugins/select2/select2.min.js"></script>
Official Documentation
http://vitalets.github.io/x-editable/
Datatables

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table

Dependencies
<!-- CSS stylesheets -->
<link rel="stylesheet" href="plugins/datatables/jquery.dataTables.css">

<!-- Javascripts -->
<script href="plugins/datatables/jquery.dataTables.js"></script>
Official Documentation
https://datatables.net/
Dropzone file upload

DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews.

Dependencies
<!-- CSS stylesheets -->
<link rel="stylesheet" href="plugins/dropzone/dropzone.css">

<!-- Javascripts -->
<script href="plugins/dropzone/dropzone.js"></script>
Official Documentation
http://www.dropzonejs.com/
Easy Pie Charts

Lightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas element.

Dependencies
<!-- Javascripts -->
<script href="plugins/jquery.easing.min.js"></script>
<script href="plugins/easy-pie-chart/jquery.easypiechart.js"></script>
Official Documentation
http://rendro.github.io/easy-pie-chart/
Flot Charts

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

Dependencies
├── plugins/
│   ├── flot/
Official Documentation
http://www.flotcharts.org/
Fuel UX

Fuel UX extends Bootstrap with additional lightweight JavaScript controls. Other benefits include easy installation into web projects, integrated scripts for customizing Bootstrap and Fuel UX, simple updates, and solid optimization for deployment. All functionality is covered by live documentation and unit tests.

Dependencies
├── plugins/
│   ├── fuelux/
Official Documentation
http://exacttarget.github.io/fuelux/
Full Calendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event). It is open source licensed under an MIT license.

Dependencies
<!-- CSS stylesheets -->
<link rel="stylesheet" href="plugins/fullcalendar/fullcalendar.css">

<!-- Javascripts -->
<script href="plugins/jquery-ui.custom.min.js"></script>
<script href="plugins/fullcalendar/fullcalendar.min.js"></script>
Official Documentation
http://arshaw.com/fullcalendar/
JVector Map

VectorMap uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML. No Flash or any other proprietary browser plug-in is required. This allows jVectorMap to work in all modern mobile browsers.

Dependencies
├── plugins/
│    ├── jvectormap/
Official Documentation
http://jvectormap.com/
Enjoyhint

EnjoyHint is a web-tool that provides the simplest way to create interactive tutorials and hints for your site or web-application. It can also be used to highlight and sign application elements.

Dependencies
<!-- CSS stylesheets -->
<link rel="stylesheet" href="plugins/enjoyhint/enjoyhint.css">

<!-- Javascripts -->
<script href="plugins/enjoyhint/enjoyhint.min.js"></script>
Official Documentation
https://github.com/xbsoftware/enjoyhint
Medium Editor

This is a clone of medium.com inline editor toolbar.

Dependencies
<!-- CSS stylesheets -->
<link rel="stylesheet" href="plugins/medium/medium-editor.css">
<link rel="stylesheet" href="plugins/medium/theme.css">

<!-- Javascripts -->
<script href="plugins/medium/medium-editor.min.js"></script>
Official Documentation
https://github.com/daviferreira/medium-editor
Morris Charts

Charting library

Dependencies
<!-- Javascripts -->
<script href="plugins/raphael-min.js"></script>
<script href="plugins/morris/morris.js"></script>
Official Documentation
http://www.oesmith.co.uk/morris.js/
Bootstrap Slider

Input Bootstrap Sliders. It has been configured with custom color schemes (see color scheme section).

Dependencies
<!-- CSS stylesheets -->
<link rel="stylesheet" href="plugins/slider/slider.css">

<!-- Javascripts --> <script href="plugins/slider/bootstrap-slider.js"></script>
Official Documentation
http://www.eyecon.ro/bootstrap-slider/
Owl Carousel

Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

Dependencies
<link rel="stylesheet" href="plugins/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="plugins/owl-carousel/owl.theme.css">
<link rel="stylesheet" href="plugins/owl-carousel/owl.transitions.css">

<script src="plugins/owl-carousel/owl.carousel.min.js"></script>
Official Documentation
http://www.owlgraphic.com/owlcarousel/
Toastr Notifications

toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.

Dependencies
<!-- CSS stylesheets -->
<link rel="stylesheet" href="plugins/toastr/toastr.css">

<!-- Javascripts -->
<script href="plugins/toastr/toastr.min.js"></script>
Official Documentation
https://github.com/CodeSeven/toastr
Bootstrap WYSIWYG

tiny wysiwyg rich text editor for Bootstrap

Dependencies
<!-- Javascripts -->
<script href="plugins/wysiwyg/bootstrap-wysiwyg.js"></script>
<script href="plugins/wysiwyg/external/jquery.hotkeys.js"></script>
Official Documentation
http://mindmup.github.io/bootstrap-wysiwyg/
Gmaps

Google maps

Dependencies
<!-- Javascripts -->
<script href="http://maps.google.com/maps/api/js?sensor=true"></script>
<script href="plugins/gmaps.js"></script>
Official Documentation
https://github.com/HPNeo/gmaps
Masked Input

This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer, Firefox, Safari, Opera, and Chrome. A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user.

Dependencies
<!-- Javascripts -->
<script href="plugins/jquery.maskedinput.min.js"></script>
Official Documentation
http://digitalbush.com/projects/masked-input-plugin
Nestable

Drag & drop hierarchical list with mouse and touch compatibility (jQuery plugin)

Dependencies
<!-- Javascripts -->
<script href="plugins/jquery.nestable.js"></script>
Official Documentation
http://dbushell.github.io/Nestable/
Slimscroll

slimScroll is a small (4.6KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar - similar to the one Facebook and Google started using in their products recently. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value.

Dependencies
<!-- Javascripts -->
<script href="plugins/jquery.slimscroll.js"></script>
Official Documentation
http://rocha.la/jQuery-slimScroll
Sortable

HTML5 Sortable is a jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.

Dependencies
<!-- Javascripts -->
<script href="plugins/jquery.sortable.js"></script>
Official Documentation
http://farhadi.ir/projects/html5sortable/
Sparklines

Sparklines.js generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

Dependencies
<!-- Javascripts -->
<script href="plugins/jquery.sparkline.js"></script>
Official Documentation
http://omnipotent.net/jquery.sparkline/
Moment

A javascript date library for parsing, validating, manipulating, and formatting dates.

Dependencies
<!-- Javascripts -->
<script href="plugins/moment.js"></script>
Official Documentation
http://momentjs.com/
Isotope - Filter & sort magical layouts
Dependencies
<script src="plugins/isotope/isotope.pkgd.min.js"></script>
Official Documentation
http://isotope.metafizzy.co/
Themify Icons

Themify Icons is a complete set of icons for use in web design and apps, consisting of 320+ pixel-perfect, hand-crafted icons that draw inspiration from Apple iOS 7 - available to the public, 100% FREE!

Dependencies
<link rel="stylesheet" href="css/themify-icons.css">
Official Documentation
http://themify.me/themify-icons
jQuery Appear

a jQuery plugin for tracking element's appearance in browser viewport

Dependencies
<script src="plugins/appear/jquery.appear.js"></script>
Official Documentation
https://github.com/morr/jquery.appear/
Jquery Count to

jQuery countTo is a jQuery plugin that will count up (or down) to a target number at a specified speed, rendered within an HTML DOM element.

Dependencies
<script src="plugins/count-to/jquery.countTo.js"></script>
Official Documentation
https://github.com/mhuggins/jquery-countTo
Parsley.js Form Validation

Parsley.js allows you to verify your form inputs frontend side, without writing a line of javascript.

Dependencies
<!-- Javascripts -->
<script href="plugins/parsley.js"></script>
Official Documentation
http://parsleyjs.org/
Responsive Tables

Responsive table plugin

Dependencies
<!-- CSS stylesheets -->
<link rel="stylesheet" href="plugins/responsive-tables/theme.css">

<!-- Javascripts -->
<script href="plugins/responsive-tables/responsive-tables.js"></script>
Official Documentation
https://github.com/zurb/responsive-tables
Skycons

Skycons is a set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas tag

Dependencies
<!-- Javascripts -->
<script href="plugins/skycons.js"></script>
Official Documentation
http://darkskyapp.github.io/skycons/
FontAwesome

Fontawesome icon package grants access to 369 icons in a single collection.Visit http://fortawesome.github.io/Font-Awesome/to find out how you can use them.

Official Documentation
http://fortawesome.github.io/Font-Awesome/
Switchery

Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly.

Dependencies
<!-- Javascripts -->
<script href="plugins/switchery/switchery.min.js"></script>
Official Documentation
http://abpetkov.github.io/switchery/
Table Sortable

Sortable is an open-source javascript and CSS library which adds sorting functionality to tables. It is tiny ( <2kb) and has no dependencies.

Dependencies
<!-- CSS stylesheets -->
<link rel="stylesheet" href="plugins/table-sortable/theme.css">

<!-- Javascripts -->
<script href="plugins/table-sortable/sortable.min.js"></script>
Official Documentation
http://github.hubspot.com/sortable/docs/welcome/
Chartjs

Jquery charting library

Dependencies
<!-- Javascripts -->
<script href="plugins/chartjs/Chart.min.js"></script>
Official Documentation
http://www.chartjs.org/
Imagesloaded

Detect when images have been loaded.

Dependencies
<!-- Javascripts -->
<script href="plugins/imagesloaded/imagesloaded.js"></script>
Official Documentation
http://imagesloaded.desandro.com/
Bootstrap Markdown

Bootstrap plugin for markdown editing

Dependencies
├── plugins/
│    ├── bootstrap-markdown/
Official Documentation
http://github.com/toopay/bootstrap-markdown
Bootstrap Star Rating

This is another plugin that eases the generation of rating stars for jQuery and Bootstrap.

Dependencies
<!-- Javascripts -->
<script href="plugins/bootstrap-rating-input/bootstrap-rating-input.min.js"></script>
Official Documentation
https://github.com/javiertoledo/bootstrap-rating-input
Bootstrap Tags input

Query plugin providing a Twitter Bootstrap user interface for managing tags

Dependencies
<!-- CSS stylesheets -->
<link rel="stylesheet" href="plugins/bootstrap-tagsinput/bootstrap-tagsinput.css">

<!-- Javascripts -->
<script href="plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
Official Documentation
http://timschlechter.github.io/bootstrap-tagsinput/examples/
Bootstrap Timepicker

A simple timepicker component for Twitter Bootstrap

Dependencies
<!-- CSS stylesheets -->
<link rel="stylesheet" href="plugins/bootstrap-timepicker/bootstrap-timepicker.css">

<!-- Javascripts -->
<script href="plugins/bootstrap-timepicker/bootstrap-timepicker.min.js"></script>
Official Documentation
https://github.com/jdewit/bootstrap-timepicker
Chosen

Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.

Dependencies
<!-- CSS stylesheets -->
<link rel="stylesheet" href="plugins/chosen/chosen.min.css">

<!-- Javascripts -->
<script href="plugins/chosen/chosen.jquery.min.js"></script>
Official Documentation
http://harvesthq.github.io/chosen/
Bootstrap Color Picker

Add color picker to field or to any other element.

Dependencies
<!-- CSS stylesheets -->
<link rel="stylesheet" href="plugins/colorpicker/css/colorpicker.css">

<!-- Javascripts -->
<script href="plugins/colorpicker/css/bootstrap-colorpicker.js"></script>
Official Documentation
http://www.eyecon.ro/bootstrap-colorpicker/
Bootstrap Date Range Picker

Date range picker component for Bootstrap

Dependencies
<!-- CSS stylesheets -->
<link rel="stylesheet" href="plugins/daterangepicker/daterangepicker-bs3.css">

<!-- Javascripts -->
<script href="plugins/daterangepicker/daterangepicker.js"></script>
Official Documentation
https://github.com/dangrossman/bootstrap-daterangepicker
iCheck

SUPER CUSTOMIZED CHECKBOXES AND RADIO BUTTONS FOR JQUERY & ZEPTO

Dependencies
├── plugins/
│    ├── icheck/
Official Documentation
http://fronteed.com/iCheck/
ion range slider

Easy and light range slider

Dependencies
├── plugins/
│    ├── ion.rangeSlider/
Official Documentation
https://github.com/IonDen/ion.rangeSlider
Jcrop

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

Dependencies
├── plugins/
│    ├── Jcrop/
Official Documentation
http://deepliquid.com/content/Jcrop.html
Jstree

sTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading.

Dependencies
├── plugins/
│    ├── jstree/
Official Documentation
http://www.jstree.com/
Stepy

A Wizard Plugin

Dependencies
<!-- CSS stylesheets -->
<link rel="stylesheet" href="plugins/stepy/jquery.stepy.css">

<!-- Javascripts -->
<script href="plugins/stepy/jquery.stepy.min.js"></script>
Official Documentation
http://wbotelhos.com/stepy
Superbox

Superbox, the lightbox, reimagined

Dependencies
<!-- Javascripts -->
<script href="plugins/superbox/superbox.min.js"></script>
Official Documentation
https://github.com/toddmotto/superbox
bootstrap wysiwyg

Tiny bootstrap-compatible WISWYG rich text editor

Dependencies
<!-- Javascripts -->
<script href="plugins/superbox/superbox.min.js"></script>
Official Documentation
https://github.com/mindmup/bootstrap-wysiwyg

I've used the following images, icons or other files as listed.


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section