AdminDesigns - A Responsive HTML5 Admin UI Template Theme

Theme Options

#### Header Skins

Light
Primary
Info
Warning
Danger
Alert
System
Success
Dark

#### Layout Options

Fixed Header
Fixed Sidebar
Fixed Breadcrumbs
Hide Breadcrumbs

#### Layout Options

Fullwidth Layout
Boxed Layout (Coming Soon)
Clear LocalStorage
Reporting Period
3
AdminDesigns UI Documentation

## AdminDesigns UI Documentation

Important: Unless unable to do so, ALWAYS refer to the online documentation available for this theme. This will ensure the content you are reading is updated and will function correctly with the latest theme update. Online documentation can be found here http://admindesigns.com/framework/documentation/index.html

The AdminDesigns UI Framework was designed to be one of the most balanced, well structured, and ideal solutions available to developers. Please feel free to contact as if you have any further questions regarding this theme. We're here to help!

Important Note: AdminDesigns documentation is frequently updated and should be viewed by visiting our website when ever possible. You can view the latest documentation by clicking here. If this link does not work please immediately email our support.

#### Don't forget to rate us Five Stars!

If you like our theme and appreciate our hard work please rate us Five Stars on Themeforest! Feel the need to rate us lower? Please contact us first and we will do absolutely everything we can to solve the problem. Happy customers are our number one priority!

### Mastering the Basics

The AdminDesigns UI theme was developed using several libraries and platforms. It's vital that you understand a great deal about these technologies as it will allow you to fully understand the techniques, methodologies, and structures found in this theme. Fully understanding Bootstrap and the other platforms listed below is vital.

##### JQuery API Documentation

http://api.jquery.com/

##### Bootstrap Documentation

http://getbootstrap.com/css/

##### LESS Documentation

http://lesscss.org/#

### Important Bootstrap Modifications

#### A new "XL" column has been added default Bootstrap Grid system.

The AdminDesigns theme will often experience updates which are designed to implement new features, fix bugs, or improve code. A theme update will often result in overwriting many, or ALL of the pages included within AdminDesigns.

#### Three additional colors have been added to the contextual system

`.btn-alert .btn-system .btn-dark` The AdminDesigns theme will often experience updates which are designed to implement new features, fix bugs, or improve code. A theme update will often result in overwriting many, or ALL of the pages included within AdminDesigns.

#### New elements, inputs, navigations, and more have been added

`.btn-alert .btn-system .btn-dark` The AdminDesigns theme will often experience updates which are designed to implement new features, fix bugs, or improve code. A theme update will often result in overwriting many, or ALL of the pages included within AdminDesigns.

### AdminDesigns Color System

AdminDesigns has taken everything you love about bootstraps contextual system and extended it. Adding additional colors and extending its use to many new elements.

#### The Cliff Notes:

Color system based on Bootstraps beloved "contextual" color system

Three new contextual classes have been added - Alert System Dark

These contextual classes have been extended to nearly all elements, inputs, and widgets.

Each contextual has an additional two shades to select from `.light .dark`

To reduce CSS bloat individual contextuals can be easily disabled (see LESS section of Docs)

#### The Colors/Contextuals: `.light (default) .dark`

`Primary`
#649AE1
#4A89DC
#3078D7
`Success`
#85D27A
#70CA63
#5BC24C
`Info`
#55BADF
#3BAFDA
#27A2CF
`Warning`
#F7C65F
#F6BB42
#F5B025
`Danger`
#EC6F5A
#E9573F
#E63F24
`Alert`
#A992E2
#967ADC
#8362D6
`System`
#48C9A9
#37BC9B
#30A487
`Dark`
#484D61
#3B3F4F
#2E313D
`Light`
#FEFEFE
#FAFAFA
#F2F2F2

### AdminDesigns Elements - Buttons

##### Button Constructor:

    <button class="btn btn-primary" type="button"> Button Text </button>

##### Four Size Options:

`class="btn btn-primary btn-xs`

`class="btn btn-primary btn-sm"`

`class="btn btn-primary dark"`

`class="btn btn-primary btn-lg"`

##### Three Shade Options:

`class="btn btn-info light`

`class="btn btn-info"`

`class="btn btn-info dark"`

