Your next favorite frontend library

Why Yumma CSS?

Yumma CSS features an abbreviated naming convention that closely follows native CSS syntax. With a set of next-generation utilities, Yumma bundles all the powerful utilities you need into a lightweight, consistent module that integrates neatly into your design system.

Learn more

Preview

Code

<div class="max-w-96 ovf-h rad-2 b-1 bc-l-silver-6 bg-white p-6 bs-xs">
  <div class="fg-1">
    <h4 class="mb-2 fs-sm 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-b lh-1 tc-pink tdl-u">Link to page</a>
  </div>
  <button class="mb-4 mt-6 h-12 rad-1 bg-pink px-6 fw-600 tc-white h:bg-d-pink-1">Button</button>
</div>

Build your own design system.

Yumma provides a powerful selection of utilities, including Flexbox, Grid, and Box Model utilities, greatly simplifying the creation of a wide range of designs, from simple to complex.

Abbreviated syntax

Abbreviated naming convention syntax for better maintainability and scalability.

Learn more

Modifiers selectors

Spice up your page elements with some cool hover effects and more!

Learn more

Responsive design

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

Learn more

Components

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

Learn more

Trademark Policy

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.