Core classes («unicss» folder)
blockbordercolorsflexheightlayoutlinkspadding-marginpositionroundedtextvisiblewidth
Main classes («main» folder)
baseblocksfontawesomeformsgradientsiconsimageslineslistsotherprintshadowtabletransition
Reduction in the text
.clearfix .b-clear
.b-right .b-left .b-center
.b-hide .b-hide-imp .b-inline .b-block .b-flex.b-grid
.va-ALIGN ALIGN: baseline, top, middle, bottom, text-top, text-bottom, sub, super
.bordered
.bor-none .bor-none-t .bor-none-r .bor-none-b .bor-none-l
.bor-STYLE (STYLE: solid, dotted, dashed, double, ... (variables.scss))
.bor-STYLE-t .bor-STYLE-r .bor-STYLE-b .bor-STYLE-l
.bor-STYLE-tb .bor-STYLE-rl
.bor-COLOR.hover-bor-COLOR
.borN N: 1, 2, 3 .. 9 (variables.scss)
.t-COLOR .bg-COLOR
.hover-t-COLOR .hover-bg-COLOR
.links-hover-t-COLOR a:hover .links-hover-bg-COLOR a:hover
t-COLORstep bg-COLORstep step: 50, 100, 200..900
.t-transparent.bg-transparent
.opacityPERCENT .opacityPERCENT PERCENT: 10, 20, 30 .. 90
.bg-opPERCENT .hover-bg-opPERCENT PERCENT: 10, 20, 30 .. 90
.bg-size-auto.bg-size-cover.bg-size-contain
Container
.flex
.flex-wrap.flex-wrap-reverse.flex-nowrap
.flex-row.flex-row-reverse.flex-column.flex-column-reverse
.flex-jc-start.flex-jc-end.flex-jc-between.flex-jc-around.flex-jc-center .flex-hcenter
.flex-ai-start.flex-ai-end.flex-ai-baseline.flex-ai-stretch.flex-ai-center.flex-vcenter
.flex-ac-start.flex-ac-end.flex-ac-center.flex-ac-between.flex-ac-around.flex-ac-stretch
Items
.flex-growN N: 1, 2, 3, 4, 5
.flex-shrinkN N: 1, 2, 3, 4, 5
.flex-orderN N: 0, 1, 2, 3, 4, 5
.flex-as-auto.flex-as-start.flex-as-end.flex-as-center.flex-as-baseline.flex-as-stretch
@media
.flex-MEDIA .flex-reverse-MEDIA.flex-orderN-MEDIA.flex-vcenter-MEDIA.flex-hcenter-MEDIA
.h100.h-auto
.hNpx.hNpx-min.hNpx-max N: 10, 16, 20... (variables.scss)
.layout-center
.layout-center-wrap > .layout-wrap
.layout-center-XXX XXX: small, phone, tablet (variables.scss, $layout_max_width_step_list)
.layout-center-wrap-XXX > .layout-wrap
a.hover-no-color:hovera.hover-no-underline:hover
.hover-no-color a:hover.hover-no-underline a:hover
.links-no-color a or .link-no-color a
.links-no-color-imp a or .link-no-color-imp a
.padN N: 0, 5, 6, 7, 10, ... (variables.scss)
.padN-t.padN-r.padN-b.padN-l.padN-tb.padN-rl
.pad0-t-MEDIA.pad0-r-MEDIA.pad0-b-MEDIA.pad0-l-MEDIA
.pad0-tb-MEDIA.pad0-rl-MEDIA
.marN N: 0, 5, 6, 7, 10, ... (variables.scss)
.marN-t.marN-r.marN-b.marN-l.marN-tb.marN-rl
.mar0-t-MEDIA.mar0-r-MEDIA.mar0-b-MEDIA.mar0-l-MEDIA
.mar0-tb-MEDIA.mar0-rl-MEDIA
.pos-fixed .pos-absolute.pos-relative
.posN-t.posN-r.posN-b.posN-l N: 0, 10 (variables.scss)
.z-indexN N: 1, 9, 99, 999, 9999 (variables.scss)
.rounded.roundedN N: 0, 5, 10 (variables.scss)
.b-circle
.t-reset
.bold.bold-normal
.italic.underline.strike.small-caps.capitalize.upper.lower
.t-right.t-left.t-center.t-justify
.t-right-MEDIA.t-left-MEDIA.t-center-MEDIA.t-justify-MEDIA
.t-nowrap .t-wrap.t-pre-wrap.t-break-word
.t-nowrap-MEDIA.t-wrap-MEDIA
.t-clip
.lh100.lh150.lh200
.lh100em.lh150em.lh200em
.t-mono.t-georgia.t-times.t-arial.t-verdana
.tN .tN-MEDIA N: 0.8, 0.9, 1, ... (variables.scss) (t100 = 1rem)
.tNem N: 0.8, 0.9, 1, ... (variables.scss) (t100em = 1em)
.tNpx N: 8, 9, 10, ... (variables.scss)
Classes «.visible-...» set display: block !important
.
Classes «.hide-...» set display: none !important
.
.visible-desktop.visible-desktop-tablet.visible-tablet.visible-phone.visible-tablet-phone
.hide-desktop.hide-desktop-tablet.hide-tablet.hide-phone.hide-tablet-phone
.visible-small.visible-medium.visible-large
.hide-small.hide-medium.hide-large
.w-max-layout
.w100-max.w-hide.w-auto
.w100-max-MEDIA.w-hide-MEDIA.w-auto-MEDIA
.wNpx.wNpx-min.wNpx-max N: 16, 24, 30, 32, ... (variables.scss)
.wN.wN-min.wN-max N: 0, 100, 5, 10, 15, ... (variables.scss)
.wN-MEDIA.wN-min-MEDIA.wN-max-MEDIA
BODY font, color, size.
Link (A).
Heading (H1..6) color, font, size.
Paragraph size, margins.
Pre, code, kbd, samp, var, blockquote.
Form elements: input, select, button, fieldset, textarea.
Class .button
for button. Class .light
for input elements.
.gr-gray400-100.gr-gray100-400
.icon0.icon-fa-normal
.icon-circle.icon-square.icon-rounded
img
img.circleimg.thumbnail
img.leftimg.rightimg.center
img.baseline
hr
hr.dashedhr.dottedhr.double
ul.li
ul.no-bulletul.listul.out-listul.inlineul.no-margin
ul.squareul.discul.circle
dl dt
.trans02-all.trans05-all
@media print.
.shadow
Table: table, th, td, thead, caption. Class .striped
for zebra table. Class .hover
for hover-effect.
.drop-cap
.t-label