Support

Canvas Admin is a premium, full featured, responsive admin template that helps you get your project started quickly and with ease. Included are 20+ sample pages showcasing the many layouts and widgets you have at your disposal such as: buttons, grid layout, google maps, tooltips, and much more.

View Demo

Grid Layout

Container

<div class="container">
	-- Grid items go here --
</div>

Grid System

This theme uses a 24 column fluid grid system for layout. Some valid layouts are listed below.

<div class="grid-24"> -- Content goes here -- </div>

<div class="grid-12"> -- Content goes here -- </div>
<div class="grid-12"> -- Content goes here -- </div>

<div class="grid-8"> -- Content goes here -- </div>
<div class="grid-8"> -- Content goes here -- </div>
<div class="grid-8"> -- Content goes here -- </div>

<div class="grid-6"> -- Content goes here -- </div>
<div class="grid-6"> -- Content goes here -- </div>
<div class="grid-6"> -- Content goes here -- </div>
<div class="grid-6"> -- Content goes here -- </div>

<div class="grid-16"> -- Content goes here -- </div>
<div class="grid-8"> -- Content goes here -- </div>

Incorrect Column Layout

<div class="grid-16"> -- Content goes here -- </div>
<div class="grid-10"> -- Content goes here -- </div>

Box Layout

You can use the box layout as a lightweight container to display content with default styling and margins.

Basic box with light gray background, inside padding, and margin bottom.

<div class="box">
	-- Content goes here --
</div>

Box with no background and content flush to the edges of the container.

<div class="box plain">
	-- Content goes here --
</div>

Form Layout

Basic Form

Container

<form class="form">
	
</form>

Single Field

<div class="field-group">
	<label for="fname">First Name:</label>
	
	<div class="field">
		<input type="text" name="fname" id="fname" size="10" class="" />	
	</div> <!-- .field -->
</div> <!-- .field-group -->

Multiple Fields

<div class="field-group">
	<label>Name:</label>
	
	<div class="field">
		<input type="text" name="fname" id="fname" size="10" class="" />			
		<label for="fname">First</label>
	</div> <!-- .field -->
	
	<div class="field">
		<input type="text" name="mname" id="mname" size="1" />			
		<label for="mname">Mi</label>
	</div> <!-- .field -->
	
	<div class="field">
		<input type="text" name="lname" id="lname" size="12" class="" />			
		<label for="lname">Last</label>
	</div> <!-- .field -->
</div> <!-- .field-group -->

Radio / Checkbox

<div class="field-group control-group">	
	<label>Radio:</label>	

	<div class="field">
		<input type="radio" name="radio" id="radio1" value="1" />
		<label for="radio1">Radio 1</label>
	</div> <!-- .field -->

	<div class="field">
		<input type="radio" name="radio" id="radio2" value="2" />
		<label for="radio2">Radio 2</label>
	</div> <!-- .field -->

	<div class="field">
		<input type="radio" name="radio" id="radio3" value="3" />
		<label for="radio3">Radio 3</label>
	</div> <!-- .field -->	
</div>

File Input

<div class="field-group">	
	<label for="myfile">File Input:</label>

	<div class="field">
		<input type="file" name="myfile" id="myfile" />
	</div>	
</div>

Select Field

<div class="field-group">		
	<label>Billing Information:</label>

	<div class="field">
		<select name="cardtype" id="cardtype">
			<option>Visa</option>
			<option>Master Card</option>
			<option>American Express</option>
			<option>Discover</option>
		</select>
		
		<label for="cardtype">Card Type</label>
	</div>		
</div> <!-- .field-group -->

Uniform Plugin

To auto enable the Uniform plugin add the class .uniformForm to your main .form element.

<form class="form uniformForm">
	
</form>

Buttons

Basic Button

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

Button w/ Icon

<button class="btn">
	<span class="icon-home"></span>
	Button
</button>

Sizes

<button class="btn btn-large">Button</button>
Name Class Description
Small .btn-small Small button
Regular .btn Regular button
Large .btn-large Large button
X-Large .btn-xlarge X-Large button

Colors

<button class="btn btn-orange">Button</button>
Name Class Description
Blue .btn-blue Blue button
Green .btn-green Green button
Orange .btn-orange Orange button
Black .btn-black Black button
Teal .btn-teal Teal button
Purple .btn-purple Purple button
Pink .btn-pink Pink button
Red .btn-red Red button
Gray .btn-gray Gray button

