Шпаргалка по UniCSS (Cheatsheet)

Core classes («unicss» folder)

block border colors flex height layout links padding-margin position rounded text visible width

Main classes («main» folder)

base blocks fontawesome forms gradients icons images lines lists other print shadow table transition

Reduction in the text

COLOR: white, black, red, ... (q.v. variables.scss)
MEDIA: tablet, phone, ... (q.v. variables.scss)
$layout_max_width: max width layout (q.v. variables.scss)

unicss/_block.scss

.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)

unicss/_colors.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

unicss/_flex.scss

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

unicss/_height.scss

.h100.h-auto
.hNpx.hNpx-min.hNpx-max N: 10, 16, 20... (variables.scss)

unicss/_layout.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

unicss/_links.scss

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

unicss/_padding-margin.scss

.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

unicss/_position.scss

.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)

unicss/_rounded.scss

.rounded.roundedN N: 0, 5, 10 (variables.scss)
.b-circle

unicss/_text.scss

.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)

unicss/_visible.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

unicss/_width.scss

.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