##### Two Shape Options:

`class="btn btn-success"`

`class="btn btn-success btn-rounded"`

##### Two Style Options:

`class="btn btn-alert`

`class="btn btn-alert btn-gradient`

### AdminDesigns Elements - Alerts

##### Alert Constructor:

    <div class="alert alert-primary">
    	Alert Text
    </div>

##### Color Shades:

Dark Shade Lorem ipsum genataro fasnc
`class="alert alert-primary dark"`
Default Shade Lorem ipsum genataro fasnc
`class="alert alert-primary"`
Light Shade Lorem ipsum genataro fasnc
`class="alert alert-primary light"`
Pastel Shade Lorem ipsum genataro fasnc
`class="alert alert-primary pastel pastel"`

Note: the above shade ".pastel" is used ONLY on alerts and is not used anywhere else in the theme.

##### Size Options:

Micro Alert Lorem ipsum genataro fasnc
`class="alert alert-primary alert-micro"`
Small Alert Lorem ipsum genataro fasnc
`class="alert alert-primary alert-sm"`
Default Alert Lorem ipsum genataro fasnc
`class="alert alert-primary alert-sm"`

##### Gradient Option:

Default Alert Lorem ipsum genataro fasnc
`class="alert alert-primary"`
Gradient Alert Lorem ipsum genataro fasnc
`class="alert alert-primary bg-gradient"`

##### Border Options:

Left Border Alert Lorem ipsum genataro fasnc
`class="alert alert-primary alert-border-left"`
Right Border Alert Lorem ipsum genataro fasnc
`class="alert alert-primary alert-border-right"`
Top Border Alert Lorem ipsum genataro fasnc
`class="alert alert-primary alert-border-top"`
Bottom Border Alert Lorem ipsum genataro fasnc
`class="alert alert-primary alert-border-bottom"`

### AdminDesigns Elements - Progress Bars

##### Progress Bar Constructor:

    <div class="progress">
    	<div class="progress-bar progress-bar-primary" role="progressbar" style="width: 50%;"></div>
    </div>

##### Color Shades:

Progress Bars do not use light or dark contextual shades. Only base colors available.

60%
`class="progress-bar progress-bar-primary"`

##### Striped Option:

Progress Bars do not use light or dark contextual shades. Only base colors available.

60%
`class="progress-bar progress-bar-striped"`
60%
`class="progress-bar progress-bar-stripedactive"`

##### Size Options:

Note: progress bar sizes should be applied to the wrapper .progress, not .progress-bar

`class="progress progress-bar-xxs"`
`class="progress progress-bar-xs"`
`class="progress progress-bar-sm"`
`class="progress" - default, no class needed`
`class="progress progress-bar-lg"`

You can learn more about the Typography System that the AdminDesigns Theme uses by visiting the official bootstrap website. Found here http://getbootstrap.com/css/#type

### AdminDesigns Typography - Dropcaps

##### Paragraph Dropcap Constructor:

    <p class="dropcap dropcap-primary dropcap-fill">
    	Lorem Ipsum
    </p>

##### Dropcap Color Shades:

All base contextual colors available. Does not use light or dark contextual shades.

`class="dropcap dropcap-primary dropcap-fill"`

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit

`class="dropcap dropcap-primary"`

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit

### AdminDesigns Typography - QuoteBlocks

##### Quoteblock Constructor:

    <blockquote class="blockquote-primary">
    	Lorem Ipsum
    </blockquote>

Note: All base contextual colors available. Does not use light or dark contextual shades.

> Lorem ipsum dolor sit amet, consectetur adipisci.

> Someone famous

`class="blockquote-primary"`

##### BlockQuote Thin:

> Lorem ipsum dolor sit amet, consectetur adipisci.

> Someone famous

`class="blockquote-primary blockquote-thin"`

##### BlockQuote Rounded:

> Lorem ipsum dolor sit amet, consectetur adipisci.

> Someone famous

`class="blockquote-primary blockquote-rounded"`

> Lorem ipsum dolor sit amet, consectetur adipisci.

> Someone famous

`class="blockquote-alert blockquote-reverse"`

##### BlockQuote Thin:

> Lorem ipsum dolor sit amet, consectetur adipisci.

> Someone famous

