App > Documentation > Components > UI Elements
This page contain Flatlogic One styled versions of Bootstrap Alerts, Tooltips, Popovers, Modals and Progress Bars. All styles are in bootstrap-override.scss.
For progress bars there is a small Flatlogic One extension which allows you to change progress bars sizes:
Flatlogic One uses HubSpot's Messenger library. It's a client-side growl-like notifications with actions and auto-retry.
Read more at Messenger website.
Font Awesome Icons
Font Awesome is iconic font originally designed for Bootstrap (Font Awesome works great with all frameworks). It contains 439 icons in pictographic font form.
Read more at Font Awesome website.
200 icons in pictographic font form provided by Glyphicons.
To create button you can style any html element with
.btn class. Flatlogic One
replaces default bootstrap colors with theme specific and adds two more:
You can read more at Bootstrap Buttons page.
Tabs component may be placed both inside of
.widget element or directly into main
Originally Bootstrap has an option to put tabs on left and right. In Bootstrap 3 this feature was removed. We here think it was a pretty usable component, so Flatlogic One keeps it:
<div class="tabbable tabs-left"> <ul id="tabs2" class="nav nav-tabs"> <li class=""><a href="#tab12" data-toggle="tab">Basic</a></li> <li class="active"><a href="#tab22" data-toggle="tab">Assumtion</a></li> <li class=""><a href="#tab32" data-toggle="tab">Works</a></li> </ul> <div id="tabs2c" class="tab-content"> <div class="tab-pane" id="tab12"> 1 </div> <div class="tab-pane active" id="tab22"> 2 </div> <div class="tab-pane" id="tab32"> 3 </div> </div> </div>
For more info check Bootstrap Tabs.
In case you want your tabs to become accordion for small screens checkout our tabcollapse plugin.
Same as Tabs Accordion may be placed both as a widget inside
.content or inside of
.widget. Flatlogic One's accordion is a styled version of
Bootstrap Collapse component.
Flatlogic One grouped lists is a styled version of jQuery UI Sortable component.
With help of Touch Punch allows sorting at touch devices.
This nestable draggable lists are built with jQuery based lib - Nestable.