Semantic Classes

<button class="btn btn-primary">Button</button>
Name Class Description
Primary .btn-primary Primary action
Secondary .btn-secondary Secondary action
Tertiary .btn-tertiary Tertiary action
Quaternary .btn-quaternary Quaternary action
Success .btn-success Succes action
Info .btn-info Info action
Warning .btn-warning Warning action
Error .btn-error Error action

Icon Classes

The available icon classes are listed in this document below.

Tables

Basic Table

Converts an unstyled table into a basic styled data table.

<table class="table">
	<thead>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Trident</td>
			<td>Internet Explorer 4.0</td>
			<td>Win 95+</td>
		</tr>
		<tr>
			<td>Trident</td>
			<td>Internet Explorer 5.0</td>
			<td>Win 95+</td>
		</tr>
	</tbody>
</table>

Striped Table

Add alternating row colors to your data table.

<table class="table table-striped">
	
</table>

Bordered Table

Adds a full border around all table cells and headings. Also distinguishes the table header more.

<table class="table table-bordered">
	
</table>

Widget Table

Any table using the above classes for .table can be included within a widget. By adding the class .widget-table the default widget padding will be removed and the table will be flush against the container. 

<div class="widget widget-table">
	
</div>

Widget Layout

Basic Widget

Example Widget

<div class="widget">
	<div class="widget-header">	
		<h3>Widget Title</h3>
	</div>
	
	<div class="widget-content">
		-- All content goes here --
	</div>	
</div>

Container

<div class="widget">
	
</div>

Widget Header w/ Icon

<div class="widget-header">
	<span class="icon-home"></span>
	
	<h3>Widget Title</h3>
</div>

Widget Content

<div class="widget-content">
	-- All content goes here --
</div>

Widget Tabs

Container

Make sure you include the class .widget-tabs on your .widget container. This is necessary for the events to be attached to your tab elements.

<div class="widget widget-tabs">

</div>

Tabs Code

Include the tabs code below in the .widget-header of your container. Make sure this is included after the title element.

<ul class="tabs right">	
	<li class="active"><a href="#tab-1">Tab #1</a></li>	
	<li class=""><a href="#tab-2">Tab #2</a></li>					
	<li class=""><a href="#tab-3">Tab #3</a></li>
</ul>

Tab Content

When setting up your tab content containers make sure that the ID of the container corresponds to the href attribute of the tab element.

<div id="tab-1" class="widget-content"> --Content goes here-- </div>
<div id="tab-2" class="widget-content"> --Content goes here-- </div>
<div id="tab-3" class="widget-content"> --Content goes here-- </div>

Widget Calendar

Container

To create a Widget Calendar add the following class to your widget container: .widget-calendar.

<div class="widget widget-calendar">
	
</div>

Content

In the .widget-content container add your calendar holder div as the only item.

<div class="widget-content">
	<div id="calendar-holder"></div>
</div>

Widget Tables

To create a Widget Table add the following class to your widget container: .widget-table

For more info on how to style tables check out the documentation for tables above.

<div class="widget widget-table">
	
</div>

Interface Elements

Notify Messages

<div class="notify notify-warning">						
	<a href="javascript:;" class="close">x</a>
	
	<h3>Success Notifty</h3>
	
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.</p>
</div>

Add the following classes to the .notify container to change the styling.

Name Class Description
Default .notify Default notify message
Success .notify-success Success notify message (Green)
Warning .notify-warning Success notify message (Yellow)
Info .notify-info Info notify message (Blue)
Error .notify-error Error notify message (Red)

Progress Bars

To change the width bar size simply change the percentage listed on the .bar element.

<div class="progress-bar">
	<div class="bar" style="width: 35%;"> --Bar Text-- </div>
</div>

Semantic Classes

Name Class Description
Primary .primary Primary class
Secondary .secondary Secondary class
Tertiary .tertiary Tertiary class
Quaternary .quaternary Quaternary class

Color Classes

Name Class Description
Blue .blue Blue progress bar
Green .green Green progress bar
Orange .orange Orange progress bar
Black .black Black progress bar
Teal .teal Teal progress bar
Purple .purple Purple progress bar
Pink .pink Pink progress bar
Red .red Red progress bar
Gray .gray Gray progress bar