`class="blockquote-thin blockquote-reverse"`

##### BlockQuote Rounded:

> Lorem ipsum dolor sit amet, consectetur adipisci.

> Someone famous

`class="blockquote-rounded blockquote-reverse"`

### AdminDesigns Typography - Contextual Text

##### Contextual Text Constructor: (any text element)

    <p class="text-primary"> Lorem Ipsum</p>
    <span class="text-primary"> Lorem Ipsum</span>

##### Contextual Text Color Shades:

All base contextual colors available. Does Not use light or dark contextual shades.

Lorem ipsum dolor sit amet, consect. `class="text-primary"`

Lorem ipsum dolor sit amet, consect. `class="text-success"`

Lorem ipsum dolor sit amet, consect. `class="text-info"`

Lorem ipsum dolor sit amet, consect. `class="text-warning"`

Lorem ipsum dolor sit amet, consect. `class="text-muted"`

Lorem ipsum dolor sit amet, consect. `class="text-danger"`

Lorem ipsum dolor sit amet, consect. `class="text-alert"`

Lorem ipsum dolor sit amet, consect. `class="text-system"`

You can learn more about the Grid System that the AdminDesigns Theme uses by visiting the official bootstrap website. Found here http://getbootstrap.com/css/#grid

### Elements

#### Tabs and Accordions

Tabs and accordions are animated widgets built with Bootstrap Panels and are great for organizing large amounts of content. You can learn about their various styles, structures, and options below!

#### Tabs - Basic Structure

    <div class="tab-block">
    	<!-- Tabs Navigation -->
    	<ul class="nav nav-tabs">
    		<li><a href="#tab1">Tab1</a></li>
    		<li><a href="#tab2">Tab2</a></li>
    	</ul>

    	<!-- Tab Content -->
    	<div class="tab-content">
    		<div id="tab1" class="tab-pane">..</div>
    		<div id="tab2" class="tab-pane">..</div>
    	</div>

    </div>

#### Tabs - Navigation Positions

###### Top Navigation - HTML

`<ul class="nav nav-tabs">..</ul>`
`<div class="tab-content">..</div>`

###### Top Navigation - Application

Top navigation is the default setup for the tabs widget. It requires that the navigation list(ul) is placed BEFORE the content(tab-content). The classes required are the default ".nav" class and the ".nav-tabs" class.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

###### Bottom Navigation - HTML

`<div class="tab-content">..</div>`
`<ul class="nav tabs-below">..</ul>`

###### Bottom Navigation - Application

Bottom navigation requires that the navigation list(ul) is placed AFTER the content(tab-content). It requires the default ".nav" class and the ".tabs-below" class.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

###### Html

`<div class="panel-body">..</div>`

###### Purpose

This panel addon has a solid white background and will typically be used to house all of the panels content.

###### Panel Body Structure

<div class="panel-body">
<p> Put all the content you can dream of here...</p>
</div>

###### Results In:

Hey Look a Panel Body!

Put all the content you can dream of here...

###### Left Side Navigation - HTML

`<ul class="nav tabs-left">..</ul>`
`<div class="tab-content">..</div>`

###### Left Side Navigation - Application

Left Side navigation requires that the navigation list(ul) is placed BEFORE the content(tab-content).. It requires the default ".nav" class and the ".tabs-left" class.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

###### Default - #1

`<div class="nav nav-tabs tabs-border">..</div>`

###### Solid Line - #2

`<div class="nav nav-tabs tabs-border">..</div>`

###### Background - #3

`<div class="nav nav-tabs tabs-bg">..</div>`

Note: Style #3 is not available on Left Navigation Tab Widgets

Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

#### Accordion - Basic Structure

    <div class="panel-group accordion" id="example1">
    	<!-- Panel Item 1 - With Example Contents -->
    	<div class="panel">
    		<div class="panel-heading">
    		<a class="accordion-toggle accordion-icon" data-toggle="collapse" data-parent="#example1" href="#panel-item1">Title</a>
    		</div>
    		<div id="panel-item1" class="panel-collapse collapse">
    			<div class="panel-body">Content Here</div>
    		</div>
    	</div>

    	<!-- Panel Item 2 - With Example Contents -->
    	<div class="panel">
    		<div class="panel-heading">
    		<a class="accordion-toggle" data-toggle="collapse" data-parent="#example1" href="#panel-item2">Title</a>
    		</div>
    		<div id="panel-item2" class="panel-collapse collapse">
    			<div class="panel-body">Content Here</div>
    		</div>
    	</div>

    </div>

