SCSS Framework Reference

Categories

Responsive Prefixes

(none) — mobile md- ≥768px lg- ≥992px xl- ≥1200px

xl-* spacing uses get-vw() — scales with viewport at 1920px design width.

Pattern Classes

Classes marked {n} accept any number in their range. Use the interactive input inside each card to preview the exact class name.

SCSS Utility Class Reference

padding bottom margin top font size flex center display none border radius bg primary position absolute opacity overflow hidden

⟳

Loading class database…

Quick cheat-sheet

pb{n}padding-bottom pt{n}padding-top pl{n}padding-left pr{n}padding-right px{n}padding L+R py{n}padding T+B mb{n}margin-bottom mt{n}margin-top mx{n}margin L+R my{n}margin T+B f{n}font-size fw{1-9}font-weight ×100 lh{n}line-height ls{n}letter-spacing w{n}width % h{n}height % br{n}border-radius px gap-{n}gap ×4px

Prefix with md- (≥768px), lg- (≥992px), or xl- (≥1200px, vw)