Tickets

<span class="ticket ticket-success">Success</span>

Add the following classes to the .ticket container to change the styling.

Name Class Description
Default .ticket Default ticket
Success .ticket-success Success ticket (Green)
Warning .ticket-warning Warning ticket (Yellow)
Error .ticket-error Error ticket (Red)
Info .ticket-info Info ticket (Blue)

Pagination

Container

<div class="pagination">
	-- Pagination items go here --
</div>

Pagination Items

<a href="javascript:;" class="prev disabled">Previous</a>
	
<a href="javascript:;">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>

<a href="javascript:;" class="next">Next</a>

Selected Item

Add the class selected to the pagination item you want to have active.

<a href="javascript:;" class="selected">1</a>

Pagination Colors

Add the color class to the .pagination container.

Name Class Description
Blue .blue Blue pagination
Green .green Green pagination
Orange .orange Orange pagination
Black .black Black pagination
Teal .teal Teal pagination
Purple .purple Purple pagination
Pink .pink Pink pagination
Red .red Red pagination
Gray .gray Gray pagination

Bullet List

Container

<ul class="bullet bullet-blue">

</ul>

Example List

<ul class="bullet bullet-blue">
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
</ul>

Bullet Colors

Name Class Description
Green .bullet-green Green bullet list
Red .bullet-red Red bullet list
Orange .bullet-orange Orange bullet list
Yellow .bullet-yellow Yellow bullet list
Blue .bullet-blue Blue bullet list
Pink .bullet-pink Pink bullet list
Black .bullet-black Black bullet list
Purple .bullet-purple Purple bullet list
White .bullet-white White bullet list
Gray .bullet-gray Gray bullet list

Plugins

Modal

Javascript Call

$.modal ({ 
	title: 'Modal'
	, ajax: 'modal.php'
});

Options

Name Value Description
title String Optional title goes here.
html String Load content from an html source.
ajax Resource Path Path to the content you want to load on your server..
width String Optional width for your modal. If not provided the width is generated automatically.
overlay Boolean When set to true a the content of the page will be covered by a transparent div halting interaction until the alert is closed.
overlayClose Boolean When set to true clicking on an active overlay will close the alert.
escClose Boolean When set to true the modal will be closed when the user clicks the ESC key.

Alert

Javascript Call

$.alert ({ 
	type: 'confirm'
	, title: 'Alert'
	, text: 'Lorem ipsum dolor sit amet, consectetur adipisicing.'
	, callback: function () { 
		alert ('Callback');
	}	
});

Options

Name Value Description
type String If set to confirm an alert is shown with accept/cancel buttons.
title String Optional title goes here.
text Html Text/html to display in the alert.
confirmText String Optional text that will replace the default for the confirmation action.
cancelText Boolean Optional text that will replace the default for the cancel action
callback Function Callback function to be executed when an affirmative button is clicked..
overlayClose Boolean When set to true clicking on an active overlay will close the alert.
escClose Boolean When set to true the modal will be closed when the user clicks the ESC key.

Full Calendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar).

View Calendar Documentation


Visualize Charts

The plugin provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.

View Visualize Charts Documentation

Chart Helper

<table class="stats" data-chart-type="bar">

Options

Name Value Description
type String Sets the type of chart to be displayed. Potential values are (pie, bar, line, area)

Data Tables

DataTables is 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.

Helper

To use the helper simply add the classes .data-table to any table you want to have the Data Table functionality on.

<table class="data-table">
	
</table>

Documentation

View Data Tables Documentation


Tipsy

Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag's title attribute.

Helper

Add the class tooltip to any element where you want a tooltip. Also make sure you set the title attribute to the text you want to display.

<button class="tooltip" title="This is the tooltip to display"></button>

Documenation

View Documentation


Google Maps

Basic Setup

Include the following container anywhere in your document.

Note: When inserting a blank div into the document be sure to add a width & height on that div or include the following class .map-canvas on your container.

<div id="basic-canvas" class="map-canvas">
	
</div>

Below is a basic plugin call to initialize a Google Map. For more configuration options check the documentation below or the example page for maps

$('#basic-canvas').googleMaps();

Documentation

View Documenation


Icons

Example

<span class="icon-home"></span>