#### Results In:

Collapsible Item #1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
Collapsible Item #2
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
Collapsible Item #3
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3.

### Header Options

#### Header - Fixed

`<nav class="navbar navbar-fixed-top">..</nav>` - Requires class "navbar-fixed-top"

#### Header - Static

`<nav class="navbar">..</nav>` - Remove class "navbar-fixed-top"

### Header Skins

The navbar accepts all of the same contextual classes that any other element does. Which makes switching colors simple and easy.

`<nav class="navbar bg-light">..</nav>
<nav class="navbar bg-primary">..</nav>
<nav class="navbar bg-success">..</nav>
<nav class="navbar bg-info">..</nav>
<nav class="navbar bg-warning">..</nav>
<nav class="navbar bg-danger">..</nav>
<nav class="navbar bg-alert">..</nav>
<nav class="navbar bg-system">..</nav>
<nav class="navbar bg-dark">..</nav>
<nav class="navbar bg-light">..</nav>`

Refer to color system or header templates for an example of available colors

### Header Templates

Full HTML Template Primary Success Info Warning Danger Alert System Dark Light (Default)

### Topbar Options

#### Topbar - Hidden

`<div id="topbar" class="hidden">..</div>` - Requires "hidden" class

Note: To hide this element you can also remove all of its HTML, or grant it the style "display: none" in custom.css

#### Topbar - Fixed

`<div id="topbar" class="affix">..</div>` - Requires "affix" class

#### Topbar - Static

`<div id="topbar" class="">..</div>` - Default Topbar setting. No class needed.

### Basic Panels

#### A Vital Theme Element

Panels are one of AdminDesigns most important theme elements. They have been created using Bootstraps native "panel" system. However, AdminDesigns adds a great deal of extra functionality to the Bootstrap panel system, especially if the "AdminPanels" plugin is used. As a result panels are used on virtually every page and are the ideal element to create widgets and present data. It's recommended that you become very familiar with their structure and functionality.

#### Understanding Each Addon

###### Html

`<div class="panel">..</div>`

###### Purpose

This is the wrapper which encases the entire content of the panel. It applies a box-shadow and background-color to the entire element.

    <div class="panel">
       <div class="panel-heading">...</div>
       <div class="panel-body">...</div>
       <div class="panel-footer">...</div>
    </div>

###### Html

`<div class="panel-heading">..</div>`

###### Purpose

This panel component has a light grey background and is often used to house the panel title and icon. It also can be used to hold toolbars, buttons, and other elements. See AdminDesigns Portlets for examples of different header elements.

###### Heading Structure

    <div class="panel-heading">
       <!-- Panel Icon -->
       <span class="panel-icon">
       <span class="fa fa-wrench"></span>
       </span>
       <!-- Panel Title -->
       <span class="panel-title">Example Title</span>
    </div>

###### Results In:

Example Title

###### Html

`<div class="panel-body">..</div>`

###### Purpose

This panel addon has a solid white background and will typically be used to house all of the panels content.

###### Panel Body Structure

    <div class="panel-body">
       <p> Put all the content you can dream of here...</p>
    </div>

###### Results In:

I am the panel body. Place any content you need here...

###### Html

This is an example of a panel consisting of all three components.

    <!-- Panel Wrapper -->
    <div class="panel">

       <!-- Panel Heading -->
       <div class="panel-heading">

          <!-- Panel Icon -->
          <span class="panel-icon">
          <span class="fa fa-wrench"></span>
          </span>
          <!-- Panel Title -->
          <span class="panel-title">Example Title</span>

       </div>

       <!-- Panel Body -->
       <div class="panel-body">
          <p> Put all of your content here...</p>
       </div>

       <!-- Panel Footer -->
       <div class="panel-footer">
          <button class="btn btn-primary text-right"> Submit Btn </button>
       </div>

    </div>

###### Results In:

Example Title
Put all of your content here...

### Admin Panels

#### Extending advanced options to basic panels.

