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 | 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--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.uix-mobile-tc.uix-mobile-tl.uix-mobile-tr
|
.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 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
Keep the same height as the PC on mobile devices, it can be used with |
.uix-mobile-el
Display element on mobile devices. By default, the PC devices does not display.
.is-mobile-hide
Hide element on mobile devices
.is-mobile-still
Keep the same effect as the PC on mobile devices, it can be used with
.uix-height--* |
| 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
Make a circle image with
<img>.uix-border--circle.uix-border--circle-only-img
Make a circle image with
<img> only. |