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);

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.



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']