Utilities

These are general utility classes that can be used on any element.

Margins and Padding

Margin and padding classes are built using the pattern of uscb-{property}-{direction}-{operator}-{breakpoint}-{value}. The accepted values for each property are as follows:

Property

margin
padding

Direction (omission means applies in all directions)

T - top
R - right
B - bottom
L - left
TB - top and bottom
LR - left and right

Operator (optional, must be used with breakpoint property)

gt - greater than
lt - less than

Breakpoint (optional)

s - < 576px
sm - > 576px and < 768px
md - > 768px and < 992px
lg - > 992px and < 1200px
xl - > 1200px

Value

0, 2, 4, 5, 8, 10, 12, 15, 16, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100

<div class="uscb-margin-L-12">12px left margin</div>
<div class="uscb-margin-TB-20">20px top and bottom margin</div>
<div class="uscb-padding-6">6px full padding</div>
<div class="uscb-padding-gt-s-2">2px full padding at screen sizes greater than 576px</div>
<div class="uscb-padding-T-lg-25">25px top padding at screen sizes between 992px and 1200px</div>

Top of Section