Sing Documentation

Basic Widget

Sing widget has really intuitive structure and may contain three parts: header, body and footer. But any of them can be omitted. So the basic widget structure looks like:

<section class="widget">
    <header>
        <h3>Header</h3>
    </header>
    <div class="widget-body">
        Body
    </div>
    <footer>
        Footer
    </footer>
</section>

Widget will take as much place as inner content needs, but you can control its size with these classes: .widget-sm, .widget-md.

Widget Colors

Any widget (generally speaking - any element) may be styled with .bg-primary, .bg-info and other .bg-{color} classes. The whole list is:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-primary-light - light version of color. See $brand-primary-light variable in variables.scss.
  • .bg-success-light - light version of color. See $brand-success-light variable in variables.scss.
  • .bg-info-light - light version of color. See $brand-info-light variable in variables.scss.
  • .bg-warning-light - light version of color. See $brand-warning-light variable in variables.scss.
  • .bg-danger-light - light version of color. See $brand-danger-light variable in variables.scss.
  • .bg-body - body-like color. See $body-bg variable in variables.scss.
  • .bg-body-light - lighter body color. See $body-bg-light variable in variables.scss.
  • .bg-gray - see $gray variable in variables.scss.
  • .bg-gray-transparent - transparent $gray version rgba($gray, .6).
  • .bg-gray-dark - see $gray-dark variable in variables.scss.
  • .bg-black - black. See $black variable in variables.scss.
  • .bg-gray-light - see $gray-light variable in variables.scss.
  • .bg-gray-lighter - see $gray-lighter variable in variables.scss.
  • .bg-transparent - transparent rgba(0,0,0,0).
  • .bg-white - see $white variable in variables.scss.

Widget Controls

See Grid.

Widgets

Statistic Boxes

Boxes use Metro JS for widget & numbers sliding.

Sales and Visits Charts

Built with Flot JS.

Weather Widget

Uses js canvas-drawing library for showing weather icons - Skycons.

Nasdaq Widget

Built with jQuery Sparkline. This is the most easiest lib to draw charts. You will find it in lots of place in Sing.

Yearly Distributions Map

Inspired by Mapael's world population example. Map initialization code is in initYearsMap function in widgets.js file.

Recent Chats

Is basically just markup with SlimScroll attached. SlimScroll is a defult scrolling solution in Sing. You will find it in lots of places.

Quick View Widget

Cool dark gray background is easily achievable with .bg-gray-dark class. Realtime chart is built with Rickshaw.

Social Widgets

Same as statistic boxes use Metro JS to slide content. Green shares widget is built with Rickshaw.