Admin Panels is a theme exclusive jQuery plugin which adds additional settings to basic panel elements. It allows the user to customize the widget to their specifications, and saves these changes to localstorage. This is a great way to give the user control over the look and feel of the site.

#### Features Include:

Extends Drag and Drop functionality to panels placed inside of an `.admin-grid`

Extends the ability to edit a panels title.

Adds the ability to change a panels heading background.

Allows the user to minimize the panel, effectively reducing its size.

Allows the user to remove the widget from view.

Allows the user to fullscreen a panel for larger viewing.

Saves all of the users panel changes to localstorage and restores them on page refresh.

#### Additional Resources Required:

AdminPanels requires several additional resources to be included on the page.

###### Required Stylesheet

`<link href="assets/admin-tools/admin-plugins/admin-panels/adminpanels.css" type="text/css">`

Note: Stylesheet should be included after core theme.css stylesheet.

###### Required Scripts

`<link href="assets/admin-tools/admin-plugins/admin-panels/adminpanels.js">` - Core plugin script
`<link href="assets/admin-tools/admin-plugins/admin-panels/json2.js.js">` - Extends JSON functionality
`<link href="assets/admin-tools/admin-plugins/admin-panels/jquery.ui.touch-punch.min.js.js" >` - Improves touch support

Note: Scripts should be included after core libraries. jQuery, Bootstrap, Admin Theme Scripts, etc.

#### Creating an AdminPanels Grid:

AdminPanels functionality requires each panel to be placed in a specialized grid. The grid helps determine the order in which panels are displayed. Almost all errors that might be encountered will be because of an improperly constructed grid. Template pages have been included in the documentation which provide great starting points for constructing your ideal grid layout.

#### Grid Requirements:

The grid must be wrapped in a container with the class `.admin-panels`

The grid must always begin with a `.row`

Rows must only contain columns `.col-md-4 .col-md-6 etc`. If fullwidth content is desired use `.col-md-12`

ALL columns must contain the class `.admin-grid`

Panels should only be placed inside of Columns

ALL Panels must contain a unique, unchanging ID `class="panel" id="p1"`

ALL Panels must contain a panel-heading. `.hidden` can be used if you wish to hide the heading

###### An Example Admin Grid

    <!-- AdminPanels Wrapper -->
    <div class="admin-panels">

       <!-- Row, Must contain only columns -->
       <div class="row">

          <!-- Column 1 with required .admin-grid -->
          <div class="col-md-6 admin-grid">

             <!-- Panel with required Unique ID and panel heading -->
             <div class="panel" id="p1">
                  <div class="panel-heading">Title</div>
                  <div class="panel-body">Panel Content...</div>
             </div>

          </div><!-- End Column -->

          <!-- Column 2 with required .admin-grid -->
          <div class="col-md-6 admin-grid">

             <!-- Panel with required Unique ID and panel heading -->
             <div class="panel" id="p1">
                  <div class="panel-heading">Title</div>
                  <div class="panel-body">Panel Content...</div>
             </div>

          </div><!-- End Column -->

       </div><!-- End Row -->
    </div><!-- End Panel Wrapper -->

###### Initializing AdminPanels

    // Init AdminPanels Plugin on ".admin-panels" container
    $('.admin-panels').adminpanel({
        grid: '.admin-grid',
        draggable: true,
        // On AdminPanel Init complete we fade in the content. Optional
        onFinish: function() {
            $('.admin-panels').addClass('animated fadeIn').removeClass('fade-onload');
        },
        // We trigger a window resize after a panel has been modified. This helps catch
        // any plugins which may need to update after the panel was changed. Optional
        onSave: function() {
            $(window).trigger('resize');
        }
    });

#### Provided Grid Templates:

We have provided several premade templates to aid you in the creation of AdminPanel grids. Links to these templates can be found below:

2 Column Grid 3 Column Grid Mixed 3 Column Grid Multi Row Grid 1 Multi Row Grid 2

### HTML Helper Classes

Helper classes can assist you in changing the appearance of an element quickly and easily directly through its HTML, rather than CSS. This prevents having to create endless custom classes when making routine changes such as Padding, Margin, or Borders.

##### Examples of common Helper Classes:

