Bracket Admin Template Documentation v1.5 by ThemePixels

Bracket Responsive Bootstrap 3 Admin Template

Created: February 06, 2014 by: ThemePixels.com (themepixels@gmail.com)



Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Getting Started

Bracket is yet another admin template built using Bootstrap and other jQuery plugins that is perfect for your next projects. It provides an easy to use user interface design and a fully responsive layout that is compatible with handheld devices such as phones and tablets.

Bracket is built to work best in the latest desktop and mobile browsers but older browsers might display differently styled, though fully functional, renderings of certain components.

Note: Internet Explorer 8 and below are not supported in this template.

HTML Structure

This theme is a fluid and responsive layout with two columns. The general template structure is the same throughout the template. Below are the general structures.

Main Wrapper
<section>
    <div class="leftpanel"> ... </div>
    <div class="mainpanel"> ... </div>
    <div class="rightpanel"> ... </div>
</section>

Left Panel

Left panel is compose of your logo, user menu (only visible in mobile), navigation menu, information summary and any additional content that you want to display in the left panel. Be sure to follow and not to break the correct structure if you want to add more in left panel.

<div class="leftpanel">
    <div class="logogpanel"> ... </div>
    <div class="leftpanelinner">
        <!-- navigation goes here -->
    </div>
</div>

Navigation

This is the navigation menu in the left panel of the template.

<ul class="nav nav-pills nav-stacked nav-bracket">
  <li><a href="index.html"><i class="fa fa-home"></i> <span>Dashboard</span></a></li>
  <li class="nav-parent"><a href=""><i class="fa fa-edit"></i> <span>Forms</span></a>
    <ul class="children">
      <li><a href="general-forms.html"><i class="fa fa-caret-right"></i> General Forms</a></li>
      ...
    </ul>
  </li>
</ul>

The top parent element menu name should always wrap with span and a parent menu with sub menus should always have a class of nav-parent.

When a parent menu is active it should have a class of active

<li class="active"> ... </li>

When a parent menu with sub menus is in a dropdown active state the class should be nav-parent nav-active

<li class="nav-parent nav-active"> ... </li>

When a parent menu with sub menus is active and also in a dropdown active state the class should be nav-parent nav-active active

<li class="nav-parent nav-active active"> ... </li>

During a dropdown state the sub menus should be visible by adding style="display: block"

<li class="nav-parent nav-active">
   ...
   <ul class="children" style="display: block;">
      ...
   </ul>
</li>
Note: The navigation menu only has two levels at this time. We may add up to three levels for the coming updates of this template.

Main Panel

The main panel is compose of header, the page header and the main content of the page.

<div class="mainpanel">
   <div class="headerbar">
      <!-- header menu goes here -->
   </div>
   <div class="pageheader">
      <!-- title and breadcrumb goes here -->
   </div>
   <div class="contentpanel">
      <!-- content goes here -->
   </div>
</div>

Basic Template

For the basic template, open the file blank.html to create a new empty page and then start adding content by adding it inside the contentpanel. You can refer the above structure to create your own page.


CSS

This template uses many css files and most of it are imported in a single css file (style.default.css).


Bootstrap

We use Bootstrap as the main framework of this template. Bootstrap is open source. It's hosted, developed, and maintained on GitHub. Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes. That's why we use Bootstrap.

In this documentation, we will not discuss more about Bootstrap. When using this template it is also important to read their documentation for better understanding and use of the framework.

Learn More About Bootstrap


Files & Structure

All CSS files are located in the css folder. Some of these files are in minified version so it is not recommended to edit these files but it's also not required so don't worry about it.

Below are some of the css files that are allowed for you to edit.

style.default.css

This is the main css files of this template. Any new css or changes of the template should be added here.

bootstrap.override.css

The css that overrides the css for bootstrap. Any changes that you want to override from bootstrap should be added in here.

style.inverse.css

The premade css file that will change the skin color of the template. More skins will be added for the coming updates of this template. To use the skin simply add this to the <head>

The rest of the css files are not recommended to edit it but if you know what you're doing then feel free to make changes to it. If you have trouble changing something from it do not hesitate to send us a message.


Layouts

You can change the behavior or appearance of this template by making the header always visible to the top or making the left panel fixed to it's position.

Sticky Header

You can enable the sticky header by adding stickyheader class to the body element of the page.

<body class="stickyheader">
Sticky Left Panel

You can enable the sticky header by adding sticky-leftpanel class to the element leftpanel.

<div class="leftpanel sticky-leftpanel"> ... </div>

By making the left sticky, header should also be in sticky mode and that you need to add stickyheader class to the <body> element. Please refer to the above code.

Collapsed Menu (For Large Screen Only)

This will collapse the left panel in every page by default by adding a class leftpanel-collapsed to the <body> element of the page. Note that this is only applicable to large screen only. Small screen devices will automatically hide the left panel.

