## Getting Started

Thank you for purchasing KingAdmin Admin Dashboard. By reading this documentation we hope you will get the most of its features. This template/theme is built with the latest Bootstrap 3 and Sass. We recommend that you use Sass to customize the theme because it will be very easy since we have provided variables to change the color, font and others. If you have any questions that are beyond the scope of this help file, please feel free to contact us by sending your message via form provided by Wrapbootstrap https://wrapbootstrap.com/user/thedevelovers.

### Directory Structure

After unzipping the downloaded file, you will get files and directories structured as below:

- `documentation/`: where this documentation is placed
- `theme/`: includes theme files

Javascript files includes jQuery and the plugins are located at `assets/js/`. Files named as `king-*` are used to initialize and and configure plugins. They are:

- `king-chart-stat.js`
- `king-chart-stat-transparent.js`
- `king-common.js`
- `king-components.js`
- `king-components-transparent.js`
- `king-elements.js`
- `king-form-layouts.js`
- `king-page.js`
- `king-page-transparent.js`
- `king-table.js`

File with "-transparent.js" is specificly used with transparent skin only. It's required because some color customization can only be done when the plugin is configured and initialized. Other than that, it's done in css skin file `assets/css/skins/transparent.css`.

### Warning

Direct change to main.css is not recommended to avoid problems when theme updates arrived in the future. So, override theme styles or write custom styles and save it to `assets/css/my-custom-styles.css`. If you use Sass, please use `sass/my-custom-styles.scss`

### Having Page Redirect Error?

If you have problem with page redirect after clicking "Start Tour" button and can't navigate anywhere after, please go to Bootstrap Tour basePath Setting

## Layouts

The layout in general is divided into 4 main areas, they are top bar, left navigation, right area as main content and footer. Also, we put general alert on above top bar and it can be closed. See below for the illustration.

TOP BAR `.top-bar`
MAIN CONTENT `.content-wrapper`

### Layout Options

KingAdmin provides you with option for layout as below:

- Collapsed Sidebar: when page is loaded, left navigation sidebar is initially collapsed. Open `layout-collapsed.php` for demo.
- Minified Sidebar: when page is loaded, left navigation sidebar is initially minified with icon only. Open `layout-minified.php` for demo.
- On-Top Navigation: alternative main navigation, placed on top bar. Open `layout-ontop-navigation.php` for demo.

## Common JS

Below is the list of the common javascripts files needed for all the pages. Make sure that you always include them.

- `jquery-2.1.0.min.js` jQuery
- `bootstrap.js` Bootstrap
- `modernizr.js` Modernizr
- `bootstrap-tour.custom.js` Bootstrap Tour
- `king-common.js` Initialization file for various common functions such as top bar notifications, left menu dropdown, widget etc

### Widget

The widget comes with several styles and functionalities, including button to trigger AJAX call and make changes to the widget content. Basic widget will have a structure as below.

However some widgets could have a button to do a single task, for example triggering AJAX call as below.

JS File: `assets/js/king-common.js`
PHP File: `php/widget-ajax.php`

Please note that this widget work only if you run the theme on web server with PHP environment.

## Pages

Some of the pages such as Invoice and Inbox need the scripts to work properly. Please see `king-page.js` to check the scripts needed for page template. Somehow, other script may be included for example `bootstrap-switch.min.js` to create the switch version of the checkbox and so on.

## Chart & Stat

