0%
Uix Kit

Common Helper Classes

Helper classes can help remove repetition by creating a set of abstract classes that can be used over and over on HTML elements.

Typography Color Display property
.uix-typo--h1
.uix-typo--h2
.uix-typo--h3
.uix-typo--h4
.uix-typo--h5
.uix-typo--h6
.uix-typo--style-normal
.uix-typo--style-uppercase
.uix-typo--style-bold
.uix-typo--style-italic
.uix-typo--style-noitalic
.uix-typo--style-underline
.uix-typo--style-tiny
.uix-typo--dropcap
.uix-typo--vertical
.uix-typo--vertical-characters-line 		.uix-typo--color-primary
.uix-typo--color-highlight
.uix-typo--color-sub
.uix-typo--color-white 		.uix-display-none
.uix-display-inline
.uix-display-inline-block
.uix-display-block
.uix-display-flex
.uix-display-inline-flex
The breakpoint is the same as bootstrap 5.
sm(576px) ⇒ .uix-display-none--sm, .uix-display-inline--sm, .uix-display-inline-block--sm, .uix-display-block--sm, .uix-display-flex--sm, .uix-display-inline-flex
md(768px) ⇒ .uix-display-none--md, .uix-display-inline--md, .uix-display-inline-block--md, .uix-display-block--md, .uix-display-flex--md, .uix-display-inline-flex
lg(992px) ⇒ .uix-display-none--lg, .uix-display-inline--lg, .uix-display-inline-block--lg, .uix-display-block--lg, .uix-display-flex--lg, .uix-display-inline-flex
xl(1200px) ⇒ .uix-display-none--xl, .uix-display-inline--xl, .uix-display-inline-block--xl, .uix-display-block--xl, .uix-display-flex--xl, . xl(1400px) ⇒ .uix-display-none--xl, .uix-display-inline--xxl, .uix-display-inline-block--xxl, .uix-display-block--xxl, .uix-display-flex--xxl, . uix-display-inline-flex
Spacing Content Block Clear Element
.uix-spacing--s
.uix-spacing--m
.uix-spacing--l
.uix-spacing--no-top
.uix-spacing--no-bottom
.uix-spacing--googlemap
.uix-spacing--no 		.uix-relative
.uix-relative--inline
.uix-relative--inline-clip 		.uix-clearfix
Shadow Smooth Transition Element Floating
.uix-outer-shadow--regular
.uix-outer-shadow--thick
.uix-outer-shadow--light
.uix-outer-shadow--highlight
.uix-none-shadow 		.uix-trans .uix-f-l
.uix-f-r
Element Alignment Truncate String with Ellipsis Vertically or Horizontally Aligned Blocks
.uix-t-r
.uix-t-l
.uix-t-c
The breakpoint is the same as bootstrap 5.
sm(576px) ⇒ .uix-t-r--sm, .uix-t-l--sm, .uix-t-c--sm
md(768px) ⇒ .uix-t-r--md, .uix-t-l--md, .uix-t-c--md
lg(992px) ⇒ .uix-t-r--lg, .uix-t-l--lg, .uix-t-c--lg
xl(1200px) ⇒ .uix-t-r--xl, .uix-t-l--xl, .uix-t-c--xl
xl(1400px) ⇒ .uix-t-r--xxl, .uix-t-l--xxl, .uix-t-c--xxl
 .uix-t-ellipsis .uix-v-align--absolute
.uix-v-align--absolute.uix-v-align--absolute--b
Align content of a div to the bottom

.uix-v-align--absolute.uix-v-align--absolute--t
Align content of a div to the top

.uix-v-align--relative
.uix-v-align--table
.uix-v-align--table.uix-v-align--table--b
Align content of a div to the bottom

.uix-v-align--table.uix-v-align--table--t
Align content of a div to the top
Specifies Whether To Clip Content Specifies a Default Height (unit: vh). Hidden Element on Mobile/Desktop
.uix-hidden-scrollbar-x
.uix-hidden-scrollbar 		.uix-height--10
.uix-height--20
.uix-height--30
.uix-height--40
.uix-height--50
.uix-height--60
.uix-height--70
.uix-height--80
.uix-height--90
.uix-height--100

Keep the same height as the PC on mobile devices, it can be used with .is-mobile-still

.uix-hide-mobile
Only display element on desktop devices.

.uix-hide-pc
Only display element on mobile devices.
Tip Bubble Image Hover Overlay Effects Position
.uix-bubble .uix-filter-hover--color .uix-dir--top
.uix-dir--bottom
.uix-dir--left
.uix-dir--right
.uix-dir--top-left
.uix-dir--top-right
.uix-dir--bottom-left
.uix-dir--bottom-right
Element Hidden Style Border Radius Align Wide and Full Classes For Elements
.uix-el--transparent
Set the transparency of the element to 0.

.uix-el--scale
Set the scale of the element to 0.

.uix-el--skew
Tilt the element a certain degree to the upper right.
 .uix-border--rounded
.uix-border--circle
.uix-border--circle.uix-border--circle-img
Make a circle image with <img>

.uix-border--circle.uix-border--circle-only-img
Make a circle image with <img> only.

.uix-border--rounded.uix-border--rounded-img
Make a rounded image with <img>

.uix-border--rounded.uix-border--rounded-only-img
Make a rounded image with <img> only.
 .uix-alignfull