# Buttons

### Markup

    <a class="btn" href="">Link</a>

    <button class="btn" type="submit">Button</button>

    <input class="btn" type="button" value="Input">

    <input class="btn" type="submit" value="Submit">

### Semantic Buttons

Button | class="" | Description
--- | --- | ---
| `btn` | Standard gray button with gradient
| `btn btn-primary` | Provides extra visual weight and identifies the primary action in a set of buttons
| `btn btn-secondary` | Provides extra visual weight and identifies the secondary action in a set of buttons
| `btn btn-tertiary` | Provides extra visual weight and identifies the tertiary action in a set of buttons
| `btn btn-info` | Used as an alternative to the default styles
| `btn btn-success` | Indicates a successful or positive action
| `btn btn-warning` | Indicates caution should be taken with this action
| `btn btn-danger` | Indicates a dangerous or potentially negative action
| `btn btn-inverse` | Alternate dark gray button, not tied to a semantic action or use

### Button Sizes

- `.btn-large`
- `.btn`
- `.btn-small`
- `.btn-mini`

### Disabled State

For disabled buttons, add the `.disabled` class to links and the `disabled` attribute for `<button>` elements.

### Dropdown Markup

    <div class="btn-group">
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Action
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <!-- dropdown menu links -->
      </ul>
    </div>

### Split Button Markup

    <div class="btn-group">
      <button class="btn">Action</button>
      <button class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <!-- dropdown menu links -->
      </ul>
    </div>

# Calendar

### Documentation

Full Calendar Documentation

### Includes

#### Stylesheet

    <link href="./js/plugins/fullcalendar/fullcalendar.css" rel="stylesheet">

#### Javascript

    <script src="./js/plugins/fullcalendar/fullcalendar.min.js"></script>

### Container

    <div id="calendar-holder"></div>

### Javascript

    $('#calendar-holder').fullCalendar({
    	header: {
    		left: 'prev, next',
    		center: 'title',
    		right: 'month,basicWeek,basicDay,'
    	}
    	, events: [
    		{
    			title: 'Long Event',
    			start: new Date(y, m, d-5),
    			end: new Date(y, m, d-2),
    			color: '#3C4049'
    		},
    		{
    			id: 999,
    			title: 'Repeating Event',
    			start: new Date(y, m, 19, 16, 0),
    			end: new Date (y, m, 22, 16, 0),
    			allDay: false,
    			color: '#3C4049'
    		}
    	]
    });

# Charts

### Documentation

jQuery Flot Documentation

### Helper

Add the class `.chart-holder` to your div that is going to contain the chart. This helper class give the chart container a default height which it needs to display properly.

    <div id="bar-chart" class="chart-holder"></div>

### Examples

You can find chart examples for line, pie, donut, vertical bar and horizontal bar charts in the `/js/demos/charts/` folder. The code is clean and organized and should be a great start in creating your own charts.

# Cirque Stat

### Setup

Inlcude the following into your document:

    <link rel="stylesheet" href="./js/plugins/cirque/cirque.css">
    <script src="./js/plugins/cirque/cirque.js"></script>

Create an empty div element to hold your stat:

    <div class="my-stat"></div>

Attach the Cirque stat widget to your html element:

    $('.my-stat').cirque ({
    	value: 234,
    	total: 765,
    	arcColor: '#FF9900'
    });

### Helper

To create a Cirque stat without using writing javascript add the following class to your container: `ui-cirque`

    <div class="ui-cirque" data-value="84"></div>

This will initialize your cirque stat widget with default parameters defined in `Theme.js`

### HTML5 Data Attributes

By setting HTML5 data attributes on a Cirque container you will override any default values previouly set. ALL values of a Cirque widget can be set via data attributes.

    <div class="ui-cirque"
    	data-value="2875"
    	data-total="3245"
    	data-arc-color="#4074AA"
    	data-radius="60"
    	data-line-width="10"
    	data-label="ratio">
    </div>

    <div class="ui-cirque"
    	data-value="13"
    	data-arc-color="#BBBBBB"
    	data-radius="60"
    	data-line-width="10">
    </div>

### Options

Class | Default | Description
--- | --- | ---
value | 0 | Used to calculate the percentage to fill. The 'value' will be divided by the 'total' to derive the percentage.
total | 100 | Set the total value that will be used in the calculation to derive the percentage.
radius | 60 | Sets the radius of the circular stat. To get the total width of the canvas multiply the radius by 2.
label | percent | Set to `percent` to display the percentage in the stat. Set to `ratio` to display the actual ratio used to calculate the stat.
lineWidth | 10 | Defines the thickness of the circle.
arcColor | #0066CC | Defines the fill color of the arc.
trackColor | #EEEEEE | Defines the color of the track.
trackFill | transparent | Defines the fill color of the track.
animate | true | Set to true/false depending on animation preference.
speed | 20 | Set the speed of the animation in milliseconds.

