Sing App HTML5 v4.7.1

COMPONENTS LIST

  1. Charts
  2. Forms
  3. UI
  4. Grid
  5. Maps
  6. Tables

CHARTS

FLOT CHARTS

Built with Flot JS. Required libs:

<script src="node_modules/flot/jquery.flot.js"></script>
INTERACTIVE SPARKLINES

Built with jqeruy.sparkline.

<script src="node_modules/jquery.sparkline/index.js"></script>
RICKSHAW

Realtime chart is based on Rickshaw realtime example.

SPARKLINE PIE CHART

Same as interactive sparklines based on jqeruy.sparkline.

<script src="node_modules/jquery.sparkline/index.js"></script>
D3 CHARTS

These charts are based on amazing D3.js library. Here is what D3 says about itself:

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

So it means that graphs are drawn with standard SVG and styled with CSS. You can customize all you like with techniques you already know.

There are two libraries used in Sing App which work on top of D3.js:

<script src="node_modules/d3/d3.min.js"></script>
<script src="node_modules/nvd3/build/nv.d3.min.js"></script>
MORRIS CHARTS

Built with Morris JS.

<script src="node_modules/raphael/raphael-min.js"></script>
<script src="node_modules/morris.js/morris.min.js"></script>
EASY PIE CHARTSs

Built with Easy Pie Chart.

<script src="node_modules/jquery.easy-pie-chart/dist/jquery.easypiechart.min.js"></script>
FLOT BARS

Same as Flot Charts built with Flot. A bit different dependencies:

<script src="node_modules/flot.animator/jquery.flot.animator.min.js"></script>
<script src="node_modules/flot/jquery.flot.js"></script>
<script src="node_modules/flot-orderBars/js/jquery.flot.orderBars.js"></script>
<script src="node_modules/flot/jquery.flot.selection.js"></script>
<script src="node_modules/flot/jquery.flot.time.js"></script>

FORMS

FORM ELEMENTS

There are four general styles available to style forms: .form-horizontal, .form-condensed, .form-label-left and "no style" for horizontal placed inputs, decreased margins, labels aligned to left and default form accordingly. You can combine any of them together.

INPUTS

Bootstrap styles input by default, so there is no need to add any classes to inputs. Just use them. Don't forget to include input type.

Bootstrap has a great documentation about forms.

INPUT SIZING

Any input can be sized by adding .col-*-* class. For vertical sizing .input-lg and .input-sm are available.

PREPENDED AND APPENDED INPUTS

Again Bootstrap helps. It has everything we need to prepend and append inputs.

TEXTAREAS

Auto-growing textarea uses jQuery Autosize plugin to increase area size dynamically. Files:

<script src="node_modules/jquery-autosize/jquery.autosize.min.js"></script>

Wysiwyg editor is based on bootstrap-wysihtml5. Files:

<script src="node_modules/bootstrap3-wysihtml5/lib/js/wysihtml5-0.3.0.min.js"></script>
<script src="node_modules/bootstrap3-wysihtml5/src/bootstrap3-wysihtml5.js"></script>

Markdown editor is built with Markdown js. Files:

<script src="node_modules/markdown/lib/markdown.js"></script>
SELECTS

Two different type of selects avaiables in Sing template:

Required files:

<script src="node_modules/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="node_modules/select2/select2.min.js"></script>
CHECKBOXES AND REDIOS

To style default checkboxes and radio buttons Awesome Bootstrap Checkbox library is used. This lib was written specially for Sing, so in case you find some bugs or want some features - let us know.

BUTTON-LIKE CHECKBOXES

Bootstrap has a great api to handle button states - bootstrap-button.js, so using it to imitate checkbox or radio buttons.

IOS-LIKE SEITCHES

There is a special plugin to do that - Switchery. Include following files:

<script src="node_modules/switchery/dist/switchery.min.js"></script>
PICKERS

Any field may have either Datetimepicker or Colorpicker attached. Required files:

