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.


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">
    <div class="body">

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!