Some ".ace-nav" colors to change the top bar elements color:

<ul class="nav ace-nav">
  <li class="purple">
	...
  </li>
  <li>
	...
  </li>
</ul>

As well as the following:
.no-border .margin-4 .margin-3 .margin-2

You can find them inside the ace-nav.less file. The colors are defined in variables.less.

A few additional classes have been defined in utility.less that may be useful at times.

For example .inline and .position-relative can be used to add a dropdown inside a "DIV" element without the need to define a new class:

<div class="inline position-relative">
  <a href="#" data-toggle="dropdown" class="dropdown-toggle">Show Menu</a>
  <ul class="dropdown-menu">
  </ul>
</div>

<i class="icon-twitter blue bigger-150"></i>
<i class="icon-user smaller-75"></i>

The following classes specify a percentage of the parent element's width:

<div class="clearfix">
  <a href="#" class="pull-left btn btn-small width-45">Button 1</a>
  <a href="#" class="pull-right btn btn-small width-45">Button 2</a>
</div>

Some spacing classes to add horizontal space:

<div class="space-16"></div>
...
<div class="span6"></div>
 <div class="vspace-16"></div> <!-- space visible on smaller devices -->
<div class="span6"></div>

Similar classes are defined for horizontal lines:

<div class="hr-10"></div>
<div class="hr-16 hr-double dotted"></div>

Some other classes are:

For example the default CSS "overflow" property of "tab-content" in Bootstrap is set to auto.
That doesn't look nice in the homepage's "Recent Tasks" tab when dragging and sorting tasks around.
Using the "overflow-visible" class makes it better, without the need to define new CSS rules for that specific item or using inline styles.

<div class="tab-content overflow-visible">
  <!-- Tab Content Here -->
</div>

More classes that may be handing at times:

<h3 class="header blue lighter smaller">
  Header Text
</h3>

A few additional classes for elements

For bootstrap tabs some extra classes have been defined.
For the .tab-content element:

 
<ul class="nav nav-tabs tab-space-2">
</ul>
 
<ul class="nav nav-tabs tab-color-blue">
</ul>
 
<ul class="nav nav-tabs tab-size-bigger">
</ul>
 

<div class="accordion accordion-style2">
  ...
</div>

Progress bars come with some extra colors and sizes:

<div data-percent="70%" class="progress progress-small progress-purple progress-striped active">
  <div class="bar" style="width:70%;"></div>
</div>

Buttons come with some extra classes:

<a href="#" class="btn btn-small btn-purple">
  Print
  <i class="icon-print icon-on-right bigger-110"></i>
</a>
 
<a href="#" class="btn btn-app btn-small btn-primary">
  <i class="icon-edit bigger-175"></i>
  <span class="bigger-110">Edit</span>
</a>

Similar extra classes are available for badges and labels:

<span href="#" class="label label-large label-primary arrowed-in arrowed-right">
  Label Text
</span>

Dropdown menu extra options:

Tooltip and popover extra options:

<a href="#" title="error message" class="my-tooltip-link tooltip-error">
 Show Tooltip
</a>

//This won't work with '.tooltip-error', etc
$('.my-tooltip-link').tooltip({ container:'body' , placement:'top' });
 
//Don't specify the 'container' so that tooltip gets inserted after our element
$('.my-tooltip-link').tooltip({ placement:'top' });

jQuery UI slider also come with some extra classes:

<span class="ui-slider-green"></span>

Dashboard Elements

Info and Stats

<div class="infobox infobox-green">
	<div class="infobox-icon"><i class="icon-comments"></i></div>
	<div class="infobox-data">
		<span class="infobox-data-number">32</span>
		<span class="infobox-content">comments + 2 reviews</span>
	</div>
	<div class="stat stat-success">8%</div>
</div>

It can have the following color classes: (Please see assets/css/less/infobox.less)

• .infobox-green
• .infobox-green2
• .infobox-purple
• .infobox-purple2
• .infobox-pink
• .infobox-blue
• .infobox-blue2
• .infobox-blue3
• .infobox-brown
• .infobox-wood
• .infobox-lightbrown
• .infobox-orange
• .infobox-orange2
• .infobox-grey
• .infobox-black

You can use .infobox-dark for a darker box and .infobox-small for a smaller box.

.infobox-icon .infobox-chart .infobox-progress containers are for placing icons and charts.

