0%

### 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 4. 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`, `.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 4. 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` | `.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`