`.pn{padding:0 !important}
.p5{padding: 5px !important}
.p10{padding: 10px !important}
.pl5{padding-left: 5px !important}
.pr5{padding-right: 5px !important}
.pt5{padding-top: 5px !important}
.pb5{padding-bottom: 5px !important}
.mn{margin: 0 !important}
.m5{margin: 5px !important}
.m10{margin: 10px !important}
.ml5{margin-left: 5px !important}
.mr5{margin-right: 5px !important}
.mt5{margin-top: 5px !important}
.mb5{margin-bottom: 5px !important}
`

##### For a complete list of helper HTML Helper Classes please visit the themes primary CSS file

### Icons

#### Understanding Font Based Icons

All of the icons used in AdminDesigns were created using font based icon libraries. The icons are created with small html snippets rather than with the use of an <img> tag. This allows you to select from hundreds of icons by simply changing a class name. Another great feature of font icons is that you can style the icons using common text based styling. Such as color, font-size, etc. AdminDesigns includes Six separate font-icon libraries.

###### Available Icon Libraries

###### A Generous Library Free of Charge

The AdminDesigns UI theme includes the entire Glyphicon PRO icon set, a $59 value, free of charge! The Glyphicon PRO icon set expands on the popular Halfling set by including over 500 detailed icons. However, one must consider the large file size before commiting them to a project.
Note: If you choose this library as your primary icon set you should consider removing the Glyphicons Halfling set included in Bootstrap 3.

###### Stylesheet Requirements

`<link href="assets/fonts/glyphicons-pro/glyphicons-pro.css" type="text/css">`

###### Usage

`<span class="glyphicons glypicons-pencil></span>`- Basic
`<span class="glyphicons glypicons-pencil text-success></span>`- With text color

###### Helper Classes

Sizes `.glyphicon-2x .glyphicon-3x .glyphicon-4x .glyphicon-5x`
Colors `.text-warning .text-success .text-alert .text-primary etc`
An example of how to use AdminDesigns Color System. Any color can be used, not just the ones above.

http://www.glyphicons.com/

###### Bootstrap 3 Library of choice

Most AdminDesigns icon styling was done specifically for Glyphicons Pro and Glyphicons Hafling(Bootstraps icon set). The primary reason for this is because Glyphicon icons were created in 1:1 proportions. Meaning that if an icon has a width of 32px it will always have a length of 32px, and vica-versa. This makes them the ideal icon when creating size sensitive items because there values can be so easily predicted.

###### Stylesheet Requirements

The Glyphicon Icon library is included in Bootstrap 3 which helps maintain fast loading times as less file request are having to be made.

###### Usage

`<span class="glyphicon glyphicon-pencil></span>`- Basic
`<span class="glyphicon glyphicon-pencil text-success></span>`- With text color

###### Helper Classes

Sizes `.glyphicons-2x .glyphicons-3x .glyphicons-4x .glyphicons-5x`
Colors `.text-warning .text-success .text-alert .text-primary etc`
An example of how to use AdminDesigns Color System. Any color can be used, not just the ones above.

http://getbootstrap.com/components/#glyphicons-glyphs

###### Great Icon Library