.infobox-data-number .infobox-text are for title and .infobox-content is for extra explanation.

.stat and .badge is for the small stats and arrows.

Conversations, Tasks and Members

Widgets

<div class="widget-box">
 
 <div class="widget-header">
   <h5>Default Widget Box</h5>
   <div class="widget-toolbar">
	  <a data-action="settings" href="#"><i class="icon-cog"></i></a>
	  <a data-action="reload" href="#"><i class="icon-refresh"></i></a>
	  <a data-action="collapse" href="#"><i class="icon-chevron-up"></i></a>
	  <a data-action="close" href="#"><i class="icon-remove"></i></a>
   </div>
 </div><!--/.widget-header -->
 
 <div class="widget-body">
  <div class="widget-main">
  </div>
 </div><!--/.widget-body -->
 
</div><!--/.widget-box -->

.widget-toolbar example:

 
<div class="widget-header header-color-pink">
   <h5>With Tabs</h5>
   <div class="widget-toolbar no-border">
	<ul class="nav nav-tabs">
	  <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
	  <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
	  <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
	</ul>
   </div>
</div><!-- .widget-header -->
 

Gallery

Gallery items can have tags (inside li or a), captions (inside a or stand alone) and a toolbar.

<ul class="ace-thumbnails">
 
<li>
 <a href="image-1.jpg" title="title" data-rel="gallery1">
    <img alt="150" src="thumb-1.jpg" />
 </a>
 <div class="tags">
    <span class="label label-info">breakfast</span>
 </div>
 <div class="tools">
    <a href="#"><i class="icon-link"></i></a>
    <a href="#"><i class="icon-remove"></i></a>
 </div>
</li>
 
 
<li>
 <a href="image-2.jpg" data-rel="gallery1">
   <img alt="150" src="{thumb-2.jpg">
   <div class="text">
	<div class="inner">Sample Caption on Hover</div>
   </div>
 </a>
</li>
.
.
.
 
</ul>

Pricing Tables

Pricing Tables come in two sizes, small and large and are based on widget boxes:

<div class="widget-box pricing-box">
</div>

<div class="span3">
 <div class="widget-box transparent">
    <div class="widget-header">
       <h5 class="bigger lighter">Package Name</h5>
    </div>
    <div class="widget-body">
      <div class="widget-main no-padding">
        <ul class="unstyled list-striped pricing-table-header">
           <li>Disk Space </li>
           .
           .
           .
        </ul>
      </div>
    </div>
 </div>
</div>
 
 
<div class="span2 pricing-span">
 <div class="widget-box pricing-box-small">
 </div>
</div>

Invoice

Invoice page also basically consistes of a .widget-box.
The following classes are used: .invoice-box .invoice-info .invoice-info-label

For more info please check the relevant mustache at:
mustache/app/views/pages/invoice.mustache

Login & Register

It also is based on .widget-box and you can see the following template for more info: mustache/app/views/pages/partials/login

CSS3 Checkbox, Radio and On/Off Switches

Ace comes with Pure CSS3 styled checkbox without any javascript. Switches are also animated on supported browsers such as Firefox and Chrome. It also falls back to default browser style on IE8.

<input type="checkbox" id="checkbox1" class="ace" />
<label class="lbl" for="checkbox1"> check me</label>
 
<label>
  <input type="checkbox" class="ace" />
  <span class="lbl"> check me</span>
</label>
 
 
<input type="radio" name="radio_field[]" value="1" class="ace" />
<label class="lbl" for="checkbox1"> radio option 1</label>
 
<input type="radio" name="radio_field[]" value="2" class="ace" />
<label class="lbl" for="checkbox1"> radio option 2</label>
 
<input type="radio" name="radio_field[]" value="3" class="ace" />
<label class="lbl" for="checkbox1"> radio option 3</label>

<input type="checkbox" id="switch1" class="ace ace-switch" />
<label class="lbl" for="switch1"></label>
 
<label>
  <input type="checkbox" class="ace ace-switch ace-switch-6" />
  <span class="lbl"> check me</span>
</label>

Custom File Inputs

File input come in 2 different formats, small and large with drag & drop ability with some methods and callbacks.

The following options are available

