Cheatsheet

Core classes («unicss» folder)

blockbordercolorsflexgradientsheightlayoutlinkspadding-marginpositionroundedshadowtextvisiblewidthother

Main classes («main» folder)

baseblocksfontawesomeformsiconsimageslineslistsprinttable

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

unicss/_border.scss

.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
.bg-opPERCENT .hover-bg-opPERCENT PERCENT: 10, 20, 30 .. 90
.opacityPERCENT .opacityPERCENT PERCENT: 10, 20, 30 .. 90

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/_gradients.scss

.gr-gray400-100.gr-gray100-400

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/_shadow.scss

.shadow

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

unicss/_other.scss

.cursor-pointer
.drop-cap
.trans02-all.trans05-all
.lh100.lh150.lh200
.lh100em.lh150em.lh200em
.t-label
.va-ALIGN ALIGN: baseline, top, middle, bottom, text-top, text-bottom

main/_base.scss

BODY font, color, size.

Link (A).

Heading (H1..6) color, font, size.

Paragraph size, margins.

main/_blocks.scss

Pre, code, kbd, samp, var, blockquote.

main/_fontawesome.scss

Font Awesome.

main/_forms.scss

Form elements: input, select, button, fieldset, textarea.

Class .button for button. Class .light for input elements.

main/_icons.scss

.t-icon.t-icon-small.t-icon-medium.t-icon-large
.icon0
.icon-circle.icon-square.icon-rounded

main/_images.scss

img
img.circleimg.thumbnail
img.leftimg.rightimg.center
img.baseline

main/_lines.scss

hr
hr.dashedhr.dottedhr.double

main/_lists.scss

ul.li
ul.no-bulletul.listul.out-listul.inlineul.no-margin
ul.squareul.discul.circle
dl dt

main/_print.scss

@media print.

main/_table.scss

Table: table, th, td, thead, caption. Class .striped for zebra table. Class .hover for hover-effect.