# Page Not Found

# Extra Classes

### Buttons

This theme provides a few extra classes of buttons on top of those provided by default: secondary & tertiary.

    <button class="btn btn-primary">Primary Button</button>
    <button class="btn btn-secondary">Secondary Button</button>
    <button class="btn btn-tertiary">Tertiary Button</button>

#### Button Classes

Class | Description
--- | ---
.btn-primary | Primary
.btn-secondary | Secondary
.btn-tertiary | Tertiary

### Progress Bars

This theme provides a few extra classes of progress bars on top of those provided by default: secondary & tertiary.

    <div class="progress progress-primary">
    	<div class="bar" style="width: 37%"></div>
    </div>

    <div class="progress progress-secondary">
    	<div class="bar" style="width: 37%"></div>
    </div>

    <div class="progress progress-tertiary">
    	<div class="bar" style="width: 37%"></div>
    </div>

#### Progress Bar Classes

Class | Description
--- | ---
.progress-primary | Primary
.progress-secondary | Secondary
.progress-tertiary | Tertiary

### Labels

This theme provides a few extra classes of labels on top of those provided by default: secondary & tertiary.

    <span class="label label-primary">
    	Primary Label
    </span>

    <span class="label label-secondary">
    	Secondary Label
    </span>

    <span class="label label-tertiary">
    	Tertiary Label
    </span>

#### Label Classes

Class | Description
--- | ---
.label-primary | Primary
.label-secondary | Secondary
.label-tertiary | Tertiary

### Badges

This theme provides a few extra classes of badges on top of those provided by default: secondary & tertiary.

    <span class="badge badge-primary">
    	Primary Badge
    </span>

    <span class="badge badge-secondary">
    	Secondary Badge
    </span>

    <span class="badge badge-tertiary">
    	Tertiary Badge
    </span>

#### Badge Classes

Class | Description
--- | ---
.badge-primary | Primary
.badge-secondary | Secondary
.badge-tertiary | Tertiary

# Faq

### Includes

#### Javascript

    <script src="./js/plugins/faq/faq.js"></script>

### Markup

    <ol class="faq-list">

    	<li>
    		<h4>How can I get my own domain name?</h4>
    		<p>Duis aute irure dolor in reprehenderit in voluptate</p>
    	</li>

    	...

    </ol>

### Javascript

    $('.faq-list').goFaq ({
    	enableSearch: true,
    	enableToc: true,
    	enableStyling: true
    });

# Forms

### Validation

For complete information about this plugin and how to get started view:

jQuery Validation Documentation

### Validation Example

In order to use the validation styles provided with this theme you need combine your written validation rules with the custom rules provided by this theme. An example is below:

    var rules = {
    	rules: {
    		name: {
    			minlength: 2,
    			required: true
    		},
    		email: {
    			required: true,
    			email: true
    		},
    		validateCheckbox: {
    			required: true,
    			minlength: 2
    		}
    	}
    };

    var validateObj = $.extend (rules, Theme.validationRules);

    $('#myForm').validate(validateObj);

# Gallery

### Includes

Make sure to include the following javascript in your document when you use charts

`/js/demos/demo.gallery.js`

### Gallery Container

    <ul class="gallery-container">

    	--- GALLERY ITEMS GO HERE ---

    </ul>

### Gallery Items

    <li>
    	<a href="FULL_IMAGE_PATH" class="ui-lightbox">
    		<img src="THUMBNAIL_IMAGE_PATH" />
    	</a>

    	<a href="FULL_IMAGE_PATH" class="preview"></a>
    </li>

# Dashboard Admin Documentation

Dashboard Admin is full featured admin template based on Twitter Bootstrap Framework. Dashboard comes packaged with many custom made widgets and plugins including pricing tables, faq plugin, growl messages, lightbox plugin, validation, and login styles.

This documentation details components and widgets added by Jumpstart UI only. For information on how to use Twitter Bootstrap view their documenation here.

# Menu

### Container

    <ul id="main-nav" class="pull-right">

    	-- ALL ITEMS GO HERE --

    </ul>

### Basic Item

    <li>
    	<a href="javascript:;">
    		<i class="icon-home"></i>
    		<span>Home</span>
    	</a>
    </li>

### Icon Only

NOTE: Be sure to add the class `.nav-icon` to the top-level LI element and wrap your link text in a `span` tag so it's hidden.

    <li class="nav-icon">
    	<a href="javscript:;">
    		<i class="icon-home"></i>
    		<span>Home</span>
    	</a>
    </li>