<body class="leftpanel-collapsed">

Skins

The only available skin on this template for this version is only one (style.inverse.css). Simply add the skin in the <head> of your page.

<link href="css/style.default.css" rel="stylesheet">
<link href="css/style.inverse.css" rel="stylesheet">

Javascript

This template is powered more by javascript. Disabling javascript in your browser will break the template and some of the features will not work so it is highly recommended that you make sure javascript is enabled.

The javascript files can be found in the js/ folder of template. Please be aware that any updates and changes made by yourself on this plugins might break the template. If you have trouble regarding this, please do not hesitate to ask our help.

jQuery

We use jQuery in all of our pages. For any issues related to jQuery, please contact us for any assistance or you may visit jQuery Website.

The below code should be included in every page of the template by adding it in the <head> or below the page right before the </body>.

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>

jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

We use this plugin to create animation effects in the elements. Consider visiting their site for more information about using this plugin.

<script src="js/jquery-ui-1.10.3.min.js"></script>

Not all pages in the template are using this plugin so if you want to use this just add the code above to the head or below the page.


Select2

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

See their documentation

Important Note: Do not override the select2.css when doing some updates only the js files. z

Color Picker

colorpicker.js is a simple jQuery plugin that selects color in the same way you select color in Adobe Photoshop.

The use of this plugin is implemented in the general-forms.html. To know more about this plugin, please click the following links below.

About | Download & Updates | Implement

To use this plugin, please refer to Implement link above.


File Uploads

We use dropzone for the file uploads. Please visit their documentation to know more examples

dropzone js is an open source library that provides drag'n'drop file uploads with image previews.

Note: This does not handle your file uploads on the server. You have to implement the code to receive and store the file yourself.

You can see the actual implementation of this in the template of the file general-forms.html. You can learn more about this js code by going to their website.

Learn more about Dropzone


Calendar

We use Full Calendar as the main calendar for this template.

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

To learn more about this plugin, please visit http://arshaw.com/fullcalendar/. There you can read their documentation on how to implement the calendar. They also have support to answer your problems related to this plugin.

The actual implementation of this plugin to the template can be found in calendar.html or you can view it in demo under the menu Pages -> Calendar.


Maps

We use two kinds of map for this template, one is the gmaps.js powered by Google map and the other one is jVectorMap.

Gmaps

gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.

You can see the example in our template in maps.html. You can also look for more examples from their website by going to this link - http://hpneo.github.io/gmaps/examples.html.

You can also spend some time reading their documentation in this link - http://hpneo.github.io/gmaps/documentation.html


jVectorMap

jVectorMap uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML. No Flash or any other proprietary browser plug-in is required.

You can view our template by clicking the menu Maps to view the actual implementation of this map to our template. For better understanding you can also read more on this link - http://jvectormap.com/tutorials/getting-started/. You can also see some of their examples on this link - http://jvectormap.com/examples/world-gdp/

jVectorMap also allows you to display map by country as what you see in our demo. We only display the map of the USA but you can display your own country by downloading some additional file in this link - http://jvectormap.com/maps/world/europe/


Forms

In this section, we will discuss about form related scripts that we use in our template. Everything discuss here can all be found and implemented under Forms menu in our template demo.

jQuery Tags Input

This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The following code below are needed to add in <head> of your page.

The CSS

<link rel="stylesheet" href="css/jquery.tagsinput.css" />

The Plugin

<script src="js/jquery.tagsinput.min.js"></script>

Usage

<script>
jQuery(function(){
    jQuery('#tags').tagsInput({width:'auto'});
});            
</script>

Markup

<input name="tags" id="tags" class="form-control" value="foo,bar,baz" />

Autogrow Textarea

jquery.autogrow-textarea.js automatically grow and shrink textareas with the content as you type.

The Plugin

<script src="js/jquery.autogrow-textarea.js"></script>

Usage

<script>
jQuery(function(){
    jQuery('#autoResizeTA').autogrow();
});            
</script>

Markup

<textarea id="autoResizeTA" class="form-control" rows="5"></textarea>

Spinner

Enhance a text input for entering numeric values, with up/down buttons and arrow key handling. This feature is part of jQuery UI

The Plugin

<script src="js/jquery-ui-1.10.3.min.js"></script>

Usage

jQuery(function(){
   var spinner = jQuery('#spinner').spinner();
   spinner.spinner('value', 0);
});

Markup

<input type="text" id="spinner" />

Time Picker

Easily select a time for a text input using your mouse or keyboards arrow keys. To lean more about time picker, please go this link - http://jdewit.github.io/bootstrap-timepicker/

The CSS

<link rel="stylesheet" href="css/bootstrap-timepicker.min.css" />

The Plugin

<script src="js/bootstrap-timepicker.min.js"></script>

