Documentation

Grid System

Light Blue inherits 12-column grid system from Bootstrap's great one.

Sometimes this behaviour has to be omitted, so you can add .col-xs-* classes to your columns. Columns within this row will always remain their relative size.

Widgets

Light Blue widget looks simple 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="body">
        Body
    </div>
    <footer>
        Footer
    </footer>
</section>

You can color widget's background by adding light color class. For example .light-blue.

Widget will take as much place as inner content needs, but you can control its size: .tiny, .normal, .large, or .xlarge.

Consider using some .offset* for .col-* that holds widget. Let background shine!

Widget Controls

Since version 2.1 Light Blue includes a custom jquery plugin called Widgster which provides an easy way to handle basic widget functions like collapsing, closing, ajax-refreshing & fullsreening.

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="body">
        Body
    </div>
</section>

In the example above links are put into a .widget-controls but you can put them wherever 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

  • collapsed - if true collapses widget after page load;
  • fullscreened - if true fullscreens widget after page load;
  • bodySelector - widget body selector. Used for loading and collapsing. Default is .body;
  • load - an url to fetch widget body from. Default is undefined;
  • showLoader - whether to show a loader when ajax refresh performed. Default is true;
  • autoload - whether to automatically perform ajax refresh after page load. May be set to an integer value. If set, for example, to 2000 will refresh the widget every 2 seconds. Default is false;
  • closePrompt(callback) - a function to be called when closing. Closing is only performed when callback is called.

Widgster accepts an object with options:

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

Actions

  • close - closes the widget;
  • collapse - collapses (minimizes) the widget. An element holding this data attribute will be hidden when widget gets expanded;
  • expand - expands the widget. An element holding this data attribute will be hidden when widget gets collapsed;
  • fullscreen - fullscreens the widget. An element holding this data attribute will be hidden when widget gets restored;
  • restore - restores the widget back to its position. An element holding this data attribute will be hidden when widget gets fullscreened;
  • load - reloads widget content from the url provided with data-widget-load attribute.

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')
});