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
Position
Icons & logos
%20(Personnalis%C3%A9).jpeg)
.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
Alignment
Border width
Border color
Border radius
Text
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 .1:2
.ratio-box .21:9
.ratio-box .21:9
.layer .bg-filter
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