Usage

jQuery('#timepicker').timepicker({defaultTIme: false});

Markup

<div class="input-group">
   <span class="input-group-addon">
      <i class="glyphicon glyphicon-time"></i>
   </span>
   <div class="bootstrap-timepicker">
      <input id="timepicker" type="text" class="form-control"/>
   </div>
</div>

Input Mask

Input masks allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phones, etc). To learn more about this plugin, please visit - http://digitalbush.com/projects/masked-input-plugin

The Plugin

<script src="js/jquery.maskedinput.min.js"></script>

Usage

jQuery(function(){
   jQuery("#date").mask("99/99/9999");
});

Markup

<div class="input-group">
   <span class="input-group-addon">
      <i class="glyphicon glyphicon-calendar"></i>
   </span>
   <input type="text" placeholder="Date" id="date" class="form-control" />
</div>

Form Validation

This jQuery plugin makes simple clientside form validation trivial, while offering lots of option for customization. To learn more about this plugin, please visit - http://bassistance.de/jquery-plugins/jquery-plugin-validation/

The Plugin

<script src="js/jquery.validate.min.js"></script>

Usage

jQuery("#basicForm").validate({
   highlight: function(element) {
      jQuery(element).closest('.form-group').removeClass('has-success').addClass('has-error');
   },
   success: function(element) {
      jQuery(element).closest('.form-group').removeClass('has-error');
   }
});

Markup

<div class="form-group">
   <label class="col-sm-3 control-label">Email <span class="asterisk">*</span></label>
   <div class="col-sm-9">
      <input type="email" name="email" class="form-control" placeholder="Type your email..." required />
   </div>
</div>

Bootstrap Wizard

This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually. To learn more about this template, please visit - https://github.com/VinceG/twitter-bootstrap-wizard

The Plugin

<script src="js/bootstrap-wizard.min.js"></script>

Usage

jQuery(function(){
   jQuery('#basicWizard').bootstrapWizard();
});

Markup

<div id="validationWizard" class="basic-wizard">
   <ul class="nav nav-pills nav-justified">
      ...
   </ul>
   <div class="tab-content">
      <div class="tab-pane" id="tab1">
         ...
      </div>
   </div>
</div>

Pretty Photo

This template uses prettyPhoyo plugin in Media Manager page. PrettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It's a full blown media lightbox.

If you need support with prettyPhoto, first take a look at their FAQs

If you were not able to find an answer, feel free to take look at their Forum

The CSS

<link href="css/prettyPhoto.css" rel="stylesheet">

The Plugin

<script src="js/jquery.prettyPhoto.js"></script>

Usage

jQuery("a[rel^='prettyPhoto']").prettyPhoto();

Markup

<a href="images/photos/media3.png" rel="prettyPhoto">
    <img src="images/photos/media3.png" class="img-responsive" alt="" />
</a>

Charts

This template uses 3 kinds of charts to be used in your page. You can view the demo of this template in graphs.html


Flot

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. You can visit their site here

You can view more examples to this link - http://www.flotcharts.org/flot/examples/

The Javascript

<script src="js/flot/flot.min.js"></script>
<script src="js/flot/flot.resize.min.js"></script>
<script src="js/flot/flot.symbol.min.js"></script>
<script src="js/flot/flot.crosshair.min.js"></script>
<script src="js/flot/flot.categories.min.js"></script>
<script src="js/flot/flot.pie.min.js"></script>

flot.resize.min.js is used to resize the graph automatically when it detects an event in resizing the window.

flot.symbol.min.js is used when you want to use other points instead of the default (circle) points.

flot.crosshair.min.js is used when you want to have crosshair in pointing your cursor in the graph.

flot.pie.min.js is used when you want to display a pie chart.

flot.categories.min.js is used when you want to use a category (i.e month) instead of using numbers in the graph


Morris

Morris is another javascript set for displaying charts in your project.

View Examples   How to Use


Sparkline

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

To add some sparklines to your web page, please follow the quick guides in this link:
http://omnipotent.net/jquery.sparkline/#s-docs


Tables

We use Bootstrap styles for table in our template.

Basic Table

For basic styling add the base class .table to any <table>

<table class="table"> ... </table>
Striped Rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

<table class="table table-striped"> ... </table>
Responsive Table

Wrap any <table> element in .table-responsive to make them responsive and scroll horizontally when viewed in smaller screens.

<div class="table-responsive">
    <table class="table"> ... </table>
</div>

To view other styles for table visit: http://getbootstrap.com/css/#tables

WYSIWYG

This template uses 2 kinds of text editor, the WYSIHTML5 and CKEditor.

HTML5 WYSIWYG Editor

Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

The CSS

<link rel="stylesheet" href="css/bootstrap-wysihtml5.css" />

The Javascript

