14 kss-u
The utilities.
14.1 border
The borders.
14.1.1 modifiers: border
The extended border utilities.
default
kss-u--border-highlight-top
Top border style with highlight color (support color scheme)
<div style="position:relative; padding: 50px;">
<div class="{{modifier_class}}" style="position:relative; width:50px; height:50px; background:#999;"></div>
</div>14.2 margin
utilities that tweek of margin
14.2.1 modifiers: margin
builtin modifiers of margin. (-60px to 60px in 5px steps)
default
kss-u--margin-top-0
top 0px margin
kss-u--margin-top-60-
top -60px margin
kss-u--margin-top-60
top 60px margin
kss-u--margin-right-0
right 0px margin
kss-u--margin-right-60-
right -60px margin
kss-u--margin-right-60
right 60px margin
kss-u--margin-bottom-0
bottom 0px margin
kss-u--margin-bottom-60-
bottom -60px margin
kss-u--margin-bottom-60
bottom 60px margin
kss-u--margin-left-0
left 0px margin
kss-u--margin-left-60-
left -60px margin
kss-u--margin-left-60
left 60px margin
kss-u--margin-all-0
all 0px margin
kss-u--margin-all-60-
all -60px margin
kss-u--margin-all-60
all 60px margin
kss-u--margin-vertical-0
vertical 0 margin
kss-u--margin-vertical-60-
vertical -60px margin
kss-u--margin-vertical-60
vertical 60px margin
kss-u--margin-horizontal-0
horizontal 0 margin
kss-u--margin-horizontal-60-
horizontal -60px margin
kss-u--margin-horizontal-60
horizontal 60px margin
kss-u--margin-center
horizontal centering by margin
<div style="position:relative; padding:50px;">
<div class="{{modifier_class}}" style="position:relative; width:50px; height:50px; background:#999;"></div>
</div>14.3 padding
utilities that tweek of padding
14.3.1 modifiers: padding
builtin modifiers of padding. (0 to 60px in 5px steps)
default
kss-u--padding-top-0
top 0px padding
kss-u--padding-top-60
top 60px padding
kss-u--padding-right-0
right 0px padding
kss-u--padding-right-60
right 60px padding
kss-u--padding-bottom-0
bottom 0px padding
kss-u--padding-bottom-60
bottom 60px padding
kss-u--padding-left-0
left 0px padding
kss-u--padding-left-60
left 60px padding
kss-u--padding-all-0
all 0px padding
kss-u--padding-all-60
all 60px padding
kss-u--padding-vertical-0
vertical 0px padding
kss-u--padding-vertical-60
vertical 60px padding
kss-u--padding-horizontal-0
horizontal 0px padding
kss-u--padding-horizontal-60
horizontal 60px padding
<div style="position:relative; padding:50px;">
<div class="{{modifier_class}}" style="position:relative; width:50px; height:50px; background:#999;"></div>
</div>