Classes

Classes naming convention

Classes are prefixed as to set a hint about class type and use. You can find below a list of all prefixes used in class names.

  • NAV : navigation - used to group navigation elements.
  • LT : layout - used to set pages elements layout such as container and grids.
  • WR : wrapper - used to group content inside layout elements.
  • SWR : sub-wrapper - used to group content inside wrappers.
  • CL : collection list - used to style custom collection list layout when existing utility classes are not enough.
  • CLI : collection list item - used to style collection items.
  • uc : utility classes - combo classes used for various styles adjustments such as spacing, aligment, images rendering...

Utility classes

Visibility

Button
.uc-hide
Button
.uc-hide-tablet
Button
.uc-hide-mobile
Button
.uc-show-tablet
Button
.uc-show-mobile
Button
.uc-overflow-x-hidden
Button
.uc-overflow-hidden

Layer

Button
.uc-z-index-negative-1
Button
.uc-z-index-1
Button
.uc-z-index-10

Position

Button
.uc-float-btm-rgt
Button
.uc-float-btm-lft
Button
.uc-float-top-rgt
Button
.uc-float-top-lft
Button
.uc-float-btm
Button
.uc-float-top
Button
.uc-float-top
Button
.uc-relative
Button
.uc-absolute
Button
.uc-sticky-top

Icons & logos

.uc-icon-16
.uc-icon-24
.uc-icon-32
.uc-icon-48
.uc-icon-64
.uc-logo-16
.uc-logo-24
.uc-logo-32
.uc-logo-48
.uc-logo-48

Spacing & sizes

Button
.uc-mt-4
Button
.uc-mt-8
Button
.uc-mt-16
Button
.uc-mt-24
Button
.uc-mt-32
Button
.uc-mt-48
Button
.uc-mt-64
Button
.uc-mt-80
Button
.uc-mt-96
Button
.uc-mt-128
Button
.uc-mt-160
Button
.uc-mb-4
Button
.uc-mb-8
Button
.uc-mb-16
Button
.uc-mb-24
Button
.uc-mb-32
Button
.uc-mb-48
Button
.uc-mb-64
Button
.uc-mb-80
Button
.uc-mb-96
Button
.uc-mb-128
Button
.uc-mb-160
Button
.uc-ml-4
Button
.uc-ml-8
Button
.uc-ml-16
Button
.uc-ml-24
Button
.uc-ml-32
Button
.uc-ml-48
Button
.uc-ml-64
Button
.uc-ml-80
Button
.uc-mr-4
Button
.uc-mr-8
Button
.uc-mr-16
Button
.uc-mr-24
Button
.uc-mr-32
Button
.uc-mr-48
Button
.uc-mr-64
Button
.uc-mr-80
Button
.uc-no-margin
Button
.uc-pd-8
Button
.uc-pd-16
Button
.uc-pd-24
Button
.uc-pd-32
Button
.uc-full-width
Button
.uc-full-height
Button
.uc-full

Alignment

Button
.uc-align-lft
Button
.uc-align-center
Button
.uc-align-rgt
Button
.uc-justify-btm
Button
.uc-justify-top
Button
.uc-justify-center
Button
.uc-flex-h
Button
.uc-flex-v
Button
.uc-flex-between
Button
.uc-flex-wrap
Button
.uc-flex-lft
Button
.uc-flex-rgt
Button
.uc-flex-center
Button
.uc-inline-block
Button
.uc-inline

Border width

Button
.uc-border
Button
.border-bottom
Button
.uc-bw-1
Button
.uc-bw-2
Button
.uc-bw-3
Button
.uc-bw-4
Button
.uc-bw-8
Button
.uc-bc-prim-1
Button
.uc-bc-prim-2
Button
.uc-bc-prim-3

Border color

Button
.uc-bc-prim-1
Button
.uc-bc-prim-2
Button
.uc-bc-prim-3
Button
.no-bg

Border radius

Button
.uc-br-3
Button
.uc-br-6
Button
.uc-br-12
Button
.uc-br-16
Button
.uc-br-24
Button
.uc-br-32
Button
.uc-br-round

Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.uc-trunc-text-s

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.uc-trunc-text-m

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.uc-trunc-text-l

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.uc-ta-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.uc-ta-rgt

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.uc-text-color-dark

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.uc-text-color-light

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.uc-text-color-opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.uc-text-color-opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.uc-text-color-accent-1

Image boxes

.image-frame
.image-frame .zoom-in
.image-frame .zoom-in .spin-10
.ratio-box .1:1
.ratio-box .4:3
.ratio-box .3:2
.ratio-box .8:5
.ratio-box .16:9
.ratio-box .21:9
.ratio-box .21:9
.layer .bg-filter
Button
.uc-clickable-off

Mix blend modes

.mbm-normal
.mbm-multiply
.mbm-screen
.mbm-overlay
.mbm-darken
.mbm-lighten
.mbm-color-dodge
.mbm-color-burn
.mbm-hard-light
.mbm-soft-light
.mbm-difference
.mbm-exclusion
.mbm-hue
.mbm-saturation
.mbm-color
.mbm-luminosity