KingAdmin uses Flot Chart (http://www.flotcharts.org/) as main library to work with charts. Flot Chart scrips located at `assets/js/stat/flot/` directory with `jquery.flot.min.js` as the main library script, meanwhile others are plugin to work with specific function such as chart selection, tooltip etc. In addition, we also provide easyPieChart and Sparkline for other chart and statistic purposes.

### Flot Chart

Create a placeholder div to put the graph in and it's important to note that the chart need a dimension defined, so you have to set width and height either by inline css or external stylesheet. This example uses inline style, whereas the theme use external stylesheet.

Then when the div is ready in the DOM, which is usually on document ready, run the plot function:

Here, data is an array of data series and options is an object with settings if you want to customize the plot. Take a look at the examples for some ideas of what to put in or look at the API reference. Here's a quick example that'll draw a line from (0, 0) to (1, 1):

For more advanced use with various options as seen on the chart demo page, you can check the scripts at `king-chart-stat.js` and find "CHART AND STAT DEMO PAGE". Official documentation can be found here at https://github.com/flot/flot/blob/master/API.md

### easyPieChart

easyPieChart (http://rendro.github.io/easy-pie-chart/) create simple pie chart with single value as you see on the first widget of the dashboard.

Plugin File: `assets/js/plugins/stat/jquery.easypiechart.min.js`
Site: http://rendro.github.io/easy-pie-chart/

To create the chart first add the element with `data-percent` attribute with the percent number as the value.

Initialize the chart as below:

For further complete documentation includes possible configuration options, please visit the official documentation at http://rendro.github.io/easy-pie-chart/

### Sparkline

This chart is mainly used for inline chart with relatively small size compared to the others. First add the placeholder element as below.

Plugin File: `assets/js/plugins/jquery-sparkline/jquery.sparkline.min.js`
Site: http://omnipotent.net/jquery.sparkline/#s-docs

Provide the data and initialize the chart as below:

Please visit official documentation at http://omnipotent.net/jquery.sparkline/#s-docs for further examples and options.

### D3 Heatmap Charts

This chart is an example of data visualization of visit statistic for 24 hours in a week. It uses D3.js, a Javascript library for manipulating documents based on data.

Plugin File: `assets/js/plugins/stat/d3.js`
Site: http://d3js.org/
Data File: `assets/js/plugins/stat/data-heatmap.tsv`
Optional: `assets/js/plugins/stat/colorbrewer.js` (providing set of colors)

Please note that this chart will work as the demo only if you run the theme on web server environment.

As data source for the chart, we use `.tsv` (tab-separated values) file as source of data. Then the next step is creating a placeholder for the chart, in the below example the element has id `demo-d3-heatmap`. Part of code below is taken from `charts-d3charts.html` in case you want to see the full code.

Next, open file `assets/js/king-chart-stat.js` and find "demo-d3-heatmap", it should point to the code as below:

Provide the value to the `placeholderHeat` and `dateHeat`. The variable name and comment on the above code should be self-explanatory.

### D3 Bar Chart

The chart can accomodate negative values and built based on D3.js library

Plugin File: `assets/js/plugins/stat/d3.js`
Site: http://d3js.org/
Data File: `assets/js/plugins/stat/data-barchart.tsv`

Please note that this chart will work as the demo only if you run the theme on web server environment.

Create the placeholder for the chart

Next, open file `assets/js/king-chart-stat.js` and find "demo-d3-barchart", it should point to the code as below:

Provide the value to the `placeholderBar` and `dataBar`. The variable name and comment on the above code should be self-explanatory.

## Forms

This section explains form element used in the theme and its validation. In addition, we will show you how to create the file upload zone area from Dropzone and the PHP files related with uploading process.

### Form Elements

Beside the standard Bootstrap form element, we also provide some 3rd-party libraries for additional functions and styles. The scripts used for the initialization is `king-elements.js`

#### Masked Input

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)

Plugin File: `assets/js/plugins/jquery-maskedinput/jquery.masked-input.min.js`
Site: http://digitalbush.com/projects/masked-input-plugin/

For example you want the text field is formatted as phone number, first create the input element as below

Then define the rules as below example, you can define your own rule though

For further examples, see `king-element.js` or visit the official site at http://digitalbush.com/projects/masked-input-plugin/

#### Switch

Fancy checkbox and radio button with various styles

Plugin File: `assets/js/plugins/bootstrap-switch/bootstrap-switch.min.js`
Site: http://www.bootstrap-switch.org

Add the checkbox element

Initialize it

#### Multiselect

Plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.

Plugin File: `assets/js/plugins/bootstrap-multiselect/bootstrap-multiselect.js`
Site: http://davidstutz.github.io/bootstrap-multiselect/

Create the select element as below

Initialize the plugin

#### Range Slider Input

A powerful slider for selecting value ranges, supporting dates and more.

Initialize the plugin

Plugin File: `assets/js/plugins/jqallrangesliders/jQAllRangeSliders-min.js`
Site: http://ghusse.github.io/jQRangeSlider/documentation.html

#### Date Picker

Adding date picker capability to field or other element

Plugin File: `assets/js/plugins/bootstrap-datepicker/bootstrap-datepicker.js`
Site: http://www.eyecon.ro/bootstrap-datepicker

Initialize the plugin, also hide it after the date has been selected.

#### Date Range Picker

Enable date range selection via dropdown menu calendar

Plugin File: `assets/js/plugins/daterangepicker/daterangepicker.js`
Require: `assets/js/plugins/moment/moment.js`
Site: https://github.com/dangrossman/bootstrap-daterangepicker

Initialize the plugin with timePicker enabled

#### Text Area

Enable character counter to text area

Determine the maximum character as below

#### Spinner Input

A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.

Plugin File: `assets/js/plugins/bootstrap-touchspin/jquery.bootstrap-touchspin.js`
Site: http://www.virtuosoft.eu/code/bootstrap-touchspin/

Initialize the plugin

#### Color Picker

Adding color picker to field or any other element

Plugin File: `assets/js/plugins/bootstrap-colorpicker/bootstrap-colorpicker.min.js`
Site: http://www.eyecon.ro/bootstrap-colorpicker/

Initialize the plugin

##### Simple Color Picker

Simple color picker with provided color options

Plugin File: `assets/js/plugins/jquery-simplecolorpicker/jquery.simplecolorpicker.js`
Site: https://github.com/tkrotoff/jquery-simplecolorpicker

Initialize the plugin

#### Dynamic Form Fields

User can add more field as necessary

jQuery script as below

#### Slider Input since v1.2

A Bootstrap slider input with various features such as horizontal, vertical slider, step, range selector and others.

Plugin File: `assets/js/plugins/bootstrap-slider/bootstrap-slider.js`
Site: http://www.eyecon.ro/bootstrap-slider

Initialize the plugin via javascript

You can also determine the orientation either horizontal (default) or vertical slider. In addition if you want to create step slider (incremented by certain number), use `step` option and provide the step number.

For range slider type, we recommend you to use Range Slider Input

#### Select2 since v1.2

This plugin is used to replace the default select boxes.

Plugin File: `assets/js/plugins/select2/select2.min.js`
Site: http://ivaynberg.github.io/select2/index.html

Initialize the plugin via javascript

For further use, you can visit the official documentation here http://ivaynberg.github.io/select2/index.html#documentation.

#### Tags Input since v1.2

Provide input for tags as easy as type and hit enter.

Plugin File: `assets/js/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js`
Site: http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/

Just add `data-role="tagsinput"` to your input field to automatically change it to a tags input field. You can also provide the initial value as shown on the above snippet.

### Form Validation

We use Parsley to validate form without writing any single line of javascript, powerful, simple and easy to use.

Plugin File: `assets/js/plugins/parsley-validation/parsley.min.js`
Site: http://parsleyjs.org

For more example and options please visit the official documentation at http://parsleyjs.org/documentation.html

### Dropzone File Upload

Provides drag and drop uploads with image previews. It also has fallback support for older browser.

Plugin File: `assets/js/plugins/dropzone/dropzone.min.js`
Site: http://www.dropzonejs.com/

Initialize the plugin as below

The `url` refers to server-side upload processor file (`dropzone-upload.php`), in this case PHP. You can find it on the `php/` directory. As you can see on the `dropzone-upload.php`, the file will be uploaded to `php/uploads/` directory.

Please note that the upload functionality will work only if you run the theme on web server with PHP environment.
If somehow you can't upload the file, please check the `php/uploads/` directory permission, make sure it's writable (CHMOD 777).

### In-Place Editing since v1.2

This theme uses x-editable plugin to allow you to create editable elements on your page or form, includes both popup and inline mode.

Plugin File: `assets/js/plugins/bootstrap-editable/bootstrap-editable.min.js`
Site: http://vitalets.github.io/x-editable/

Main attributes you should define are:

- `type` - type of input (text, textarea, select, etc)
- `url` - url to server-side script to process submitted value (`/post`, `post.php` etc)
- `pk` - primary key of record to be updated (ID in db)
- `id` or `name` - name of field to be updated (column in db). Taken from `id` or `data-name` attribute
- `value` - initial value. Usefull for select, where value is integer key of text to be shown. If empty - will be taken from element html contents

Alternatively, you can set all options via javascript

The demo uses Mockjax to mocking or simulating ajax request and response. The handler setup can be found at `/assets/js/demo-mock.js`

### WYSIWYG Text Editor since v1.2

Summernote is super simple text editor for Bootstrap.

Plugin File: `assets/js/plugins/summernote/summernote.min.js`
Site: http://hackerwins.github.io/summernote/

Initialize the plugin with some options

You can also define custom toolbar and use callbacks, please follow this documentation http://hackerwins.github.io/summernote/features.html#api

### Markdown Text Editor since v1.2

A simple Markdown editor for Bootstrap, easy to use with useful APIs.

Plugin File: `assets/js/plugins/markdown/bootstrap-markdown.js`
Site: http://github.com/toopay/bootstrap-markdown

On the code above we initialize the editor using `data-provide` attribute. In addition the text editor will use Font Awesome icons as icon library for the editor via `data-iconlibrary`, default to `glyph` (Glyphicons) as provided by Bootstrap distribution file.

## UI Elements

### Progress Bar

This plugin extend the basic progress bar from Twitter Bootstrap. It can animate the progress bar and has various info progress format such as percentage or custom format.

Plugin File: `assets/js/plugins/bootstrap-progressbar/bootstrap-progressbar.js`
Site: http://www.minddust.com/project/bootstrap-progressbar/

Initialization with basic config:

### Labels & Badges

Standard bootstrap labels and badges, please follow the links below for the documentation.

Site: http://getbootstrap.com/components/#labels, http://getbootstrap.com/components/#badges

### Pagination

In addition to the standard bootstrap pagination, we also provide alternative style for pagination.

Site: http://getbootstrap.com/components/#pagination

Alternative style for pagination, just add class `borderless`.

### Alerts

Standard bootstrap alerts, please follow link below for the documentation.

Site: http://getbootstrap.com/components/#alerts

For smoother closed message with fade out effect, we add a little bit script as below

### Tooltips

Standard bootstrap tooltip.

Plugin File: `assets/js/bootstrap/bootstrap.js`
Site: http://getbootstrap.com/javascript/#tooltips

Initialize the plugin as below

### Modal Dialog

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Plugin File: `assets/js/bootstrap/bootstrap.js`
Site: http://getbootstrap.com/javascript/#modals

### Tabs

Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.

Plugin File: `assets/js/bootstrap/bootstrap.js`
Site: http://getbootstrap.com/javascript/#tabs

### Accordion

Standard bootstrap collapsible content. We can add icon, label and badge to the tab.

Plugin File: `assets/js/bootstrap/bootstrap.js`
Site: http://getbootstrap.com/javascript/#collapse

### Buttons

The standard bootstrap buttons can be extended as buttons dropdown, grouped as button groups and combined with font icon such as Font Awesome. In addition, button also can have loading state on it, mostly used to process ajax.

Site: http://getbootstrap.com/css/#buttons
Stateful button: http://getbootstrap.com/javascript/#buttons since v1.2

Below is the example on how to create a stateful button

Javascript to process ajax by clicking the button

As shown above, the button will start change to loading state once executed `btn.button('loading')` and back to initial after reset, `btn.button('reset')`.

### Icons

We use Font Awesome icons as our main icon collection, but however you can also use Glyphicons delivered with bootstrap. Note that these icons only comes with 200 glyphs from the Glyphicon Halflings set.

Site: http://getbootstrap.com/components/#glyphicons
Font Awesome: http://fortawesome.github.io/Font-Awesome/examples/
Glyphicons: http://glyphicons.com/

### Flash Message

Alert a user with Growl like flash message which comes with alert placement and style options. It has sound too!

Plugin File: `assets/js/plugins/jquery-gritter/jquery.gritter.min.js`
Site: http://boedesign.com/blog/2009/07/11/growl-for-jquery-gritter/

Initialize a flash message

## Components

In this section, we will explain how the wizard works with form validation, setup calendar, maps and others

### Wizard

We have added the validation to the wizard using parsley form validator as explained on the Form Validation sub-topic

Plugin File: `assets/js/plugins/wizard/wizard.min.js`
Site: http://exacttarget.github.io/fuelux/#wizard

As you can see the validation is simple, by adding the data attributes `data-parsley-*` as your requirements. Then we initialize the plugin, integrate it with Parsley validator and setup the navigation and event when the wizard is finished.

### Calendar

The calendar from FullCalendar plugin provides a full-sized, drag & drop calendar. The calendar comes with 3 view modes, i.e. month, week and day

Plugin File: `assets/js/plugins/fullcalendar/fullcalendar.min.js`
Site: http://arshaw.com/fullcalendar/docs/usage/

First add the element for calendar placeholder

Then initialize the plugin

### Maps

We use Mapael as map plugin that allows you to display dynamic vector maps, we also provide Google Map with custom style.

#### Vector Map

Plugin File: `assets/js/plugins/jquery-mapael/jquery.mapael.js`
Require: `assets/js/plugins/raphael/raphael-min.js`
Maps: `assets/js/plugins/raphael/maps/`
Optional: `assets/js/plugins/jquery-mousewheel/jquery.mousewheel.js` used in map zoom demo
Site: http://www.neveldo.fr/mapael/

Add elements as below

Then initialize the plugin

`name` value: `world_countries` refers to map name defined in the `assets/js/maps/world_countries.js`, usually has a same value as its file name.

#### Google Map

Js File: `assets/js/plugins/google-map/google-map.js`
Site: https://developers.google.com/maps/documentation/javascript/basics

Provide your API key and map address by finding functions below at `google-map.js`

Note: Google map requires API key. Please visit this link to obtain API key https://developers.google.com/maps/documentation/javascript/tutorial#api_key

### Bootstrap Tour

Bootstrap tour is new in KingAdmin v1.1 and it's useful to guide user, especially new user to learn the website or simply showing new feature/update to the website. Note that we have fixed bug that only show on IE, so this isn't the original plugin file.

Plugin File: `assets/js/plugins/bootstrap-tour/bootstrap-tour.custom.js`
Site: http://bootstraptour.com/

### basePath value

Bootstrap Tour configured in this theme needs valid `basePath` value based on web server environment. Please open `assets/js/king-common.js` and find parameter `basePath` and provide your value. For example if the theme url is: http://demo.thedevelovers.com/dashboard/kingadmin-v1.1/ the `basePath` should be /dashboard/kingadmin-v1.1/.

If you clicking "Start Tour" before providing valid `basePath` value, the page will be redirected to currently provided `basePath` value. So to avoid redirection problem, after providing valid value for `basePath`, you also have to remove key `tour_current_step` in your browser local storage. Below is how to find and remove the key.

Make sure the key has been removed by refreshing local storage (step 5), then back to homepage (dashboard).

To create a tour first we have to determine element target identified by `id` or `class`. Let's say we want the search box is guided by tour then we will have the element as below:

Note that the search box has id `tour-searchbox` and a button with id `important-button`, so in the javascript we will set this as below:

So in the example above. the first step of the tour will highlight the searchbox and then to the button as the next step. You can also create a cross-page tour by defining `path` value on the `step`. Please read the full documentation about Bootstrap Tour at http://bootstraptour.com/api

### Tree View

Tree view is implemented with jsTree plugin using AJAX data loading method.

Plugin File: `assets/js/plugins/tree/jstree.js`
Site: http://www.jstree.com/
Data File: `assets/js/plugins/tree/tree-filesystem.json`

Below is a customized tree view, it uses icons from Font Awesome.

Initialization and configuration

Since the tree is populated with JSON by AJAX loading, provide valid `url` to the JSON file. jsTree also provide plugins to extend core functionality, on the example above, `contextmenu` is used to provide right click pop-up menu for each tree item while `checkbox` plugin is used to enable checkbox in each node item. In addition, you can change icon for each tree item type using `types` plugin.

Tree data JSON file: `assets/js/plugins/tree/tree-filesystem.json`

## Tables

This section will show you about the tables, both static comes from standard bootstrap table and dynamic table from jQuery Datatables

### Static Table

Standard bootstrap table

Site: http://getbootstrap.com/css/#tables

### Dynamic Table

#### DataTables

We use DataTables, 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. Below is basic usage of DataTables with bootstrap support

Plugin File: `assets/js/plugins/datatable/jquery.dataTables.min.js`
Require : `assets/js/plugins/datatable/dataTables.bootstrap.js` for bootstrap style support, `assets/js/plugins/datatable/exts/` as datatable extension such as export data feature
Site: http://datatables.net/

Initialise the datatable with bootstrap small column (`col-sm-6`) for table features at the top and bottom of the table.

Data Export Feature
Note: Table with data export require Flash plugin.

#### jqGrid

jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web.

Plugin File: `assets/js/plugins/jqgrid/jquery.jqGrid.min.js`
Recommended : `assets/js/plugins/jqgrid/jquery.jqGrid.fluid.js`
PHP File : `php/jqgrid/server.php`
DB File : `database_demo.sql` to be exported to the database later
Site: http://www.trirand.com/jqgridwiki/doku.php

Please note that jqGrid will work as the demo only if you run the theme on web server with PHP environment and have created database table needed. The `server.php` file works as server-side processor to connect to the database, query data and return it to the table.

Important: Please configure your database connection on `php/jqgrid/dbconfig.php` as below

1. Create database `dashboard_demo`
2. Import sql script `database_demo.sql` to create `invheader` table with its data.

## Typography

For further documentation, please visit bootstrap official documentation

Site: http://getbootstrap.com/css/#type

## Skins

Since Kingboard v1.1 you are provided with 10 built-in skins that includes 8 color skins and 3 special skins (Transparent, Full Bright and Full Dark). You can locate the skin files at `assets/css/skins/` and if you use Sass locate the files at `sass/skins/`. By default the theme didn't use any skin file provided and if you want to apply the skin to the theme please add code below in the `head` of each html file.

In the example above, a skin (teal.css) is applied and you may prefer the other skin like darkblue, orange, fulldark and so on as provided at `assets/css/skins/`

## Changelog

##### Version 1.6.2 (28-04-2017)

- REMOVED Compass
- REMOVED unnecessary style switcher script
- FIXED submenu list style

##### Version 1.6.1 (14-09-2016)

- ADDED bonus: KingAdmin Landing Page
- IMPROVED color contrast for maps, charts and overall UI
- IMPROVED fullbright skin, now it’s cleaner
- IMPROVED transparent skin, font color contrast adjustment
- IMPROVED left sidebar navigation animation and transition in minified mode
- UPDATED page-inbox.html to hold more message examples
- FIXED invincible area that triggering submenu in minified navigation
- FIXED widget focus mode, hide top bar and left sidebar
- FIXED widget collapse and expand feature
- FIXED normal left sidebar z-index relative to top bar

##### Version 1.6 (24-07-2016)

- ADDED new dashboard (investment portfolio)
- ADDED new on-top main navigation layout
- ADDED layouts demo page to show navigation default behavior, such as minified, collapsed
- ADDED navigations demo page to show default left sidebar and normal left sidebar behavior (from previous version)
- UPDATED Font Awesome to v4.6.3
- UPDATED major changes to main navigation (left sidebar), it’s now scrollable by default and smaller width to make main content wider
- UPDATED top bar is now top-fixed by default
- UPDATED documentation
- IMPROVED off-canvas left sidebar navigation on smaller screen
- IMPROVED major changes also includes removing unnecessary div on left sidebar and top bar. For top-level layout, it doesn’t depend on grid sizing (col-md-*) anymore
- IMPROVED misc thins such as footer, font size on left sidebar, shorter menu item name and more vertical padding for menu items
- REMOVED left sidebar info to make more vertical space and focus for main navigation

##### Version 1.5 (04-01-2016)

- ADDED new transparent skin
- ADDED new dashboard home page
- ADDED new elements such as quick inbox, profile completeness meter, Slack UI, real-time pie chart, tiny stat info (progress bar)
- UPDATED Bootstrap to v3.3.6
- UPDATED Font Awesome to v4.5.0
- UPDATED documentation
- IMPROVED general UI elements, drag & drop to-do list
- IMPROVED textarea with counter, more flexible. Thanks to our customer, Jon
- FIXED quick note now can give focus on title field
- FIXED top general alert, now placed inside content wrapper

##### Version 1.4 (26-03-2015)

- ADDED Tree View
- ADDED new dashboard page
- ADDED Pages: File Manager, Projects, Project Detail, FAQ
- ADDED Widgets: Widget with AJAX state (loading, success, error), Quick Note, Widget Scrolling, Contextual Summary Info, Activity Feed, Employee of The Month, Ajax Drag and Drop To-Do List
- ADDED 3 level navigation menu
- ADDED my-custom-styles.scss for customizing, provided to avoid direct change to main.scss or main.css
- UPDATED to Bootstrap 3.3.2
- UPDATED to FontAwesome 4.3.0
- UPDATED to Datatable 1.10.5, datatable TableTools
- UPDATED input with validation states (form-bootstrap-elements.html)
- UPDATED documentation
- CHANGED all .fa to i
- IMPROVED navigation menu transition, refactor login and register page styles, widget help popover will active on hover, message dropdown notification for unread message
- IMPROVED separate .scss file for Bootstrap elements related (_ui-bootstrap-elements.scss) and custom/plugin elements (_ui-elements.scss)
- FIXED top navigation dropdown menu overflow, invoice print style problem, initial down arrow when a child page is visited
- FIXED username on-focus color for full bright skin
- MISC removed unnecessary .btn-group at widget header, removed button outline on focus, removed underline when hovering active link, change widget content heading (h4, h5, h6), remove unnecessary styles, remove primary and secondary color (_base.scss), removed push-sticky-footer

##### Version 1.3 (11-09-2014)

- ADDED more Pages (New Message, Compose Message, Search Result, Submit Ticket)
- ADDED more dynamic tables based on Datatables (drag/drop column reorder, column filter, data export feature, scrolling table)
- ADDED more static tables (responsive table, contextual table)
- ADDED Google Map
- ADDED Bootstrap tabs and custom tabs
- ADDED option for top-fixed navigation
- UPDATED to Bootstrap 3.2.0
- UPDATED to Font Awesome 4.2.0
- UPDATED to Datatables 1.10.2
- UPDATED to Bootstrap Progressbar 0.8.3
- UPDATED to Bootstrap Touchspin 3.0.1
- UPDATED to Multiselect 0.9.8
- UPDATED to Parsleyjs 2.0.5
- IMPROVED fancy checkbox and radio button, simpler and more flexible to be included in other elements/plugins, other elements to be W3C compliants.
- IMPROVED javascript file and directory management
- FIXED styles on IE9, splitting css file into parts to avoid IE9 selectors limit
- Other miscellaneous fixes, css refactor, code cleaning and improvements

##### Version 1.2 (16-05-2014)

- Rebranding due to name similarity with an open-source project
- ADDED in-place editing
- ADDED form layouts
- ADDED WYSIWYG and Markdown text editor
- ADDED global sound on/off switch
- ADDED more elements such as buttons, input slider, select2 and tags input
- ADDED more standard bootstrap elements and separate them to another page
- IMPROVED login page
- IMPROVED top alert won't shown once the user click close button
- IMPROVED code cleaning and restructuring
- IMPROVED fancy radio button dot, won't look ugly on some browsers
- FIXED sticky footer
- FIXED small overflow on top bar dropdown, center alignment on small screen
- FIXED top mini bar chart and top quick access on smaller screen
- Other miscellaneous improvements for UI, codes and structure

##### Version 1.1 (07-04-2014)

- UPDATED to jQuery 2.1.0
- UPDATED to jQuery-UI 1.10.4
- ADDED Bootstrap Tour
- ADDED 10 built-in skins
- ADDED 2 charts (Heatmap and Bar Chart with Negative Values)
- ADDED attachment icon on inbox message list
- IMPROVED font visibility, layout and UI related aspects
- UPDATED documentation
- FIXED some miscellaneous errors

##### Version 1.0 (04-03-2014)

- Initial release

## Credits

We would like to thank you for jQuery plugins, icons, fonts, images and audio files used in this theme created by the fellow individual developer or team below:

- jQuery - http://jquery.com/
- Bootstrap - http://getbootstrap.com/
- Modernizr - http://modernizr.com/
- jQuery Flot - http://www.flotcharts.org/
- easyPieChart - http://rendro.github.io/easy-pie-chart/
- Sparkline - http://omnipotent.net/jquery.sparkline/
- Mapael - http://www.neveldo.fr/mapael/
- Rapael - http://raphaeljs.com/
- DataTable - http://datatables.net/
- jqGrid - http://www.trirand.com/blog/
- FullCalendar - http://arshaw.com/fullcalendar/
- jQueryUI - http://jqueryui.com/
- FuelUX - http://exacttarget.github.io/fuelux/
- Bootstrap Switch - http://www.bootstrap-switch.org
- Masked Input - http://digitalbush.com/projects/masked-input-plugin
- jQRangeSlider - http://ghusse.github.io/jQRangeSlider/documentation.html
- Bootstrap Color Picker - http://ghusse.github.io/jQRangeSlider/documentation.html
- Simple Color Picker - https://github.com/tkrotoff/jquery-simplecolorpicker
- Bootstrap TouchSpin - https://github.com/istvan-meszaros/bootstrap-touchspin
- Bootstrap Date Picker - http://www.eyecon.ro/bootstrap-datepicker
- Date Range Picker - https://github.com/dangrossman/bootstrap-daterangepicker
- Dropzone - http://www.dropzonejs.com/
- Parsley - http://parsleyjs.org/
- Bootstrap Multiselect - https://github.com/davidstutz/bootstrap-multiselect
- Bootstrap Progress Bar - http://www.minddust.com/bootstrap-progressbar/bootstrap-3.0.0-rc2.html
- Bootstrap Tour - http://bootstraptour.com
- Data-Driven Documents - http://d3js.org/
- Color Brewer - http://colorbrewer.org/
- Gritter - http://boedesign.com/blog/2009/07/11/growl-for-jquery-gritter/
- Images - http://unsplash.com/
- UIFaces - http://uifaces.com/
- Font Awesome Icons - http://fortawesome.github.io/Font-Awesome/
- Glyphicons - http://glyphicons.com
- Sound Jay - http://www.soundjay.com/
- X-Editable - http://vitalets.github.io/x-editable/
- Summernote - http://hackerwins.github.io/summernote/
- Bootstrap Markdown - http://github.com/toopay/bootstrap-markdown
- Select2 http://ivaynberg.github.io/select2/index.html
- Bootstrap Slider - http://www.eyecon.ro/bootstrap-slider
- Bootstrap Tags Input - http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/
- Typeaheadjs - https://github.com/twitter/typeahead.js
- Mockjax - https://github.com/appendto/jquery-mockjax
- jsTree - http://www.jstree.com/
- Bootstrap Context Menu - https://github.com/sydcanem/bootstrap-contextmenu
- jQuery slimScroll - http://rocha.la/jQuery-slimScroll