@@include('./src/components/_global/include-header.html')
@@include('./src/components/_global/include-loader.html') @@include('./src/components/_global/include-toggle-trigger.html')

### 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 `.is-mobile-still`

`.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.

@@include('./src/components/_global/include-copyright.html')
@@include('./src/components/_global/include-footer.html')