UTILITIES

Swavy UI CSS framework has utilities for CSS properties that can be used in HTML element tags. This reduces the number of CSS codes to be used.

ALIGNMENT UTILITY

ELEMENT ALIGNMENT
.sw_align-left .sw_align-right .sw_align-none
FLEX ALIGNMENT
.sw_flex .sw_center-flex .sw_end-flex .sw_content-center .sw_content-end
CENTERING ALIGNMENT
.sw_centered
CENTERING ALIGNMENT VERTICAL
.sw_centered-1 .sw_centered-2 .sw_centered-3 .sw_centered-4 .sw_centered-5 .sw_centered-6

BORDER UTILITY

BORDER WIDTH
.sw_minimal .sw_br-1 .sw_br-2 .sw_br-3 .sw_br-4 .sw_br-5 .sw_br-6 .sw_br-7 .sw_br-8 .sw_br-9 .sw_br-10
ROUNDED BORDER
.sw_rsq-1 .sw_rsq-2 .sw_rsq-3 .sw_rsq-4 .sw_rsq-5 .sw_rsq-6 .sw_rsq-7 .sw_rsq-8 .sw_round
REDUCED BORDER
.sw_no-br .sw_no-br-top .sw_no-br-bottom .sw_no-br-right .sw_no-br-left

SHADOW UTILITY

BOX SHADOW
.sw_bxsh .sw_bxsh-xs .sw_bxsh-ms .sw_bxsh-none

DISPLAY UTILITY

BOX SHADOW
.sw_ds-flex .sw_ds-block .sw_ds-inline .sw_ds-inline-block .sw_ds-inline-flex .sw_ds-table .sw_ds-table-cell .sw_ds-one .sw_ds-zero
.sw_ds-show .sw_ds-hide .sw_ds-none

ELEMENT UTILITY

.sw_wrapper .sw_hr .sw_vr .sw_overlay .sw_clearfix .sw_close .sw_menu .sw_cluster .sw_disabled .sw_blockquote .sw_active .st_active
ELEMENT STACK
.sw_stack-top1 .sw_stack-top2 .sw_stack-top3 .sw_stack-top4 .sw_stack-top5 .sw_stack-top6

FONT UTILITY

LARGE FONT
.font_sw-1 .font_sw-2 .font_sw-3 .font_sw-4 .font_sw-5 .font_sw-6 .font_sw-7 .font_sw-8 .font_sw-9 .font_sw-10 .font_sw-11
SMALL FONT
.font_xd-1 .font_xd-2 .font_xd-3 .font_xd-4 .font_xd-5 .font_xd-6 .font_xd-7 .font_xd-8 .font_xd-9 .font_xd-10 .font_xd-11

ELEMENT UTILITY

.sw_wrapper .sw_hr .sw_vr .sw_overlay .sw_clearfix .sw_close .sw_menu .sw_cluster .sw_disabled .sw_blockquote .sw_active .st_active
ELEMENT STACK
.sw_stack-top-1 .sw_stack-top-2 .sw_stack-top-3 .sw_stack-top-4 .sw_stack-top-5 .sw_stack-top-6

HEIGHT UTILITY

.sw_ht-10 .sw_ht-20 .sw_ht-30 .sw_ht-40 .sw_ht-50 .sw_ht-60 .sw_ht-70 .sw_ht-80 .sw_ht-90 .sw_ht-100

MARGIN UTILITY

AUTO MARGIN
.sw_mg-auto .sw_mt-auto .sw_mb-auto .sw_mr-auto .sw_ml-auto .sw_mlr-auto
MARGIN TOP
.sw_mt-1 .sw_mt-2 .sw_mt-3 .sw_mt-4 .sw_mt-5 .sw_mt-6 .sw_mt-7 .sw_mt-8
MARGIN BOTTOM
.sw_mb-1 .sw_mb-2 .sw_mb-3 .sw_mb-4 .sw_mb-5 .sw_mb-6 .sw_mb-7 .sw_mb-8
MARGIN RIGHT
.sw_mr-1 .sw_mr-2 .sw_mr-3 .sw_mr-4 .sw_mr-5 .sw_mr-6 .sw_mr-7 .sw_mr-8
MARGIN LEFT
.sw_ml-1 .sw_ml-2 .sw_ml-3 .sw_ml-4 .sw_ml-5 .sw_ml-6 .sw_ml-7 .sw_ml-8
MARGIN LEFT RIGHT
.sw_mlr-1 .sw_mlr-2 .sw_mlr-3 .sw_mlr-4 .sw_mlr-5 .sw_mlr-6 .sw_mlr-7 .sw_mlr-8
MARGIN TOP BOTTOM
.sw_mtb-1 .sw_mtb-2 .sw_mtb-3 .sw_mtb-4 .sw_mtb-5 .sw_mtb-6 .sw_mtb-7 .sw_mtb-8

PADDING UTILITY

PADDING TOP
.sw_pt-1 .sw_pt-2 .sw_pt-3 .sw_pt-4 .sw_pt-5 .sw_pt-6 .sw_pt-7 .sw_pt-8
PADDING BOTTOM
.sw_pb-1 .sw_pb-2 .sw_pb-3 .sw_pb-4 .sw_pb-5 .sw_pb-6 .sw_pb-7 .sw_pb-8
PADDING RIGHT
.sw_pr-1 .sw_pr-2 .sw_pr-3 .sw_pr-4 .sw_pr-5 .sw_pr-6 .sw_pr-7 .sw_pr-8
PADDING LEFT
.sw_pl-1 .sw_pl-2 .sw_pl-3 .sw_pl-4 .sw_pl-5 .sw_pl-6 .sw_pl-7 .sw_pl-8
PADDING LEFT RIGHT
.sw_plr-1 .sw_plr-2 .sw_plr-3 .sw_plr-4 .sw_plr-5 .sw_plr-6 .sw_plr-7 .sw_plr-8
PADDING TOP BOTTOM
.sw_ptb-1 .sw_ptb-2 .sw_ptb-3 .sw_ptb-4 .sw_ptb-5 .sw_ptb-6 .sw_ptb-7 .sw_ptb-8

POSITION UTILITY

.sw_pos-relative .sw_pos-absolute .sw_pos-fixed .sw_pos-static .sw_pos-sticky

TEXT UTILITY

TEXT ALIGN
.st_align-left .st_align-right .st_align-center .st_align-justify
TEXT WEIGHT
.st_weight-normal .st_weight-bold .st_weight-light
TEXT STYLE
.st_style-normal .st_style-italic .st_style-oblique
TEXT CASE
.st_case-upper .st_case-lower .st_case-capital
TEXT LINE
.st_line-over .st_line-under .st_line-through .st_line-solid .st_line-dotted .st_line-dashed .st_line-double .st_line-wavy
TEXT SPACE
.st_space-1 .st_space-2 .st_space-3 .st_space-4 .st_space-5 .st_space-6 .st_space-7 .st_space-8 .st_space-9 .st_space-10 .st_space-11

WIDTH UTILITY

.sw_wd-10 .sw_wd-20 .sw_wd-30 .sw_wd-40 .sw_wd-50 .sw_wd-60 .sw_wd-70 .sw_wd-80 .sw_wd-90 .sw_wd-100