Calendar
Documentation
Full Calendar DocumentationIncludes
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
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 DocumentationValidation 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.
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'] |