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 | Align Wide and Full Classes For Elements |
---|---|---|
.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-alignfull
|
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--s .uix-outer-shadow--m .uix-outer-shadow--l .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 .uix-mobile-tc .uix-mobile-tl .uix-mobile-tr
|
.uix-t-ellipsis
|
.uix-v-align--absolute .uix-v-align--relative .uix-v-align--table
|
Specifies Whether To Clip Content | Specifies a Default Height (unit: vh) | Hidden The Element on Mobile Device |
---|---|---|
.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
|
.uix-mobile-el .is-mobile-hide (The mobile side is always hidden)
|
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 |
---|---|
.uix-el--transparent .uix-el--zoom .uix-el--skew
|
.uix-border--rounded .uix-border--circle .uix-border--circle.uix-border--circle-img .uix-border--circle.uix-border--circle-only-img
|