Blog/March 21, 2024

Yumma CSS 1.2

We've been planning to revamp the color palette of Yumma CSS for a while, happy to announce the new version Yumma CSS v1.2.0! It has a reworked color palette, new variants for dimension utilities, line-height utilities, and more.

Yumma CSS 1.2

All-new utilities

Added dozens of new utilities to Yumma CSS v1.2.0. Notable additions include:

Box Model

Introduced fit-content support for height, width, & dimension utilities.

UtilityProperty
h-fcheight: fit-content;
w-fcwidth: fit-content;
max-h-fcmax-height: fit-content;
min-h-fcmin-height: fit-content;
max-w-fcmax-width: fit-content;
min-w-fcmin-width: fit-content;
dim-1height: 0.25rem; width: 0.25rem;
max-dim-1max-height: 0.25rem; max-width: 0.25rem;
min-dim-1min-height: 0.25rem; min-width: 0.25rem;

Flex

UtilityProperty
f-autoflex: auto;
f-fullflex: 100%;
f-halfflex: 50%;

Line Height

UtilityProperty
lh-1line-height: 1;
lh-2line-height: 1.25;
lh-3line-height: 1.375;
lh-4line-height: 1.5;
lh-5line-height: 1.625;
lh-6line-height: 2;

Color rework

Reworked the color palette for improved contrast & visibility across various UI scenarios.

6
5
4
3
2
1
Base
1
2
3
4
5
6

Red

Orange

Yellow

Green

Teal

Cyan

Blue

Indigo

Violet

Pink

Gray

Lead

Added support for transparent across all color utilities.

<div class="bg-transparent">Transparent</div>

Added media query support for dimension utilities.

<div class="d-4 md:d-16"></div>

Upgrade

Get the latest version of Yumma CSS:

Terminal window
pnpm up yummacss@latest