You will find Font Awesome Icons used through out the AdminDesigns UI. They are found in abundance in buttons and panel titles as they are lightweight, flexible, and offer a great selection of icons to choose from. However, for vital theme elements Glyphicons were used. An explanation can be found in the Glyphicon Tab.
Note: To quicken page loading times the Font Awesome Icon Library is pulled from Bootstraps CDN. This means less page requests and a high cached chance. If you prefer to host these files yourself you will need to alter alter the file urls in your pages header (CSS option #2 below).

###### Stylesheet Requirements

`<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">` - CDN
`<link href="assets/fonts/font-awesome/font-awesome.css" type="text/css">` - Only use one

###### Usage

`<i class="fa fa-pencil></i>`- Basic
`<i class="fa fa-pencil fa-3x text-success></i>`- With Helper Classes

###### Helper Classes

Sizes `.fa-2x .fa-3x .fa-4x .fa-5x`
Colors `.text-warning .text-success .text-alert .text-primary etc`
An example of how to use AdminDesigns Color System. Any color can be used, not just the ones above.

http://fortawesome.github.io/Font-Awesome/

###### Beautiful Icon Library

IconSweets2 is a premium icon library that boast some of the most beautiful icons on the internet. The AdminDesigns theme includes this icon set free of charge. However, if you wish to use this icon set on a production website you must purchase an exclusive license fee from the author.

###### Stylesheet Requirements

`<link href="assets/fonts/iconsweets/iconsweets.css" type="text/css">`

###### Usage

`<span class="iconsweets icon-chart-graph></span>`- Basic
`<span class="iconsweets icon-chart-graph text-success></span>`- With Helper Classes

###### Helper Classes

Sizes `.iconsweets-2x .iconsweets-3x .iconsweets-4x .iconsweets-5x`
Colors `.text-warning .text-success .text-alert .text-primary etc`
An example of how to use AdminDesigns Color System. Any color can be used, not just the ones above.

http://iconsweets2.com/

###### Large But Fantastic Library

Icomoon is another fantastic library for admin icons. They were created using pixel perfect 1:1 ratios and contain great detail. The files required are a little large and have no public CDN method of delivery. For this reason they are used rarely, and included more as a convenience.

###### Stylesheet Requirements

`<link href="assets/fonts/icomoon/icomoon.css" type="text/css">`

###### Usage

`<span class="imoon icon-pencil></span>`- Basic
`<span class="imoon icon-pencil text-success></span>`- With text color

###### Helper Classes

Sizes `.imoon-2x .imoon-3x .imoon-4x .imoon-5x`
Colors `.text-warning .text-success .text-alert .text-primary etc`
An example of how to use AdminDesigns Color System. Any color can be used, not just the ones above.

http://icomoon.io/

###### Social Media Icons Done Right!

Zocail is a Font Icon set which provides us with a great, and very complete set of social media buttons and icons. You can find a full example of their included icons on the buttons.html page

###### Stylesheet Requirements

`<link href="assets/fonts/zocial/zocial.css" type="text/css">`

###### Usage

`<button class="zocial twitter> Twitter </button>`- Full Text Button
`<button class="zocial icon twitter> Twitter </button>`- Just Icon Button

http://www.zocial.smcllns.com/

### Animations

#### Everything you need to get things moving.

AdminDesigns includes a CSS based animation library which allows a developer to easily add transitions and effects to virtually any html element. Simply include the required CSS stylesheet on the page you desire animations and then follow some incredibly simple and frustration-free syntax.

###### Developers Website

https://daneden.me/animate/

On-Load

Animations are fired immeditiely when the page loads and are a great way to introduce new content. Javascript will be required for dynamic animations, such as on hover or click.

###### Adding an Animation to an Element

`<div class="panel animated fadeIn">..</div>`

###### What The Classes Mean

"panel" - Is an example of the type of element you wish to animate. It can be virtually anything!

"animated" - Is required on all elements which you choose to animate on load.

"fadeIn" - Is an example of the type of animation you wish to see performed on the element. Click Here for a full list of animations.

With Delay

Animations by default are fired immeditiely when the page loads. You can add a delay to an animation by following the syntas below. This is a great way to introduce content in a specific order, or to create a unique and fun visual effect.

###### Adding a Delayed Animation to an Element

`<div class="panel animated-delay" data-animate='["1500","fadeIn"]'>..</div>`

##### Note: delayed animations require main.js to properly function

###### What The Classes Mean

panel - Is an example of the type of element you wish to animate. It can be virtually anything!

animated-delay - Is always required. Take note this uses "animated-delay" NOT "animated"

data-animate='["1500","fadeIn"]' - A data attribute which holds an array for two settings. The first is used to set the length of the duray(in miliseconds). The second is used to set the style of animation used on the element. Both options are required. Click Here for a full list of animations.

Via Javascript

Animations can easily be added dynamically via Javascript. However, this requires the formulation of code which means it's up to the developer to create these events. The code below is simply an example of how one could dynamically add an animation to an element.

###### Animation on Click

// Execute on button click $('#example-button').click(function() { // On button click add required CSS classes. Remove classes upon animation complete $(this).addClass('animated fadeIn').one('webkitAnimationEnd oAnimationEnd', function() { $(this).removeClass('animated fadeIn'); }); });

###### What do the classes used in the example above mean?

"animated" - Is required on all elements which you choose to animate.

"fadeIn" - Is an example of the type of animation you wish to see performed on the element. Click Here for a full list of animations.

###### Why do you remove the classes after the animation?

To be able to re-run the animation you must remove the classes as the animation does not loop. Therefor it must be reinitiated each time by re-adding the classes.

### 3rd Party Plugin Resources

#### A Full List of Theme Plugins!

With how many great plugins there are avaliable to developers it can become difficult to keep track of them all. Use this list to sort, find, and better your understanding of each plugin. You can never have enough good reference sheets.

Plugin | Website | Author | License
--- | --- | --- | ---
MarkItUp | http://markitup.jaysalvat.com/ | Jay Salvat | MIT
JVectorMap | http://jvectormap.com/ | Kirill Lebedev | MIT
Glyphicons PRO | https://github.com/Scrollbars | Nathaniel Higgins | MIT
Scrollbars | http://glyphicons.com/ | Jan Kovařík | ©
Chosen | https://github.com/chosen | Patrick Filler | MIT
Color Picker | http://www.eyecon.ro/ | Eye Con | MIT
Date Picker | http://www.eyecon.ro/ | Eye Con | MIT
Date Range Picker | http://www.dangrossman.info/ | Dan Grossman | MIT
Dropzone | http://www.dropzonejs.com/ | Matias Meno | MIT
Form Switches | http://www.bootstrap-switch.org/ | Mattia Larentis | Apache
JCrop | http://github.com/tapmodo/Jcrop | Kelly Hallman | MIT
Elevate Zoom | www.elevateweb.co.uk/image-zoom | Andrew Eades | MIT
Jquery Knob | http://anthonyterrien.com/knob/ | Anthony Terrien | MIT
Masked Input | http://digitalbush.com/ | Josh Bush | MIT
Jquery Upload | https://github.com/jQueryUpload | Sebastian Tschan | MIT
Prettify | https://code.google.com/prettify/ | Google | Apache
Jquery RangeSlider | http://ghusse.github.io/jQRangeSlider/ | Guillaume Gautreau | MIT
Tags Manager | http://welldonethings.com/manager | Max Favilli | MOZ
Timepicker | http://github.io/timepicker/ | Joris de Wit | MIT
Uniform | http://uniformjs.com/ | PixelMatrix | MIT
Jquery Validate | http://docs.jquery.com/Validation | Jörn Zaefferer | MIT
Ckeditor | http://ckeditor.com/ | Frederico Knabben | Multi
SummerNote | http://github.io/summernote/ | Alan Hong | MIT
Xeditable | http://github.com/x-editable | Vitaliy Potapov | MIT
Ladda | http://lab.hakim.se/ladda | Hakim El Hattab | MIT
JQuery ScrollTo | http://flesler.blogspot.com/ | Ariel Flesler | MIT
JQuery Globalize | http://github.com/globalize | Vitaliy Potapov | MIT
Calendar | http://arshaw.com/fullcalendar/ | Adam Shaw | MIT
Countdown | https://google.com/countdown/ | Martin Donell | Apache
DataTables | http://datatables.net/ | Vitaliy Potapov | Multi
Elfinder | http://elfinder.org | Adam Shaw | Multi
Form Wizard | http://github.com/VinceG/wizard | Vincent Gabriel | MIT
JQuery Map | http://code.google.com/p/jquery-ui-map/ | Johan Larsson | MIT
Gritter | http://www.boedesign.com/ | Jordan Boesch | MIT
JQuery Flot | http://www.flotcharts.org/ | Ole Laursen | MIT
Gmap | http://hpneo.github.com/gmaps/ | Gustavo Leon | MIT
MF Popup | http://dimsemenov.com/magnific/ | Dmitry Semenov | MIT
Mix It Up | http://mixitup.io | Patrick Kunka | MIT
WPaint | http://wpaint.websanova.com/ | Websanova | MIT
Sparkline | http://omnipotent.net/jquery.sparkline/ | Gareth Watts | BSD

#### AdminDesigns - UI Documentation

- Author: Admin Designs
- License: CC - Commercial 3.0
- Website: www.admindesigns.com

General
Elements
Header
Sidebar
Panels
Misc