Skip to content
Yumma CSS logo

Your next favorite frontend library

All the tools you need in one package, with abbreviated utility classes — goodbye, massive codebases!

So, why Yumma CSS?

Yumma CSS uses an abbreviated naming convention that’s similar to the regular CSS syntax.

index.html
<div class="max-w-96 ovf-h rad-3 b-1 bc-l-silver-6 bg-white p-6 bs-xs">
<div class="fg-1">
<h4 class="mb-2 fs-xxl fw-600 lh-1 tc-d-lead-2">Heading</h4>
<p class="mb-4 tc-l-lead-3 ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia velit fugit voluptates quod, placeat quam maxime earum voluptas provident, natus omnis saepe beatae vitae.</p>
<a class="fs-sm lh-1 tc-pink tdl-u" href="/">Link to page</a>
</div>
<button class="mb-4 mt-6 h-12 rad-2 bg-pink px-6 fw-600 tc-white h:bg-d-pink-1">Primary Button</button>
</div>

Abbreviated syntax

Abbreviated naming convention syntax for better maintainability and scalability.

Framework integrations

Add Yumma CSS to your favorite frameworks or try Yumma CSS Play.

Responsive design

Responsive breakpoint utilities and other utility variants to create complex layouts.

Components

Fully responsive components in your Yumma CSS projects — just copy and go!

Create a new project

To learn how to install Yumma CSS in your project framework, follow the step-by-step installation guide

Installing dependencies...
npm i yummacss@latest

See for yourself

Take a look at how Yumma CSS compares to other popular frameworks.

Learn more ↦

<div class="max-w-96 ovf-h rad-3 b-1 bc-l-silver-6 bg-white p-6 bs-xs">
<div class="fg-1">
<h4 class="mb-2 fs-xxl fw-600 lh-1 tc-d-lead-2">Heading</h4>
<p class="mb-4 tc-l-lead-3 ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia velit fugit voluptates quod, placeat quam maxime earum voluptas provident, natus omnis saepe beatae vitae.</p>
<a class="fs-sm lh-1 tc-pink tdl-u" href="/">Link to page</a>
</div>
<button class="mb-4 mt-6 h-12 rad-2 bg-pink px-6 fw-600 tc-white h:bg-d-pink-1">Primary Button</button>
</div>
Yumma CSS Built by Renildo Pereira

Yumma CSS is a utility-first CSS library that uses abbreviated naming conventions that follow regular CSS syntax to help you debug, scale, and maintain your markup better and get your application out the door faster.