<script src="node_modules/moment/min/moment.min.js"></script>
<script src="node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<script src="node_modules/mjolnic-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
MASKED INPUTS

To make any input accept only formatted values there is a great plugin to use - jasny's inputmask.js. Files:

<script src="node_modules/jasny-bootstrap/js/inputmask.js"></script>
SLIDERS

Sing sliders are styled version of Bootstrap Slider plugin.

<script src="node_modules/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js"></script>
SIMPLE FILES UPLOAD

Same as masked input based on Jasny's BS fork. Files:

<script src="node_modules/jasny-bootstrap/js/fileinput.js"></script>
DROPZONE

Dead simple file upload plugin with image preview Dropzone.

<script src="node_modules/dropzone/downloads/dropzone.min.js"></script>

VALIDATION

Sing App uses really great validation plugin - parsley.js. It's better to let it say itself:

Javascript forms validation. Powerful, UX aware & Dead simple. Never write a single javascript line anymore to validate your forms FrontEnd. Parsley will do that for you – and do it right –, thanks to its powerful DOM-API !

To activate it you need to add data-validate="parsley" to your form to make it work. That's it.

If you want to add step-by-step validation with wizard please check this guide.

Files:

<script src="node_modules/parsleyjs/dist/parsley.min.js"></script>

WIZARD

Twitter Bootstrap Wizard Plugin is used to build wizard-enabled widget.

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 activate it you need to call $("#rootwizard").bootstrapWizard(); on your markup to create wizard.

If you want to add step-by-step wizard validation please check this guide.

Files:

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

Example Markup:

<div id="rootwizard">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
            <ul>
                <li><a href="#tab1" data-toggle="tab">First</a></li>
                <li><a href="#tab2" data-toggle="tab">Second</a></li>
                <li><a href="#tab3" data-toggle="tab">Third</a></li>
                <li><a href="#tab4" data-toggle="tab">Forth</a></li>
                <li><a href="#tab5" data-toggle="tab">Fifth</a></li>
                <li><a href="#tab6" data-toggle="tab">Sixth</a></li>
                <li><a href="#tab7" data-toggle="tab">Seventh</a></li>
            </ul>
        </div>
      </div>
    </div>
    <div class="tab-content">
        <div class="tab-pane" id="tab1">
          1
        </div>
        <div class="tab-pane" id="tab2">
          2
        </div>
        <div class="tab-pane" id="tab3">
            3
        </div>
        <div class="tab-pane" id="tab4">
            4
        </div>
        <div class="tab-pane" id="tab5">
            5
        </div>
        <div class="tab-pane" id="tab6">
            6
        </div>
        <div class="tab-pane" id="tab7">
            7
        </div>
        <ul class="pager wizard">
            <li class="previous first" style="display:none;"><a href="#">First</a></li>
            <li class="previous"><a href="#">Previous</a></li>
            <li class="next last" style="display:none;"><a href="#">Last</a></li>
            <li class="next"><a href="#">Next</a></li>
        </ul>
    </div>
</div>
APPLICATION WIZARD

Bootstrap Application Wizard is a ready to use wizard component with simple install process. You don't even need to have any special markup to instantiate it.

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

UI

COMPONENTS

This page contain Sing-y styled versions of Bootstrap Alerts, Labels, Tooltips, Popovers, Modals and Progress Bars. All styles are in bootstrap-override.scss.

For progress bars there is a small Sing extension which allows you to change progress bars sizes: .progress-sm, .progress-xs.

NOTIFICATIONS

Sing App uses HubSpot's Messenger library. It's a client-side growl-like notifications with actions and auto-retry.

Read more at Messenger website.

ICONS

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.

BUTTONS

To create button you can style any html element with .btn class. Sing App 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

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 Sing App 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.

ACCORDION

Same as Tabs Accordion may be placed both as a widget inside .content or inside of .widget. Sing's accordion is a styled version of Bootstrap Collapse component.

