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: .progress-sm, .progress-xs.

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.

Glyphicons Icons

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: .btn-gray and .btn-inverse.

You can read more at Bootstrap Buttons page.

Tabs component may be placed both inside of .widget element or directly into main .content.

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.

List Groups

This nestable draggable lists are built with jQuery based lib - Nestable.