CSS Utilities

Style your HTML with simple, memorable class names. No CSS files needed!

The Pattern

Every Uizy class follows the same pattern:

[property]-[value]

For example: ta-c = Text Align Center

Quick Start

<div class="pa-4 br-2 sb-2 ta-c">
  A centered card with padding, rounded corners, and shadow
</div>

Available Utilities

Category	Prefix	Example	What it does
Display	d-	d-flex	Show/hide, flexbox, grid
Spacing	pa-, ma-	pa-4	Padding & margin
Grid	col-	col-6	12-column layout
Typography	ts-, ta-	ts-4 ta-c	Text size & alignment
Borders	br-, bd-	br-2 bd-a	Rounded corners & borders
Shadows	sb-	sb-4	Drop shadows
Extras	dp-, e-	dp-r e-p	Position, cursor, overflow

Responsive Classes

Add breakpoint prefixes to any class:

Prefix	Screen Size	Example
(none)	All screens	d-flex
-sm-	≥576px	d-sm-flex
-md-	≥768px	d-md-none
-lg-	≥992px	col-lg-6
-xl-	≥1200px	d-xl-block

<!-- Hidden on mobile, visible on tablet+ -->
<nav class="d-none d-md-flex">Desktop Nav</nav>

Common Abbreviations

Letter	Meaning
a	All
t, b, l, r	Top, Bottom, Left, Right
x, y	Horizontal, Vertical
p, m	Padding, Margin
c	Center
s	Start / Solid
e	End

Next Steps

• Display - Start with visibility and layout
• Spacing - Master padding and margin
• Cheatsheet - All classes at a glance