📄 CSS Framework Cheatsheet

Все классы в одном месте · s/m/l/xl — адаптивные брейкпоинты (640/768/1024/1280px)

🔘 Buttons
.button .button_label .button_primary .button_success .button_warning .button_danger .button_white .button_black .button_clear .button_dropdown .buttons-group
🎨 Colors & Backgrounds
.color-primary .color-success .color-warning .color-danger .color-error .color-black .color-white .color-grey
.bg-primary .bg-success .bg-warning .bg-danger .bg-error .bg-black .bg-white .bg-grey
🧩 Flex + s/m/l/xl
Включение
.flex.s:flex.m:flex.l:flex.xl:flex
Направление / Wrap
.fr.fc.fw.fnws/m/l/xl:*
Align-items
.ais.aifs.aic.aife
Justify-content
.jcfs.jcc.jcfe.jcsb.jcsa.jcse
Flex-колонки
.c1/2.c1/3.c2/3.c1/4.c3/4.c1/6.c5/6.c1/12.c11/12+ s/m/l/xl
📐 Grid + s/m/l/xl
.grid.g1.g2.g3.g4.g5.g6.g7.g8.g9.g10.g11.g12
Колонки (span)
.c1.c2.c3.c12
Диапазон
.c1/12.c2/12.c5/11.c6/12+ s/m/l/xl
📏 Flow & Vertical Space
.flow.flow.s0.flow.s10+ s/m/l/xl
.space0.space10+ s/m/l/xl
.sticky+ s/m/l/xl
⚙️ Утилиты
.antialiased .container .unselectable .unclickable .upper .lower .capitalize .nowrap .hyphens .pointer .toe .oh .fix .rel .abs .ins .break-word .visually-hidden .invisible .scroll-responsive .fullscreen .no-print .touch-show .touch-hide
Line Clamp
.lc1.lc2.lc3.lc4.lc5+ s/m/l/xl
Object-fit
.fit-none.fit-cover.fit-contain+ s/m/l/xl
👁️ Show / Hide s/m/l/xl
.hidden.hidden-next.block.inline.inline-block
📐 Margin + s/m/l/xl
.m0.m12.m0n.m12n
.mx0.mx12.my0.my12
.mt0.mt12.mb0.mb12
.ml0.ml12.mr0.mr12
.ma.mxa.mya.mta.mba.mla.mra
📦 Padding + s/m/l/xl
.p0.p12.px0.px12.py0.py12
.pt0.pt12.pb0.pb12
.pl0.pl12.pr0.pr12
🔲 Gap + s/m/l/xl
.gap0.gap12.gapx0.gapx12.gapy0.gapy12
📍 Position offsets + s/m/l/xl
.t0.t12.t0n.t12n
.b0.b12.b0n.b12n
.l0.l12.l0n.l12n
.r0.r12.r0n.r12n
.z0.z12+ s/m/l/xl
🌀 Opacity
.op0.op1.op2.op3.op4.op5.op6.op7.op8.op9.op10
📐 Ratio + s/m/l/xl
.ratio1x1.ratio2x1.ratio3x1.ratio4x1 .ratio3x2.ratio4x3.ratio16x9 .ratio1x2.ratio1x3.ratio1x4 .ratio2x3.ratio3x4.ratio9x16
📏 Width + s/m/l/xl
.max
.w10.w190 step 10
.w200.w380 step 20
.w400.w1600 step 100
.max10.max1600 (аналогично)
.min10.min1600 (аналогично)
📌 Text align + s/m/l/xl
.al.ar.ac.aj
🎨 Border Radius, Shadow, Order
.br0.br12.br100+ s/m/l/xl
.sh0.sh10+ s/m/l/xl
.o0.o12+ s/m/l/xl
🔷 Icon
.icon.icon.s10.icon.s60 step 2 + m/l
🔗 Links
aa.linka.hovera.active a.link_nolinea.link_underline a.link_dasheda.link_dotteda.link_wavy
📜 Scroll
.scroll .scroll_contain .scroll_x-proximity .scroll_x-mandatory
📝 Typography
.h1.h6.mono.italic.strike
.fs10.fs19 step 1 + m/l/xl
.fs20.fs22.fs100 step 2 + m/l/xl
.fw100.fw900 step 100 + m/l/xl
.ls0.ls4+ m/l/xl
.lh0.lh9+ m/l/xl (1.0–1.9)
🧠 Примечание: .s: — 640px, .m: — 768px, .l: — 1024px, .xl: — 1280px.
📐 Отступы .m0–m12 используют CSS-переменные --space-0--space-12.
🎯 .c1/2 = ширина 50%, .c1/3 ≈ 33.33%, .c2/3 ≈ 66.66% и т.д.