Skip to content
Yumma CSS Logo Yumma CSS Logo Yumma CSS
Blog

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.

Get started Try the CLI
"Why not just use vanilla CSS?"

A lot of the time, CSS files are not well maintained. From bad naming conventions to redundant classes and old syntax, there's a lot to be said.

Abbreviated utility classes

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

Light boxes Dark boxes
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>
Light boxes Dark Boxes
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