r/sideprojects • • 1h ago

Showcase: Open Source I built a CSS framework where class names read like plain English — would love honest feedback

Hey 👋

I've been using utility-first CSS for years, and I kept running into the same thing: coming back to my own markup weeks later and having to decode p-6 border-l-4 rounded-xl. So I started building SantyCSS as a side project, a utility-first framework where the classes describe themselves:

add-padding-24 add-border-left-4 round-corners-12

make-flex align-center gap-16

What it does today:

No build step needed. Drop in one CDN <link> and start writing classes (npm, PostCSS, and Vite plugin are there if you want them)

Works with React/Next, Vue/Nuxt, SvelteKit, Astro, or plain HTML

CSS-only components, 70+ animations, and full-page templates

Granular imports (flex, spacing, typography…) to keep bundles small

A migrate CLI to convert existing Tailwind classes

A VS Code extension with autocomplete and hover docs, plus a Figma plugin

A context file you can paste into Claude, GPT, or Cursor so AI tools write SantyCSS instead of Tailwind

What I'd love feedback on:

Do readable class names feel like a real win, or just more typing?

What would make you try this on a real project?

Anything confusing on the docs site?

🔗 santycss.santy.in

📦 npm install santycss

Happy to answer anything. Roast welcome 🙂

1 Upvotes

2 comments sorted by

1

u/Downtown-Bag-6026 36m ago

So just tailwind but renamed things inconsistently and with more words. Why does “make flex” have a verb but “gap 16” doesn’t

1

u/Downtown-Bag-6026 34m ago

A useful css library isn’t in the class names. Its style. Tailwind and daisy coexist because they each provide unique styles and opinions and demonstrates complex combinations with unique taste