Philosophy

If you know CSS, you already know this framework. If the classes below look foreign to you, that's probably a CSS problem, not a framework problem.

Most developers who "know CSS" have been writing framework classes so long they've forgotten the actual properties.

<!-- 35 chars -->
<h1 class="d-if ai-c mbs-6 ml-4 c-black fw-600">Blog<h1>

<!-- 60 chars -->
<div class="inline-flex items-center mbs-6 ml-4 text-black font-semibold">Blog</div>

Abbreviations, not aliases

Most utility frameworks introduce a vocabulary layer. Class names represent CSS values through human-readable aliases.

With aliases, you learn the framework first, then the framework translates to CSS.

With abbreviations, you already know CSS, the class name is just a shorter version of what you already know.

Isn't this just a shorter syntax for the same thing?

Not quite. The difference is in the mental model.

Alias-based frameworks optimize for readability, font-semibold reads like English. But readability comes at a cost: you need to memorize a separate vocabulary on top of CSS. font-semibold doesn't tell you it's font-weight: 600. items-center doesn't tell you it's align-items. The framework becomes a translation layer between you and CSS.

Yumma CSS removes that layer. The abbreviation rules are consistent and predictable. Once you know that jc is justify-content and c is center, you know jc-c forever, and you also know jc-fe (flex-end), jc-sb (space-between), and every other value without looking anything up.

There is no vocabulary to memorize on top of CSS. There is only CSS, abbreviated.

One class. One property. No surprises.

Every class in Yumma CSS maps to exactly one CSS property.

.ai-c {
  align-items: center;
}

.c-white {
  color: #ffffff;
}

.d-f {
  display: flex;
}

.fw-600 {
  font-weight: 600;
}

What you see is what you get. No multi-property shorthands hidden behind a single class. No surprises in the output. If you see ai-c in the markup, you know exactly what CSS it produces.

Smaller markup, same output

Fewer characters per class means less noise in your markup. Complex components stay readable as they grow.

<button class="px-3 py-2 bg-indigo h:bg-indigo-8 bc-indigo-7 c-white br-md bw-1 fw-600 c-p">
  Add to Cart
</button>

When Yumma CSS fits

• You know CSS well and want class names that reflect it directly.
• You prefer explicit values (fw-600) over semantic aliases (font-semibold).
• You want predictable output without indirections.
• You're building a design system where consistency and transparency matter.
• You want a smaller, faster mental model.

When it may not fit

• You rely heavily on a large pre-built component ecosystem.
• Your team is deeply familiar with another framework's vocabulary and the switching cost outweighs the benefit.
• You need official multi-framework UI kits out of the box.