• style which is either false (the default one) or well which is the larger one with preview and multiple file display.
• no_file, with default value No File ...
• no_icon, with default value icon-upload-alt
• btn_choose, with default value Choose
• btn_change, with default value Change (preferably set to null for well style)
• icon_remove, with default value icon-remove. Set to null if you don't want a remove/reset button.
• droppable. Default values false. Disable or enable drag & drop feature on the control.
• thumbnail. Determines how preview thumbnails are displayed. Default value is small with large and fit options.
• before_remove. Called before user clicks on remove/reset button. Return false to cancel remove or reset.
• before_change. Called after user selects or drops files and before onchange event is fired.
  Returning false will cancel it and no files will be added to the control.
  Returning a FileList object or an array containing File objects will change the control's file list accordingly.
  See an example below.
  
  Note It's not possible to change the HTML file input control's value because of browser's security policies.
  We can only reset it.
  But when when change the file list inside before_change function, the new list will be saved to ace_input_files data object as described below.
  See form-elements.html for an example as how to change & limit the selected files to images only.
• preview_error will be called when making thumbnail preview of an image fails.
  It takes two arguements, first is the file name and second is the error code specifying the type of error. (See example below)

The following methods are also supported:

• reset_input which resets the input and clears all previews and data inside it.
• reset_input_field which only resets the file input element.
• disable
• enable
• update_settings. You can use to change the input's settings, such as no_file, no_icon, btn_change, its callbacks, etc...
• show_file_list. It will redraw the list of files selected. Can be used after update_settings.
• enable_reset. Which takes either "false" or "true" and disables or enables "reset/remove" button functionality. Useful for disabling reset/remove during a file upload.
• files. Retrieve a list of selected files.
• method. Returns the method used to select files which is either "drop" or "select".