<script src="js/bootstrap-wysihtml5.js"></script>

Usage

jQuery('#wysiwyg').wysihtml5({color: true,html:true});

Markup

<textarea id="wysiwyg" rows="10"></textarea>

CKEditor

CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages.


Visit Their Website


The Javasript

<script src="js/ckeditor/ckeditor.js"></script>
<script src="js/ckeditor/adapters/jquery.js"></script>

Usage

jQuery('#ckeditor').ckeditor();

Markup

<textarea id="ckeditor" rows="10"></textarea>

Preloader

As you can see our template uses preloader in every page. Every page must have a markup below.

<!-- Preloader -->
<div id="preloader">
    <div id="status"><i class="fa fa-spinner fa-spin"></i></div>
</div>

You can change the spinner by replacing it with a class using FontAwesome or replace it with image. Below is an example

<!-- Preloader -->
<div id="preloader">
    <div id="status"><img src="images/loaders/loader1.gif" alt="Loading..." /></div>
</div>

To remove this feature, you must remove the markup (shown above) to every page of the template and remove the js code (below) that enables it.

jQuery(window).load(function() {
   // Page Preloader
   jQuery('#status').fadeOut();
   jQuery('#preloader').delay(350).fadeOut(function(){
      jQuery('body').delay(350).css({'overflow':'visible'});
   });
})

Horizontal Menu

Horizontal menu only allows up to 3-4 top menus. Beyond than that would break the menu if viewed in smaller screen devices. You can support more top menus if your menu have smaller text or you will only support larger screens. Hiding icons while in horizontal menu will help you to have more space and add more top

<body class="horizontal-menu">

When using horizontal menu in your page, you must add .horizontal-menu class to the <body> element of your page.

reposition_topnav();

The function below calls when the page is loaded and when the screen resizes. If the screen is below 1024px, the menu will automatically move to left menu and if above 1024px it will go back to top menu. You can look for the code of this function by opening the file js/custom.js


Code Editor

This template uses CodeMirror for the text editor. You can view more examples and documentation at their website here


Photo Viewer

The photo viewer has a fixed height to make the modal centered. The maximum height for the photo to display is 600px. If you want to set this into higher value you can make changes by opening the file css/style.default.css somewhere in line 3506. Please refer to the code below

.modal-photo-viewer .modal-content { height: 600px; margin-top: -300px; }

Please note that if you want some changes in the height, you must also change the margin-top by dividing it into two but with negative value. Please see code above. You also have to adjust the max-height of .modal-photo-viewer .img-responsive somewhere in line 3533 same with the height of modal-content. Refer to code below

.modal-photo-viewer .img-responsive { max-height: 600px; }

Credits

I've used the following images, icons or other files as listed.


Changelog

Version 1.5
  • Added: 5 New Color Skins
  • Added: Select2
  • Added: X Editable
  • Fixed: RTL Sticky Header
  • Added: RTL Subtitle moved to new line
  • Updated: Bootstrap to version 3.2
Version 1.4
  • Added: RTL (Right To Left) Support
  • Added: LESS Support
  • Added: Bug Tracker Pages (3 HTML Pages)
  • Added: Weather Icons (92 icons)
  • Added: Colored Head Tables
  • Updated: Upgraded Bootstrap to version 3.1.1
  • Updated: Font Awesome update to 4.1 with 71 new icons
  • Fixed: Keypad disappears when doing search in mobile
Version 1.3
  • Added: Fixed Width w/ Top Menu
  • Added: Fixed Width w/o Sidebar
  • Added: Inline Editing using CKEditor
  • Added: Replace DIV Element to Text Editor (CKEditor)
  • Added: Code Editor (by CodeMirror)
  • Added: PSD Ui Kit (more will be added soon)
  • Added: Content Slider Box Widget Using Bootstrap Carousel
  • Added: Compose Email
  • Added: More modal examples
  • Fixed: jQuery Chosen not working in signup page
  • Fixed: File name overlap in file manager
Version 1.2 - March 01, 2014
  • Added : Touch support for Sliders
  • Added : Touch support for Calendar Event
  • Added : Horizontal Menu
  • Added : Horizontal Menu with Sidebar
  • Added : Fixed Width (Box) Page
  • Added : To-Do List Widget
  • Fixed : Extra 1px of top header when left bar is collapsed
  • Fixed : Pop-out menus underneath to other elements when left bar is collapsed
  • Fixed : showTooltip undefined error in Dashboard page
  • Fixed : Overlapping layers of blog list page when clicking chat list icon
Version 1.1 - February 20, 2014
  • Fixed: Collapsed Menu Issue - showing sub menu in collapsed mode
  • Fixed: Logo not showing in enabling sticky leftpanel
  • Added: Font Options - change font of your choice
Version 1.0 - February 18, 2014
  • Initial Release


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

ThemePixels