Icon Classes

.icon-ampersand
.icon-aperture
.icon-aperture-alt
.icon-arrow-down
.icon-arrow-down-alt1
.icon-arrow-down-alt2
.icon-arrow-left
.icon-arrow-left-alt1
.icon-arrow-left-alt2
.icon-arrow-right
.icon-arrow-right-alt1
.icon-arrow-right-alt2
.icon-arrow-up
.icon-arrow-up-alt1
.icon-arrow-up-alt2
.icon-article
.icon-at
.icon-award-fill
.icon-award-stroke
.icon-bars
.icon-bars-alt
.icon-battery-charging
.icon-battery-empty
.icon-battery-full
.icon-battery-half
.icon-beaker
.icon-beaker-alt
.icon-bolt
.icon-book
.icon-book-alt
.icon-box
.icon-brush
.icon-brush-alt
.icon-calendar
.icon-calendar-alt-fill
.icon-calendar-alt-stroke
.icon-camera
.icon-cd
.icon-chart
.icon-chart-alt
.icon-chat
.icon-chat-alt-fill
.icon-chat-alt-stroke
.icon-check
.icon-check-alt
.icon-clock
.icon-cloud
.icon-cloud-download
.icon-cloud-upload
.icon-cog
.icon-cog-alt
.icon-comment-alt1-fill
.icon-comment-alt1-stroke
.icon-comment-alt2-fill
.icon-comment-alt2-stroke
.icon-comment-alt3-fill
.icon-comment-alt3-stroke
.icon-comment-fill
.icon-comment-stroke
.icon-compass
.icon-cursor
.icon-curved-arrow
.icon-denied
.icon-denied-alt
.icon-dial
.icon-document-alt-fill
.icon-document-alt-stroke
.icon-document-fill
.icon-document-stroke
.icon-download
.icon-eject
.icon-equalizer
.icon-eye
.icon-eyedropper
.icon-first
.icon-folder-fill
.icon-folder-stroke
.icon-fork
.icon-fullscreen
.icon-fullscreen-alt
.icon-fullscreen-exit
.icon-fullscreen-exit-alt
.icon-hash
.icon-headphones
.icon-heart-fill
.icon-heart-stroke
.icon-home
.icon-image
.icon-info
.icon-iphone
.icon-key-fill
.icon-key-stroke
.icon-last
.icon-layers
.icon-layers-alt
.icon-left-quote
.icon-left-quote-alt
.icon-lightbulb
.icon-link
.icon-list
.icon-lock-fill
.icon-lock-stroke
.icon-loop
.icon-loop-alt1
.icon-loop-alt2
.icon-loop-alt3
.icon-loop-alt4
.icon-magnifying-glass
.icon-magnifying-glass-alt
.icon-mail
.icon-mail-alt
.icon-map-pin-alt
.icon-map-pin-fill
.icon-map-pin-stroke
.icon-mic
.icon-minus
.icon-minus-alt
.icon-moon-fill
.icon-moon-stroke
.icon-move
.icon-move-alt1
.icon-move-alt2
.icon-move-horizontal
.icon-move-horizontal-alt1
.icon-move-horizontal-alt2
.icon-move-vertical
.icon-move-vertical-alt1
.icon-move-vertical-alt2
.icon-movie
.icon-new-window
.icon-pause
.icon-pen
.icon-pen-alt2
.icon-pen-alt-fill
.icon-pen-alt-stroke
.icon-pilcrow
.icon-pin
.icon-play
.icon-play-alt
.icon-plus
.icon-plus-alt
.icon-question-mark
.icon-rain
.icon-read-more
.icon-reload
.icon-reload-alt1
.icon-right-quote
.icon-right-quote-alt
.icon-rss
.icon-rss-alt
.icon-share
.icon-spin
.icon-spin-alt
.icon-star
.icon-steering-wheel
.icon-stop
.icon-sun
.icon-sun-alt-fill
.icon-sun-alt-stroke
.icon-tag-fill
.icon-tag-stroke
.icon-target
.icon-transfer
.icon-trash-fill
.icon-trash-stroke
.icon-umbrella
.icon-undo
.icon-unlock-fill
.icon-unlock-stroke
.icon-upload
.icon-user
.icon-volume
.icon-volume-mute
.icon-wrench
.icon-x
.icon-x-alt