Grouped Lists

Sing App 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.

GRID SYSTEM

Sing App inherits 12-column grid system from Bootstrap's great one.

WIDGET CONTROLS

For one of our previous works we have developed a custom jquery plugin called Widgster which provides an easy way to handle basic widget functions like collapsing, closing, ajax-refreshing & fullsreening.

Plugin is open-sourced. Check out Widgster repository.

To apply all these features to your default widget you have to add appropriate links (or buttons) to it:

<section class="widget">
    <header>
        <h3>Header</h3>
        <div class="widget-controls">
            <a data-widgster="load" href="#">Reload</a>
            <a data-widgster="expand" href="#">Expand</a>
            <a data-widgster="collapse" href="#">Collapse</a>
            <a data-widgster="fullscreen" href="#">Fullscreen</a>
            <a data-widgster="restore" href="#">Restore</a>
            <a data-widgster="close" href="#">Close</a>
        </div>
    </header>
    <div class="widget-body">
        Body
    </div>
</section>

In the example above links are put into a .widget-controls but you can put them anywhere inside of widget.

Then widgster needs to be initialized via javascript:

$('.widget').widgster();

As you could guess data-widgster attribute defines widget action to be performed when link is clicked.

OPTIONS

Widgster accepts an object with options:

$('.widget').widgster({
    collapsed: true
});
ACTIONS

All actions may be called via js:

$('.widget').widgster('close');
EVENTS

Each action fires both before and after event. Events have the same names as actions. Before event may be canceled.

For example, to make refresh button spin:

$('.widget').on("load.widgster", function(){
    $(this).find('[data-widgster="load"] > i').addClass('fa-spin')
}).on("loaded.widgster", function(){
    $(this).find('[data-widgster="load"] > i').removeClass('fa-spin')
});

MAPS

GOOGLE MAPS

To embed Google Maps into Sing App great jquery plugin is used - Gmap3. Files:

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="node_modules/gmaps/gmaps.js"></script>

Vector maps

Sometimes you need to use just simplified version of map. Jvectormap does a great job in such cases.

<script src="node_modules/jvectormap/jquery.jvectormap.min.js"></script>
<script src="node_modules/jvectormap-world/index.js"></script>

TABLES

STATIC TABLES

Sing App tables are based on Bootstrap tables with additional styling.

Sing introduces two new table classes .table-sm and .table-lg for decreased and increased table paddings accordingly.

Also, don't forget about .table-responsive class which adds horizontal scrollbar to tables for small screens.

OVERFLOW TABLE

Add any non-bordered .table within a widget for a seamless design. Awesome look for no cost. Just wrap the table with simple css class .widget-table-overflow inside of widget: 

<section class="widget">
    <header>
        header
    </header>
    <div class="widget-body">
        body
    </div>
    <div class="widget-table-overflow">
        <table class="table table-striped">
            <tbody>
                <tr>
                <td>1</td>
                <td>2</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

DYNAMIC TABLES

Backgrid.js is a set of components for building semantic and easily stylable data grid widgets.

It has been chosen because it offers really simple, intuitive programming interface that makes easy things easy, but hard things possible when dealing with tabular data.

Backgrind provides editing, adding and sorting data on client side. We recommend to read more about it - Backgrid website. Files:

<script src="node_modules/underscore/underscore-min.js"></script>
<script src="node_modules/backbone/backbone.js"></script>
<script src="node_modules/backbone.paginator/lib/backbone.paginator.min.js"></script>
<script src="node_modules/backgrid/lib/backgrid.js"></script>
<script src="node_modules/backgrid-paginator/backgrid-paginator.js"></script>
DATATABLES
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

The most frequently asked thing about DataTables is its table structure notation. There is a line in tables-dynamic.js:111

"sDom": "<'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>"

Files:

<script src="node_modules/datatables/media/js/jquery.dataTables.js"></script>