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

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