Borders

@border-color: #eee;

The border color for the classes below that can be changed if you create your own widget theme.

.bt

Sets border-top: 1px solid #eee;

.br

Sets border-right: 1px solid #eee;

.bb

Sets border-bottom: 1px solid #eee;

.bl

Sets border-left: 1px solid #eee;

.b

Sets border: 1px solid #eee;

General modifiers

.fl

Sets element's float property to left

.pr

Sets element's position property to relative

.w100

Sets element's width to 100%

.dn

Sets element's display property to 'none'

.db

Sets element's display property to 'block'

Inside the widgets we support 12-column grid similar to the Twitter Bootstrap's native. Here is the convention:

.col-1 to .col-12

Sets a block element width with a step of 8.33333333333%

.np

Removes padding from an element

.p-1 to .p-4

Sets padding from 10px to 40px (10px step)

.pl-1 to .pl-4

Sets the left padding from 10px to 40px (10px step)

.pr-1 to .pr-4

Sets the right padding from 10px to 40px (10px step)

.pt-1 to .pt-4

Sets the top padding from 10px to 40px (10px step)

.pb-1 to .pb-4

Sets the bottom padding from 10px to 40px (10px step)

.nm

Removes margin from an element

.m-1 to .m-4

Sets margin from 10px to 40px (10px step)

.ml-1 to .ml-4

Sets the left margin from 10px to 40px (10px step)

.mr-1 to .mr-4

Sets the right margin from 10px to 40px (10px step)

.mt-1 to .mt-4

Sets the top margin from 10px to 40px (10px step)

.mb-1 to .mb-4

Sets the bottom margin from 10px to 40px (10px step)

Just like in Twitter Bootstrap if you use column on multiple lines or floors you should separate (wrap) them with .row

This is a sample widget that uses all of the property groups above (padding, margins, grid, border):

<div class="widget-template"> 
<div class="title-md">Example of 12 columns inside a widget</div> 
<div class="row mt-2"> 
<div class="col-4 b p-1 pl-3">4-columns</div> 
<div class="col-5 b p-2">5-columns</div> 
<div class="col-3 b p-1">3-columns</div> 
</div> 
</div>

You can modify some of your elements properties based on the size of the widget their are positioned in. Sample scenario is shown in the following code:

<div class="dn x1-db"> 
<div class="title-md">I am visible only when the widget is 1 column wide</div> 
</div> 

<div class="x1-dn"> 
<div class="title-md">I am not visible only when the widget is 1 column wide</div> 
</div>

.x1-db to .x6-db

Sets the element's display property to 'block' for given widget size

.x1-dn to .x6-dn

Sets the element's display property to 'none' for given widget size

.x{widget-size}-p-{padding}

Sets the element's padding property from 10ox to 40px for given widget size
For example: .x3-p-2 sets the padding to 20px only when the widget is 3 column wide

.x{widget-size}-p{t/r/b/l}-{padding}

Sets the element's top/right/bottom/left padding property from 10ox to 40px for given widget size
For example: .x2-pb-3 sets the bottom padding to 30px only when the widget is 2 column wide

.x{widget-size}-m-{margin}

Sets the element's margin property from 10ox to 40px for given widget size
For example: .x3-m-2 sets the margin to 20px only when the widget is 3 column wide

.x{widget-size}-m{t/r/b/l}-{margin}

Sets the element's top/right/bottom/left margin property from 10ox to 40px for given widget size
For example: .x2-mb-3 sets the bottom margin to 30px only when the widget is 2 column wide

.x{widget-size}-col-{column}

Sets the width of the column for given widget size
For example: .col-2 .x4-col-6 sets the element's width to 2 columns always, except when the widget width is 4 columns - then the element's width would be 6

Borders

General modifiers

The widget grid and block modifiers

Widget size-specific modifiers