<input type="file" id="file-input-1" />
<script>
$('#file-input-1').ace_file_input({
   no_file:'No File ...',
   btn_choose:'Choose',
   btn_change:'Change'
}).on('change', function(){
	var files = $(this).data('ace_input_files');
	//or
	//var files = $(this).ace_file_input('files');
 
	var method = $(this).data('ace_input_method');
	//method will be either 'drop' or 'select'
	//or
	//var method = $(this).ace_file_input('method');
};
</script>

  //after creating the ace input, you can use the following methods:
  $('#file-input-1').ace_file_input('disable');
  $('#file-input-1').ace_file_input('enable');
  $('#file-input-1').ace_file_input('reset_input');
  //etc

Note Check examples/file-upload.html for a working example.

<input type="file" multiple />
<script>
$('input[type=file][multiple]').ace_file_input({
   style:'well',
   btn_choose:'Drop images here or click to choose',
   btn_change:null,/* we don't need it */
   no_icon:'icon-cloud-upload',
   droppable:true,
   thumbnail:'large',
   before_change:function(files, dropped) {
     var file = files[0];
     if(typeof file == "string") {
     //file is just a file name here (in browsers that don't support FileReader API such as IE8)
       if(! (/\.(jpe?g|png|gif)$/i).test(file) ) {
        //not an image extension?
        //alert user
        return false;
       }
     }
     else {
       var type = $.trim(file.type);
       if(
          ( type.length > 0 && ! (/^image\/(jpe?g|png|gif)$/i).test(type) )
          || 
          //for android's default browser!
          ( type.length == 0 && ! (/\.(jpe?g|png|gif)$/i).test(file.name) )
         )
         {
            //alert user
            return false;
         }
 
         if( file.size > 1024*100 ) {
            //is the file size larger than 100KB?
            //alert user
            return false;
         }
    }
 
    return true;
   },
 
   before_remove:function() {
     //if(upload_in_progress) return false;//don't allow resetting the file input while upload in progress
     return true;
   },
 
   preview_error : function(filename, error_code) {
     //name of the file that failed
     //error_code values
     //1 = 'FILE_LOAD_FAILED',
     //2 = 'IMAGE_LOAD_FAILED',//the loaded file is not an image
     //3 = 'THUMBNAIL_FAILED'//somehow creating the thumbnail failed.
     //notify user?!
   }
 
});
</script>

When you want to upload the files you can use ace_input_files and ace_input_method data of the file element.

You can retrieve them like this:


var files = $('file input element').data('ace_input_files');
// which is an Array or FileList containing the selected files.
var method = $('file input element').data('ace_input_method');
// which is either "drop" or "select" depending on how the user selected files.
 
//OR
 
var files = $('file input element').ace_file_input('files');
var method = $('file input element').ace_file_input('method');

Hint For an example see the examples/file-upload.html
A working PHP example for handling the uploaded file from the file control in "file-upload.html" is available at examples/file-upload.php

---




Custom Color Picker

<select id="colorpicker" class="hidden">
  <option data-custom="val1" value="#AC725E">#AC725E</option>
  <option data-custom="val2" value="#D06B64">#D06B64</option>
  .
  .
  .
</select>

$('#colorpicker').ace_colorpicker({pull_right:false|true , caret:false|true})
.on('change', function(){
   /**
    $(this).val();
    $(this).data('custom');
    etc ...
   */
});

---




Inline Editable Plugin

There are 4 custom additions to the editable plugin, including Image, Wysiwyg, Spinner and Slider editables.

They are defined inside assets/js/x-editable/ace.editables.js

Please check the profile.html or mustache/app/views/assets/scripts/profile.js for usage examples.

For the image editable plugin you can specify all ace file input options, as well as some extra options that you can see in the example file:

• name: The name of the file input field is put here
• max_size: The maximum size of a file user can choose
• on_error: callback function called when an error occurs
• on_success: callback function called when a file is successfully selected
The before_change callback for this input has already been defined to accept images only, but you can override it:

$('#avatar').editable({
    type: 'image',
    name: 'avatar',
    value: null,
    image: {
        //specify ace file input options here
        before_change: function(files, dropped) {
         //this will override the one already defined which only accepts images.
        },
        //no_icon:'icon-picture',
        //no_icon:'icon-picture',
 
        //some additional parameteres
        name : 'avatar',//put the field name here as well
        max_size: 102400,//in byes
        on_error: function(error_code) {
            if(error_code == 1) {
                //file format error
            }
            else if(error_code == 2) {
                //file size error
            } else {
                //other error
            }			
        },
        on_success: function() {
           //a valid image selected
        }
 
    },
    url: function(params) {
       //user clicked "OK" and we are ready to upload
       //Please see the example file here: examples/profile-avatar-update.js
    }
 
});

---




Wysiwyg editor

Please see examples/wysiwyg.html for an example customizing wysiwyg element.
Mindmup wysiwyg editor is a lightweight plugin taking advantage of HTML5, jQuery and Bootstrap and is quite good in most cases, but it's not as feature rich as other well known plugins such as CKEditor or TinyMCE.
So I will add support for another plugin in upcoming updates.


You can use the following wrapper function to create a wysiwyg plugin:

<div id="editor-1"></div>

$('#editor-1').ace_wysiwyg()

This will create the default editor will all options available.

You can choose to have a limited set of buttons with different icons, tooltips or button classes:

$('#editor-1').ace_wysiwyg(
 {
  toolbar:
   [
    'bold',
    {name:'italic', title:'Custom Title!', className:'btn-info'},//customize
    'strikethrough',
    'underline',
    null,//null value creates some spacing between buttons (grouping)
    'foreColor',
    null,
    'insertImage',
    null,
    {name:'createLink', placeholder:'Add a link', button_text:'Custom Button Text'}
   ]
   ,
   speech_button : false//don't show the speech input button on Chrome
   //,
   //wysiwyg:{}//Specify the options to be passed to the plugin. Refer to plugin docs to see what parameteres it takes.
   //,
   //toolbar_place : function(toolbar) {}//see below
 }
)
.prev().addClass('wysiwyg-style2');//use the second wyswiyg toolbar style here

By default the created toolbar will be inserted right before the editor element, but you can choose a different place.
For example you may want to put it inside the header of a widget box:

toolbar_place: function(toolbar) {
    return $(this).closest('.widget-box').find('.widget-header').prepend(toolbar);
}

Now the toolbar for this instance of wysiwyg editor will be inside the specifed widget header.
When you insert an image inside the editor, Firefox allows resizing of it. But Webkit based browsers don't show such ability.
Using jQuery UI Resizable feature, you can add resize ability.
I've put an example on wysiwyg page which you can see on bottom of wysiwyg.html page or the relevant inline script file mustache/app/views/assets/scripts/wysiwyg.js.
Add .wysiwyg-style1 or .wysiwyg-style2 to .wyswiyg-toolbar element, for other toolbar styles.

.wyswiyg-toolbar is dynamically created and inserted before our editor element:

 $('#editor-1').prev().addClass('wysiwyg-style2');

---




FuelUX Spinner

FuelUX Spinner is used with a little extra wrapping for easier use and customiztion.

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

$('text field element').ace_spinner({
  //FUEL_UX SPINNER options
  // + custom ones
  icon_up:'icon-plus',//default : 'icon-chevron-up'
  icon_down:'icon-minus',// default : 'icon-chevron-down'
  btn_up_class:'btn-success',//default : ''
  btn_down_class:'btn-danger'//default : ''
}).on('change', function(){
	//alert($(this).val());
});

---




FuelUX Wizard

FuelUX Wizard is used with a little extra wrapping for easier use and customiztion.
Please Note You should add a selector to the steps indicator element:
data-target="#step-container"
and add the relevant data to the steps container:
id="step-container"

<div data-target="#step-container" id="fuelux-wizard" class="row-fluid hidden">
  <ul class="wizard-steps">
    <li data-target="#step1" class="active">
      <span class="step">1</span>
      <span class="title">Step # 1</span>
    </li>
    <li data-target="#step2">
      <span class="step">2</span>
      <span class="title">Step # 2</span>
    </li>
    .
    .
    .
  </ul>
</div><!--/.row-fluid-->
 
<div id="step-container" class="step-content row-fluid position-relative">
  <div class="step-pane active" id="step1">
    <form id="form-1">
    </form>
  </div><!--#step1-->
  
  <div class="step-pane active" id="step2">
  </div><!--#step2-->
    .
    .
    .
</div><!--/.step-content-->
 
<div class="row-fluid wizard-actions">
  <button class="btn btn-prev">
    <i class="icon-arrow-left"></i>
	Prev
  </button>
  <button class="btn btn-success btn-next" data-last="Finish ">
    Next
    <i class="icon-arrow-right icon-on-right"></i>
  </button>
</div><!--/.wizard-actions-->

$('#fuelux-wizard').ace_wizard().on('change', function(e, info){
	if(info.step == 1 && !$('#form-1').valid()) return false;
}).on('finished', function(){
	alert('Success!');
}).on('stepclick', function(){
	//return false;//if you don't want users click on backward steps
});

---




FuelUX Treeview

FuelUX tree is used with a little extra wrapping and some extra options for easier use and customiztion.

<div id="tree1" class="tree"></div>

$('#tree1').ace_tree({
   dataSource: treeDataSource ,
   multiSelect:true,
   loadingHTML:'<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
   'open-icon' : 'icon-minus',
   'close-icon' : 'icon-plus',
   'selectable' : true,//or false
   'selected-icon' : 'icon-ok',
   'unselected-icon' : 'icon-remove'
});

Check out examples/treeview.html for an example.

---




Bootstrap Tag Input

Not working in IE8. Can be replaced by a textarea on IE8.
Please check the mustache/app/views/assets/scripts/form-elements.js to see an example.

• jQuery 2.0.3
• jQuery UI 1.10.3 (Custom Build)
• Twitter Bootstrap 2.3.2
• FontAwesome 3.2.1
• LESS 1.4.1
• Mustache
• Twitter Hogan.js
• Mustache.js
• Mustache for PHP
• Google Fonts "Open Sans"
• jQuery Flot Charts 0.8.1
• jQuery Sparklines 2.1.2
• Easy Pie Chart 1.2.5
• jQuery Knob 1.2.0
• Mindmup Wysiwyg Editor
• Toopay Markdown Editor 1.1.4
• jQuery Validate 1.11.1
• FuelUX 2.3.0 (Spinner, Wizard & Treeview)
• Dropzone.js 3.0
• FullCalendar 1.6.3
• jQuery ColorBox 1.4.27
• jQuery dataTables 1.9.4
• jQuery jqGrid 4.5.2
• X-editable 1.4.6
• Select2 3.4.1
• jQuery Chosen 1.0.0
• jQuery Masked Input 1.3.1
• jQuery Input Limiter 1.3.1
• jQuery AutoSize 1.17.2
• Bootstrap Tags 2.2.5
• Nestable Lists
• Bootstrap Colorpicker
• Bootstrap Datepicker
• Bootstrap Timepicker v0.2.3
• Bootstrap DateRange Picker 1.2
• Bootbox.js 3.3.0
• jQuery Gritter 1.2
• jQuery slimScroll 1.2.0
• Spin.js 1.3.0
• jQuery Mobile 1.3.2 (Custom Build)
• jQuery UI Touch Punch 0.2.2
• Google Code Prettify
• ExplorerCanvas