Documentation

Grid

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 .span* which holds widget. Let background shine!