<section>
<h1 class="blue" data-id="#changes"><i class="ace-icon fa fa-magic grey"></i> Changes and Updates</h1>
<hr />
<div class="alert alert-danger">
<button class="close" data-dismiss="alert"><i class="ace-icon fa fa-times"></i></button>
<i class="ace-icon fa fa-exclamation-triangle"></i>
Make sure you have a copy of your application files before making changes.
</div>
<div class="hr hr-double hr32"></div>
<h2 class="blue lighter help-title" data-id="#changes.v7">
Ace v1.3.1 to v1.3.2 (current version)
</h2>
<div class="space-4"></div>
<div class="help-content">
<h3 class="info-title smaller">1. New Features / Improvements / Fixes / Updates</h3>
<div class="info-section">
<ul class="list-unstyled info-list">
<li>
<a href="#custom/content-slider">Content sliders</a> based on Bootstrap modals
</li>
<li>
Navbar dropdowns automatically become modal like on small devices
</li>
<li>
Updated sidebar functions allow for <a href="#basics/sidebar.multiple">multiple sidebars</a>.
<br />
Make sure to see <a href="#basics/sidebar.functions">sidebar functions</a> and apply the necessary changes
</li>
<li>
Automatic scrollbars for sidebar submenus when needed
</li>
<li>
Delay before hiding submenus in minimized mode or horizontal mode
</li>
<li>
Automatic scrollbars for fullscreen widgets
</li>
<li>
Horizontal menu now has minimized style as well
</li>
<li>
Image preview for file input element
</li>
<li>
New custom scroller option 'hideOnIdle'
</li>
<li>
Ajax content loading can now be applied to any element
</li>
<li>New <code>data-auto-hide="true"</code> option for sidebar allows automatic hiding of sidebar in mobile view when users clicks/taps outside of sidebar area</li>
<li>
New <a href="#plugins/misc.rating">star rating</a> plugin
</li>
<li>
New <a href="#plugins/input.duallist">dual listbox</a> plugin
</li>
<li>
New <a href="#plugins/input.multiselect">bootstrap multiselect</a> plugin
</li>
<li>
jQuery mousewheel plugin included but not enabled by default.
<br />
You can use <code>assets/js/jquery.mobile.custom.js</code> to enable it.
</li>
<li>
Updated all scripts and plugins to their latest version
</li>
<li>
Several fixes and improvements
</li>
</ul>
</div>
<h3 class="info-title smaller">2. Ace Changes</h3>
<div class="info-section">
<ul class="list-unstyled info-list">
<li>
Gruntfile.js build file added.
<br />
Note that you should run <code>npm install</code> and install required node.js packages first if you want to use it.
</li>
<li>
Also node.js modules inside <code>mustache/js</code> and <code>build</code> folders are removed
and you should run <code>npm install</code> command to install them or <code>npm update</code> to update.
</li>
<li>
CSS and JS files inside <code>assets</code> folder are not compressed (non-minified) now
and minified files are inside <code>dist</code> folder
</li>
<li>
Ace functions used to be like <em>ace.handle_side_menu()</em>, etc ...
<br />
Now they are wrapped in jQuery functions and need to be initialized by calling the functions.
<br />
For more info make sure to see <a href="#basics/sidebar.functions">sidebar functions</a> section.
</li>
<li>
Sidebar toggle buttons such as collapse/expand button or mobile view menu toggler should have
<code>data-target="#sidebar_id"</code> attribute
</li>
<li>
<code>.main-content-inner</code> is now necessary and should be inserted immediately
inside <code>.main-content</code> as the first and only direct child:
<pre data-language="html">
<div class="main-content"><div class="main-content-inner">
... other elements and content here ...
</div></div>
</pre>
</li>
<li>
Ajax content loading can now be applied to any element and has several changes and new functions.
<br />
By default <code>.page-content-area</code> element will have ajax enabled if it has
<code>data-ajax-content="true"</code> attribute.
<br />
Also ajax events are triggered for the specific element, which also can still be captured on document level.
<br />
Please see <a href="#basics/ajax">ajax section</a> for more info.
</li>
<li>
You should now add <code>.ace-main-stylesheet</code> class to your main stylesheet which
is "ace.css" in demo pages.
<pre data-language="html">
<link href="path/to/ace.min.css" rel="stylesheet" class="ace-main-stylesheet" />
<!--[if lte IE 9]>
<link href="path/to/ace-part2.min.css" rel="stylesheet" class="ace-main-stylesheet" />
<![endif]-->
</pre>
</li>
<li>
If you've been using functions such as:
<br />
<code>ace.settings.sidebar_fixed</code>
<code>ace.settings.sidebar_collapsed</code>
<code>ace.settings.navbar_fixed</code>
<br />
now there is an extra first argument which is either null
or reference to element to be changed:
<pre data-language="javascript">
ace.settings.sidebar_fixed(null, true|false, true|false);//first element is null or reference to sidebar element
//or
ace.settings.sidebar_fixed(document.getElementById('sidebar'), true|false, true|false);
</pre>
</li>
</ul>
</div>
<h3 class="info-title smaller">3. Third Party Changes</h3>
<div class="info-section">
<ul class="list-unstyled info-list">
<li>
There are some changes for FuelUX plugin which has been updated from v2.x to v3.x.
<br />
Please see
<a href="#plugins/fuelux">FuelUX</a> for more info.
</li>
<li>
<a href="#plugins/date-time.fullcalendar">Fullcalendar</a> plugin doesn't need jQuery UI for dragging and resizing now
and moment.js is used for date processing and should be included.
<br />
It's available at:
<code>assets/js/date-time/moment.js</code>
<br />
Also it seems in its latest update, only events with
"yyyy-mm-dd" format can be resized (not sure though)
</li>
<li>
jQuery UI has had several changes. For example anchors (<code>A</code> tags) are not used in menu items any more.
<br />
If you see your jQuery UI code is not working as expected, you should refer its documentation
to resolve the issue as a result of recent changes.
</li>
<li>
If you are using internationalization features of date/time plugins date depend on
<b>moment.js</b> library, note that <code>lang</code> is deprecated now and
you should use <code>locale</code> instead.
<br />
Please see momentjs docs for more info.
</li>
<li>
<code>respond.src.js</code> has been renamed to <code>respond.js</code>
</li>
<li>
<code>jquery.colorbox-min.js</code> has been renamed to <code>jquery.colorbox.min.js</code>
</li>
<li>
jQuery form validation plugin doesn't validate hidden elements by default.
<br />
You should use <code>ignore</code> option to perform validation for a hidden element.
<br />
See <a href="#plugins/misc.jquery-validate">validation plugin</a> for more info.
</li>
<!--
<li>
Spin.js plugin (the imageless spinner) has now more options and you may
need to specify <code>left</code> <code>top</code> options if you want to use it.
</li>
-->
<li>
<a href="#plugins/input.select2">Select2</a> has now an optional tag input styling as well.
</li>
<li>
<a href="#plugins/input.chosen">Chosen</a> does not support touch devices.
</li>
</ul>
</div>
</div><!-- /.help-content -->
<div class="hr hr-double hr32"></div>
<h2 class="blue lighter help-title" data-id="#changes.v6">
Ace v1.3.0 to v1.3.1
</h2>
<div class="space-4"></div>
<div class="help-content">
<h3 class="info-title smaller">1. New Features / Improvements / Fixes / Updates</h3>
<div class="info-section">
<ul class="list-unstyled info-list">
<li>
Added <a href="#basics/ajax">Ajax version</a>
</li>
<li>
Added <a href="#pages/email">Email templates</a>
and an <a href="../build/email.html">email tool</a> which converts normal Bootstrap syntax to email friendly table layout
</li>
<li>
<a href="#custom/onpage-help">Onpage Help</a> feature is now available for use in your application to provide help and instructions to users.
</li>
<li>
Option to remove sidebar (previously sidebar was almost mandatory)
</li>
<li>
Improved and fixed <a href="../build/css.html">CSS builder</a>
</li>
<li>
<code>.hover</code> submenus and <code>.compact</code> sidebar is now available only on larger devices.
</li>
<li>
Added <a href="#plugins/bootstrap">typeahead.js</a> plugin
</li>
<li>
Updated all scripts to their latest version
</li>
<li>
Fixed several bugs and issues
</li>
</ul>
</div>
<h3 class="info-title smaller">2. Ace Changes</h3>
<div class="info-section">
<ul class="list-unstyled info-list">
<li>
<i class="ace-icon fa fa-check"></i>
In this version, <a href="#plugins/bootstrap.typeahead-js">typeahead.js</a>
plugin has been included.
<br />
The older Bootstrap (v2.x) typeahead plugin is still included with the template
as it's a lightweight alternative used by demo search box and tag input plugin.
<br />
However the latter (old plugin) has been renamed to <code>bs_typeahead</code>
<br />
For more info please see <a href="#plugins/bootstrap.typeahead">its section</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
In case you modified some of Ace's functions arguments,
please note that options used to be passed as separate paramaterers but now are passed
as a JSON object:
<pre data-language="javascript">
ace.sidebar_scroll(jQuery, {
{
'scroll_to_active': true,
'include_shortcuts': true,
'include_toggle': false,
'smooth_scroll': 200,
'outside': false
}
});
</pre>
</li>
</ul>
</div>
<h3 class="info-title smaller">3. Third Party Changes</h3>
<div class="info-section">
<ul class="list-unstyled info-list">
<li>
<i class="ace-icon fa fa-check"></i>
dataTables plugin has been updated to latest version 1.10.0 and there
may be a few changes you need to make because of some API changes.
<br />
If your current tables are somehow messed up after script update, you may need
to consult plugin's documentation for more info.
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Markdown editor now accepts more options and to use FontAwesome fonts
you need to specify <code>data-iconlibrary="fa"</code> attribute.
</li>
</ul>
</div>
</div><!-- /.help-content -->
<div class="hr hr-double hr32"></div>
<h2 class="blue lighter help-title" data-id="#changes.v5">
Ace v1.2.0 to v1.3.0
</h2>
<div class="space-4"></div>
<div class="help-content">
<h3 class="info-title smaller">1. New Features / Improvements / Fixes</h3>
<div class="info-section">
<ul class="list-unstyled info-list">
<li>
<i class="ace-icon fa fa-check"></i>
<a href="#custom/scrollbar" class="help-more">Custom scrollbar plugin</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Automatic scrollbars for fixed sidebar
</li>
<li>
<i class="ace-icon fa fa-check"></i>
<a href="#basics/sidebar.horizontal" class="help-more">Horizontal Menu</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
3 Different mobile menu styles.
<a href="#basics/sidebar.mobile" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
New mobile navbar user buttons style.
<a href="#basics/navbar.mobile" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
New submenu style displayed on mouse hover.
<a href="#basics/sidebar.hover" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
<a href="#basics/sidebar.compact" class="help-more">Compact sidebar style</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Alternative active menu item style.
<a href="#basics/sidebar.highlight" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
<a href="#files/css.skins" class="help-more">LESS skin files</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
In-browser CSS & JS file builder to make your own minimal files
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Enhanced widget box functions and events.
<a href="#custom/widget-box" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
On-page help which lets you pick any element and see how it works
</li>
<li>
<i class="ace-icon fa fa-check"></i>
<code>nativeUI</code> option for custom editable addons.
<a href="#custom/inline-editable" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Date addon for inline editable plugin.
<a href="#custom/inline-editable.date" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Added Bootstrap datetime picker plugin.
<a href="#plugins/date-time.datetimepicker" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Tabbed user dropdowns inside navbar.
<a href="#basics/navbar.tabbed" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
New classes for navbar user dropdowns:
<code>.dropdown-content</code> &
<code>.dropdown-footer</code>
which allows addings scrollbars to <code>.dropdown-content</code>.
<br />
<a href="#basics/navbar.dropdown-content" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
New white button styles.
<a href="#elements.button.white" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
ASP.net friendly checkboxes and radio buttons.
<br />
You need to build your own custom CSS via the builder and choose
<a href="#custom/checkbox.notes" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Add data attribute <code>data-position='auto'</code> to dropdown elements
so they become a <b>dropup</b> when appropriate.
<a href="#elements.dropdown.options" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
New <code>.ace-icon</code>(changeable) & <code>.menu-icon</code>
classes which help with switching between different font icon libraries.
<a href="#changes.fontawesome" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
File input <b>whitelist</b> & <b>blacklist</b> options and other fixes & enchancements.
<a href="#custom/file-input" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Custom color picker enhancements.
<a href="#custom/colorpicker" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Light and blurred background for login page.
<br />
<a href="#pages/login" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Some browser fixes. Now compatible with almost all desktop and mobile browsers.
</li>
</ul>
</div>
<h3 class="info-title smaller">2. Changes to Ace</h3>
<div class="info-section">
<ul class="list-unstyled info-list">
<li>
<i class="ace-icon fa fa-check"></i>
You should now add <code>.ace-icon</code> class name to (almost) all icons
but you can rename or remove it.
<br />
For more info and the reason for this,
see <a href="#changes.fontawesome" class="help-more">Updating Fontawesome</a> section.
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Sidebar icons now have a <code>.menu-icon</code> class name.
<a class="help-more" href="#basics/sidebar.layout.item">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Default mobile view sidebar should have <code>.responsive</code> class name now.
<br />
<a href="#basics/sidebar.mobile" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Default mobile menu toggle button has been moved to <code>.navbar</code>
but you can still use old style toggle button:
<div class="space-4"></div>
<div>
<span class="thumbnail inline">
<img src="images/old-toggle.png" />
</span>
<span class="middle inline">
<i class="fa fa-long-arrow-left blue"></i>
<i class="fa fa-long-arrow-right blue"></i>
</span>
<span class="thumbnail inline no-margin-bottom">
<img src="images/new-toggle.png" />
</span>
</div>
<br />
If you want to use old style toggle button, note that the <code>.menu-text</code> element inside it has been renamed to <code>.toggler-text</code>
<br />
For more info plese see <a href="#basics/sidebar.mobile.toggle" class="help-more">Toggle Buttons</a> section or use the on-page help of demo files.
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Navbar has a few markup changes. Please see <a href="#basics/navbar" class="help-more">Navbar section</a>.
</li>
<li>
<i class="ace-icon fa fa-check"></i>
For default skin, you should add <code>.no-skin</code> class name to body element now.
<br />
For more info see <a href="#settings.skins" class="help-more">Skins</a> section.
</li>
<li>
<i class="ace-icon fa fa-check"></i>
<code>label</code> and <code>.lbl</code> elements had <code>vertical-align:middle</code>
CSS rule which is removed now.
<br />
You should add <code>.middle</code> class to those elements that are out of place now.
</li>
<li>
<i class="ace-icon fa fa-check"></i>
<code>.sidebar-collapse</code> element is now <code>.sidebar-toggle .sidebar-collapse</code>.
<br />
This is because, there is now <code>.sidebar-toggle .sidebar-expand</code> for 2nd mobile menu style.
<br />
<a href="#basics/sidebar.layout.minimize" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
If you are using settings box it should now be put right after
<code>.page-content</code> element's opening tag.
<br />
It also has a slightly different HTML markup.
<a href="#settings.box" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
No need for <code>.main-container-inner</code> element any more.
<br />
<a href="#basics/layout" class="help-more">More info</a>
</li>
<li>
Treeview element had two special icons <code>.icon-plus</code> and <code>.icon-minus</code>
which have been renamed to <code>.tree-plus</code> and <code>.tree-minus</code>
<br />
<a href="#plugins/fuleux.treeview" class="help-more">More info</a>
</li>
<li>
Widget box title should now have <code>.widget-title</code> class and also widget color options
are now applied to the box, not header.
<br />
For example <code>.widget-header.header-color-blue</code> becomes
<code>.widget-box.widget-color-blue</code>
<br />
<a href="#custom/widget-box" class="help-more">More info</a>
</li>
<li>
Login page links such as "forgot password", etc should now have a
<code>data-target</code> attribute.
<br />
<a href="#pages/login" class="help-more">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
<b>ace-ie.css</b> or <b>ace-ie.min.css</b>
was included only for <i>IE 8</i> and below. Now it should be included for <i>IE 9</i> as well, thus:
<div class="space-4"></div>
<pre class="light-green">
<!--[if lte IE <span class="light-red bolder">9</span>>
<link rel="stylesheet" href="<span class="purple bolder">path/to/assets/<span class="light-blue">ace-ie.min.css</span></span>" />
<![endif]-->
</pre>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
When building CSS files using the in-browser builder tool, you may be notified that output CSS file is large for IE9 and below.
<br />
In that case, make sure to include the extra CSS file <code>ace-part2.css</code> using the provided instructions.
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Version number has been removed from jQuery file name for easier updates.
Therefore:
<br />
<code>jquery.2.1.9.min.js</code> becomes <code>jquery.min.js</code>
<br />
<code>jquery-1.x.min.js</code> becomes <code>jquery1x.min.js</code> (which is used for IE9 and below)
<br />
Same applies to jQuery UI:
<br />
<code>jquery-ui.min.js</code>
<br />
<code>jquery-ui.custom.min.js</code>
<br />
<code>jquery-ui.min.css</code>
<br />
<code>jquery-ui.custom.min.css</code>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
If you have used custom mobile view spacing element that add some space only in specific device widths,
the naming has changed a bit.
<br />
For example <code>.vspace-xs-16</code> has been changed to <code>.vspace-16-xs</code>.
<br />
This helps reduce number of CSS selectors.
</li>
<li>
<i class="ace-icon fa fa-check"></i>
If you've used Mustache templates, some files and data have been renamed:
<ol>
<li><code>sidenav_navList</code> <i class="fa fa-double-angle-right"></i> <code>sidebar_items</code></li>
<li><code>topbar*</code> <i class="fa fa-double-angle-right"></i> <code>navbar*</code></li>
<li><code>sidenav*</code> <i class="fa fa-double-angle-right"></i> <code>sidebar*</code></li>
</ol>
</li>
</ul>
</div><!-- /.info-section -->
<h3 class="info-title smaller">3. Changes to Bootstrap</h3>
<div class="info-section">
<ul class="list-unstyled info-list">
<li>
<i class="ace-icon fa fa-warning red"></i>
The included Bootstrap CSS file has been modified and is slightly different from original Bootstrap files.
<br />
You can still use original Bootstrap files but you should re-compile Ace LESS files with new variables.
<br />
See <a class="help-more" href="#files/css">CSS/LESS files</a> for more info on this.
</li>
<li>
<i class="ace-icon fa fa-check"></i>
There is not much to about Bootstrap when updating from <b>v3.0</b> to <b>v3.1</b>
<br />
You can read more about it here:<br />
<span class="text-info">http://blog.getbootstrap.com/2014/01/30/bootstrap-3-1-0-released/</span>
or
<span class="text-info">https://github.com/twbs/bootstrap/issues/11734</span>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
With dropdown menus, use <code>.dropdown-menu-right</code> instead of <code>.pull-right</code>.
This includes <u class="dotted">navbar's user info dropdowns</u>.
</li>
</ul>
</div>
<h3 class="info-title smaller">4. Third Party Changes</h3>
<div class="info-section">
<ul class="list-unstyled info-list">
<li>
<i class="ace-icon fa fa-check"></i>
If you are using Colorbox(slideshow) plugin, the latest version requires
<code>rel</code> parameter to work properly, for example <code>rel: 'colorbox'</code>.
<a class="help-more" href="#plugins/misc.colorbox">More info</a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Latest inline editable plugin doesn't come with datepicker option.
<br />
I added a custom addon for it.
<a class="help-more" href="#custom/inline-editable.date"><b>More info</b></a>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Easy pie chart plugin's file has been renamed to <code>easypiechart.js</code>.
It was <code>easy-pie-chart.js</code>.
<br />
Also Android's default browser has a problem with latest version of easy pie chart, not rendering properly.
<br />
<span class="text-info">https://github.com/rendro/easy-pie-chart/issues/81</span>
<br />
You can use an older version of the plugin <code>jquery.easy-pie-chart-older.js</code>
and the problem does not exist.
</li>
<li>
I have also changed/customized a few things with some plugins including:
<ol>
<li><code>nextIcon</code> and <code>prevIcon</code> options for daterangepicker plugin</li>
<li>Added <code>function.bind</code> for IE in html5shiv (used by easypiechart)</li>
<li>Added bootboxes to markdown editor</li>
<li>And modified/customized a few things with FuelUX plugins</li>
</ol>
</li>
</ul>
</div>
</div><!-- /.help-content -->
<div class="hr hr-double hr32"></div>
<h2 class="blue lighter" data-id="#changes.v4">
Ace v1.1.3 to v1.2.0
</h2>
<div class="space-4"></div>
<div class="help-content">
<h3 class="info-title smaller">1. Updating to Bootstrap 3</h3>
<div class="info-section">
<ul class="list-unstyled info-list">
<li>
<i class="ace-icon fa fa-check"></i>
The major change is upgrading your application to Bootstrap 3.
<br />
So you may want to take a look at the following guide for migrating to BS3:
<br />
<a href="http://bootply.com/bootstrap-3-migration-guide">http://bootply.com/bootstrap-3-migration-guide</a>
<br />
or Bootstrap's documentation:
<br />
<a href="http://getbootstrap.com/getting-started">http://getbootstrap.com/getting-started</a>
</li>
<li>
Here are a few quick tips:
<div class="space-4"></div>
<ul class="list-unstyled info-list">
<li>
<i class="ace-icon fa fa-check"></i>
Use <code>.row</code> instead of <code>.row-fluid</code>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Use
<code>.col-xs-*</code>
<code>.col-sm-*</code>
<code>.col-md-*</code>
<code>.col-lg-*</code>
instead of
<code>.span*</code>
<div class="space-2"></div>
<div class="alert alert-danger">
<i class="ace-icon fa fa-warning"></i>
With Bootstrap 2.x it was alright to randomly have <code>.row-fluid</code> elements
without <code>.span*</code> children.
<br />
But with Bootstrap 3, you should remove those unused <code>.row</code> (<small>previously</small> <code>.row-fluid</code>)
elements that don't need/contain <code>.col-*-*</code> (<small>previously</small> <code>.span*</code>)
inside them and use <code>.clearfix</code> class if it has floating children or use no class at all.
</div>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Use <code>.btn-xs</code> <code>.btn-sm</code> <code>.btn-lg</code> instead of
<code>.btn-mini</code> <code>.btn-small</code> <code>.btn-large</code>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Use <code>.well-sm</code> <code>.well-lg</code> instead of
<code>.well-small</code> <code>.well-large</code>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Use <code>.input-group</code> instead of
<code>.input-append</code> and <code>.input-prepend</code>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Update Bootstrap's modal dialog HTML code:
<br />
Now it needs <code>.modal-dialog</code> <code>.modal-content</code> classes
and the <code>.modal</code> doesn't need <code>.hide</code> class.
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Bootstrap event names have been namespaced, so for example instead of
<code>$('#myModal').on('shown' , ...)</code> we now have <code>$('#myModal').on('shown.bs.modal' , ...)</code>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
No need for <b>bootstrap-responsive.css</b> or <b>ace-responsive.css</b> now.
<br />
They have been integrated with main CSS files.
</li>
<li>
<i class="ace-icon fa fa-check"></i>
No need for
<code><span class="divider"><i class="arrow-icon"></i></span></code>
as breadcrumbs divider.
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Images were responsive by default, i.e. they were limited to their container's size.
Now you should use <code>.img-responsive</code> class.
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Use <code>.dropdown-header</code> instead of <code>.nav-header</code>.
This applies to user dropdown menus inside navbar.
</li>
<li>
<i class="ace-icon fa fa-hand-o-right blue"></i>
Default typeahead plugin in Bootstrap 2 has been remove in BS3. <br />
I've included that in Ace's Javascript file.<br />
It is used in search box and also <b>Tag Input</b> plugin.
<br />
If you don't need it, you can build a custom Javascript without it.
</li>
<li>
<div class="alert alert-danger">
<i class="ace-icon fa fa-warning"></i>
Bootstrap 3 is now setting the CSS rule <code>box-sizing:border-box</code> on all HTML elements.
<br />
It means that if you had custom elements with specific dimensions, paddings and borders that relied on default browser value of
<code>box-sizing:contet-box</code>
you may now want to recalculate those values.
<br />
Also many third party plugins rely on the default browser value <b>content-box</b>.
<br />
Some of them are reset in <code>assets/css/less/bs3-reset.less</code>
<br />
See this for more info:
<span class="text-primary">http://getbootstrap.com/getting-started/#third-box-sizing</span>
</div>
</li>
</ul>
</li>
</ul>
</div><!-- /.info-section -->
<h3 class="info-title smaller">2. Changes to Ace</h3>
<div class="info-section">
<ul class="list-unstyled info-list">
<li>
<i class="ace-icon fa fa-check"></i>
Navbar structure and classes are now slightly different. Please see:
<code data-open-file="html" class="open-file">mustache/app/views/layouts/partials/_shared/navbar.mustache</code>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Document structure and classes are now slightly different.
Please see <code data-open-file="html" class="open-file">mustache/app/views/layouts/default.mustache</code>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Use <code>data-icon-show</code> <code>data-icon-hide</code> attributes inside <code>.accordion-toggle</code> elements
to specify icons used when toggling panels.
<br />
<a class="help-more" href="#elements.accordion.icon"><b>More info</b></a>
</li>
<li>
<i class="ace-icon fa fa-hand-o-right blue"></i>
Some changes should be made to form elements inside <code>.form-horizontal</code>.
<br />
An example could be like this:
<pre data-language="html">
<div class="form-group">
<label for="id-username" class="col-sm-3 control-label no-padding-right">
Text Field
</label>
<div class="col-sm-9">
<input type="text" class="col-xs-10 col-sm-5" placeholder="Username" id="id-username">
</div>
</div>
</pre>
</li>
<li>
<i class="ace-icon fa fa-hand-o-right blue"></i>
The wizard steps container doesn't need <code>.hide</code> class
</li>
<li>
<i class="ace-icon fa fa-hand-o-right blue"></i>
Gallery tags should be wrapped inside <code>.label-holder</code>
</li>
<li>
<i class="ace-icon fa fa-hand-o-right blue"></i>
Use <code>.dropdown-only-icon</code>
instead of
<code>.dropdown-icon-only</code>
</li>
<li>
<i class="ace-icon fa fa-hand-o-right blue"></i>
Use <code>.vspace-*-xs</code>
<code>.vspace-*-sm</code>
<code>.vspace-*-md</code>
<code>.vspace-*-lg</code>
instead of <code>.vspace-*</code>
for spacing that is visible only on specific sizes.
</li>
<li>
<i class="ace-icon fa fa-hand-o-right blue"></i>
RTL styles has now been separated into <b>ace-rtl.css</b> file.
<br />
You can add or remove it as needed.
</li>
</ul>
</div><!-- /.info-section -->
</div><!-- /.help-content -->
<div class="hr hr-double hr32"></div>
<h2 class="blue lighter" data-id="#changes.v3">
Ace v1.1.2 to v1.1.3
</h2>
<div class="space-4"></div>
<div class="help-content">
<h3 class="info-title smaller">Changes to Ace</h3>
<div class="info-section">
<ul class="list-unstyled info-list">
<li>
<i class="ace-icon fa fa-check"></i>
You should now add <code>.ace</code> class name to checkbox and radio buttons to style them.
<br />
Previously, browser checkboxes and radio buttons were hidden by default
and you needed to insert an <code>.lbl</code> element after them to be displayed correctly.
<br />
This caused some issues with environments or libraries that created checkboxes
automatically or differently
and wasn't easy to put <code>.lbl</code> after them.
<br />
So now, default checkboxes are shown without change
and you can style them by adding <code>.ace</code> class
to checkboxes and inserting an <code>.lbl</code> element after them.
</li>
<li>
<i class="ace-icon fa fa-check"></i>
To have sidebar fixed by default you now should add
<code>.sidebar-fixed</code> class to <code>.sidebar</code> element
and to fix breadcrumbs you should add <code>.breadcrumbs-fixed</code>
class to <code>.breadcrumbs</code> element.
</li>
<li>
<i class="ace-icon fa fa-check"></i>
You should now use <code>assets/js/ace-extra.js</code> inside <code>head</code> element
to dynamically enable/save/retrieve some user settings using Javascript, such as
fixing navbar/sidebar/breadcrumbs and sidebar collapse/expand.
</li>
<li>
<i class="ace-icon fa fa-check"></i>
The <code>#sidebar-collapse</code> element's icon has two attributes <code>data-icon1</code> and
<code>data-icon2</code> which determine the button's icon in expanded/collapsed state.
</li>
<li>
<i class="ace-icon fa fa-check"></i>
<code>#ace-settings-header</code> has been changed to <code>#ace-settings-navbar</code>
(i.e. the checkbox element inside settings box that fixes/unfixes navbar)
</li>
</ul>
</div><!-- /.info-section -->
<h3 class="info-title smaller">Third Party Changes</h3>
<div class="info-section">
<ul class="list-unstyled info-list">
<li>
<i class="ace-icon fa fa-check"></i>
Chosen plugin now uses <b>chosen-</b> prefix rather than <b>chzn-</b> for its classes.
<br />
If you have defined custom CSS rules or used <b>chzn-*</b> selectors inside your scripts, you may need to modify them accordingly.
</li>
</ul>
</div><!-- /.info-section -->
</div><!-- /.help-content -->
<div class="hr hr-double hr32"></div>
<h2 class="blue lighter" data-id="#changes.v2">
Ace v1.1.2
</h2>
<div class="space-4"></div>
<div class="help-content">
<h3 class="info-title smaller">Changes to Ace</h3>
<div class="info-section">
<ul class="list-unstyled info-list">
<li>
<i class="ace-icon fa fa-check"></i>
CSS "ID"s have been replaced with classes.
<p>
So for example in CSS files where we had:
<br />
<code>
#main-content {
...
}
</code>
</p>
<p>
It has been changed to:
<br />
<code>
.main-content {
...
}
</code>
<p>
The element in HTML code still keeps the ID attribute, so previous Javascript code should work as expected.
</p>
<pre data-language="html">
<div class="main-container" id="main-container">
...
</div>
...
<a class="menu-toggler" id="menu-toggler">
<span class="toggler-text"></span>
</a>
</pre>
Basically you just need to add a class with the same ID value to HTML elements.
The specific changes are:
<ul>
<li><code>#user_info</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.user-info</code> (Topright user menu)</li>
<li><code>#user_menu</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.user-menu</code></li>
<li class="hr hr-8 dotted"></li>
<li><code>#menu-toggler</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.menu-toggler</code></li>
<li><code>#sidebar</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.sidebar</code></li>
<li><code>#sidebar-shortcuts</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.sidebar-shortcuts</code></li>
<li><code>#sidebar-shortcuts-large</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.sidebar-shortcuts-large</code></li>
<li><code>#sidebar-shortcuts-mini</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.sidebar-shortcuts-mini</code></li>
<li><code>#sidebar-collapse</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.sidebar-collapse</code></li>
<li class="hr hr-8 dotted"></li>
<li><code>#main-container</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.main-container</code></li>
<li><code>#main-content</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.main-content</code></li>
<li><code>#page-content</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.page-content</code></li>
<li class="hr hr-8 dotted"></li>
<li><code>#breadcrumbs</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.breadcrumbs</code></li>
<li><code>#nav-search</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.nav-search</code></li>
<li><code>#nav-search-input</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.nav-search-input</code></li>
<li><code>#nav-search-icon</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.nav-search-icon</code></li>
<li class="hr hr-8 dotted"></li>
<li><code>#ace-settings-container</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.ace-settings-container</code></li>
<li><code>#ace-settings-btn</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.ace-settings-btn</code></li>
<li><code>#ace-settings-box</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.ace-settings-box</code></li>
<li><code>#btn-scroll-up</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.btn-scroll-up</code></li>
</ul>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
The text on first level links of side navigation which was <code>SPAN</code> element, should now have <code>.menu-text</code> class:
<pre data-language="html">
<li>
<a href="index.html">
<i class="ace-icon fa fa-tachometer"></i>
<span class="menu-text">Dashboard</span>
</a>
</li></pre>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Similar things applies to <code>#menu-toggler</code> element.
<br />
You should add <code>.toggler-text</code> class name to its <code>SPAN</code> child:
<pre data-language="html">
<a href="#" class="menu-toggler" id="menu-toggler">
<span class="toggler-text"></span>
</li></pre>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
The default size of icons inside buttons have been removed.
<br />
You may specify icon sizes using <code>.bigger-110</code> ... <code>.bigger-300</code> as described later.
<pre data-language="html">
<a href="#" class="btn btn-app btn-primary">
<i class="ace-icon fa fa-envelope bigger-200"></i>
Email
</li></pre>
</li>
<li>
<i class="ace-icon fa fa-check"></i>
Add <code>.home-icon</code> to the first breadcrumbs icon (the one indicating homepage).
</li>
</ul>
</div><!-- /.info-section -->
</div><!-- /.help-content -->
<div class="hr hr-double hr32"></div>
<h2 class="blue lighter">FontAwesome & Icons</h2>
<div class="space-4"></div>
<div class="help-content">
<h3 class="info-title smaller" data-id="#changes.fontawesome">Updating Fontawesome 3.x to 4.x</h3>
<div class="info-section">
<ul class="list-unstyled info-list">
<li>
<i class="ace-icon fa fa-check"></i>
Because there are multiple Font icon libraries which you can use and each one has a different naming convention,
I added a custom icon class name to be used with all fonts without the need to change CSS or JS code.
<div class="space-6"></div>
I have added <code>.ace-icon</code> class to be used on all icons except for those that don't any special styling.
<br />
Also <code>.menu-icon</code> should be used for sidebar icons.
</li>
<li>
<i class="ace-icon fa fa-check"></i>
You can choose a different name other than <code>.ace-icon</code> by modifying
<code>@icon</code> variable inside <code>assets/css/less/variables.less</code>
and re-compiling LESS files.
<br />
Also inside:
<br />
<code>assets/js/ace.js</code>
<br />
or <code>dist/js/ace.min.js</code>
<br />
or
<code>assets/js/ace/ace.js</code>,
<div class="space-4"></div>
and
<div class="space-4"></div>
<code>assets/js/ace-extra.js</code>,
<br />
or
<code>dist/js/ace-extra.min.js</code>
<br />
you should change <code>ace.vars['icon']</code> and <code>ace.vars['.icon']</code>
to new values.
</li>
<li>
<i class="ace-icon fa fa-check"></i>
I have included a Javascript file which helps you to update all your files to use new icon names.
<br />
You can find it here
<code>build/icon.js</code>
and use it with Node.js like this:
<code>node icon.js --path=".../html/myfile.html"</code>
or
<code>node icon.js --path=".../mydir/"</code>
<br />
Options include:
<ol>
<li>
<b>path</b>: Path to the folder or file you want to update.
</li>
<li>
<b>ext</b>: if specified only this extensions will be updated.
</li>
</ol>
Example:
<br />
<code>node icon.js --path="path/to/file-or-folder"</code>
<br />
<code>node icon.js --path="path/to/file-or-folder" --ext="html|php|js"</code>
</li>
<li>
<div class="alert alert-danger">
If you want to use the <b>icon.js</b> script to update icon names,
make sure you have a copy of your files first.
<br />
Also if you want to use another name other than <code>.ace-icon</code> you should modify
<code>var ace_icon</code> variable inside the script.
</div>
</li>
</ul>
</div><!-- /.info-section -->
</div><!-- /.help-content -->
</section>