@@include('./src/components/ES5/_global/include-header.html')
@@include('./src/components/ES5/_global/include-loader.html')
@@include('./src/components/ES5/_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--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
|
@@include('./src/components/ES5/_global/include-copyright.html')
@@include('./src/components/ES5/_global/include-footer.html')