Skip to content

Style more, type even less

A CSS framework for the web with abbreviated styles for whatever you build. Scan, build, and purge — simple as that.

"Why not just use vanilla CSS?"

CSS files are rarely well maintained. I've seen many things like lots of dead CSS, bad naming conventions, redundant classes, use of old syntax, and the list goes on.

Abbreviated utility classes

Yumma CSS uses an abbreviated naming for its utilities such as d-g, gtc-2 and g-4

Template tab Template tab
items.tsx
<div className="d-g g-4 gtc-2 ta-c tc-white">
<div className="bg-indigo p-4 rad-1">A</div>
<div className="bg-indigo p-4 rad-1">B</div>
<div className="bg-indigo p-4 rad-1">C</div>
</div>
Styles tab Styles tab
globals.css
.d-g {
display: grid;
}
.g-4 {
gap: 1rem;
}
.gtc-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
Ship what your project needs

With Yumma CLI, you'll never have to worry about unused CSS again!

Ready to give it a try?

We can't wait to see what you're going to build with Yumma CSS!

Get started