### Dropdown Menu

    <li class="dropdown">
    	<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
    		<span>span>Dropdown</span>
    		<b class="caret"></b>
    	</a>

    	<ul class="dropdown-menu">
    		<li><a href="#">Dropdown 1</a></li>
    		<li><a href="#">Dropdown 2</a></li>
    	</ul>
    </li>

### Multi-Level Dropdown Menu

    <li class="dropdown">
    	<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
    		Multi-Level Dropdown
    		<b class="caret"></b>
    	</a>

    	<ul class="dropdown-menu">
    		<li><a href="javascript:;">Dropdown #1</a></li>
                    <li><a href="javascript:;">Dropdown #2</a></li>

           	 	<li class="dropdown-submenu">
    			<a tabindex="-1" href="#">Dropdown menu</a>

    			<ul class="dropdown-menu">
    				<li>
    				<a tabindex="-1" href="#">Second level link</a>
    				</li>
    				<li>
    				<a tabindex="-1" href="#">Second level link</a>
    				</li>
    				<li>
    				<a tabindex="-1" href="#">Second level link</a>
    				</li>
    			</ul>
    		</li>

    	</ul>
    </li>

# Pricing

### Container

    <div class="pricing-plans plans-4">

    	--- Plans go here ---

    </div>

#### Number of Plans

Class | Description
--- | ---
.plans-4 | 4 Plans Up
.plans-3 | 3 Plans Up
.plans-2 | 2 Plans Up
.plans-1 | 1 Plans Up

### Plan Html

    <div class="plan-container">

        <div class="plan">

            <div class="plan-header">

            	<div class="plan-title">
            		Micro
        		</div> <!-- /plan-title -->

        		<div class="plan-price">
        			<span class="note">$</span>15<span class="term">Per Month</span>
    		</div> <!-- /plan-price -->

            </div> <!-- /plan-header -->

            <div class="plan-features">

    			<ul>
    				<li><strong>Free</strong> setup</li>
    				<li><strong>1</strong> Website</li>
    				<li><strong>2</strong> Projects</li>
    				<li><strong>1GB</strong> Storage</li>
    				<li><strong>$0</strong> Google Adwords Credit</li>
    			</ul>

    		</div> <!-- /plan-features -->

    		<div class="plan-actions">
    			<a href="javascript:;" class="btn">Purchase Now</a>
    		</div> <!-- /plan-actions -->

    	</div> <!-- /plan -->

    </div> <!-- /plan-container -->

# Shortcuts

### Container

    <div class="shortcuts cols-3">

    	--- SHORTCUTS GO HERE ---

    </div>

### Shortcut Item

    <a href="javascript:;" class="shortcut">
    	<i class="shortcut-icon icon-list-alt"></i>
    	<span class="shortcut-label">Apps</span>
    </a>

### Columns

To modify the number of shortcuts that display in a row use the following classes below:

Class | Description
--- | ---
.cols-3 | 3 in a row
.cols-2 | 2 in a row

# Skins

### Pre-made Skins

To enable a pre-made skin, open the application.less file located in /less directory. Uncomment the skin that you would like to use.

#### Skins

Name | File
--- | ---
Black & Orange | /css/application-black-orange.css
Ocean Breeze | /css/application-ocean-breeze.css
Mean Green | /css/application-mean-green.css
Fire Starter | /css/application-fire-starter.css

### Chart Colors

You can modify the chart colors by opening the `/js/Theme.js` file and modifying the chartColors variable.

    var chartColors = ["#FF9900", "#222222", "#555555", "#888888"];

#### Color Arrays

To enable a color, navigate to Theme.js in the /js directory and comment the chartColors varialble you would like to use. Make sure to comment all other out.

Name | Array
--- | ---
Black & Orange | ["#FF9900", "#333", "#777", "#BBB", "#555", "#999", "#CCC"]
Ocean Breeze | ['#2B4E72', '#94BA65', '#2790B0', '#777','#555','#999','#bbb','#ccc','#eee']
Mean Green | ['#5F9B43', '#DB7D1F', '#BA4139', '#777','#555','#999','#bbb','#ccc','#eee']
Fire Starter | ['#750000', '#F90', '#777', '#555','#002646','#999','#bbb','#ccc','#eee']

# UI Elements

## Icons

Font Awesome Documentation

## Lightbox

Lightbox Evolution Documentation

## Growl Messages

MsgGrowl Documentation

## MsgBox

MsgBox Documentation

## Sliders

jQuery UI Slider Documentation

## Date Picker

jQuery UI Datepicker Documentation