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.
This update shouldn't be difficult to upgrade, but you may want to check out the release notes.
All-new utilities
We added dozens of new utilities to Yumma CSS v1.2.0. Here are a few of the most notable ones:
Box Model
It's been a while since we've seen new utilities for height, width, and dimension. Well, here it is - fit-content!
| Class | Style |
|---|---|
h-fc | height: fit-content; |
w-fc | width: fit-content; |
max-h-fc | max-height: fit-content; |
min-h-fc | min-height: fit-content; |
max-w-* | max-width: fit-content; |
min-w-* | min-width: fit-content; |
dim-1 | height: 0.25rem;
width: 0.25rem; |
max-dim-1 | max-height: 0.25rem;
max-width: 0.25rem; |
min-dim-1 | min-height: 0.25rem;
min-width: 0.25rem; |
Flex
| Class | Style |
|---|---|
f-auto | flex: auto; |
f-full | flex: 100%; |
f-half | flex: 50%; |
Line Height
| Class | Style |
|---|---|
lh-1 | line-height: 1; |
lh-2 | line-height: 1.25; |
lh-3 | line-height: 1.375; |
lh-4 | line-height: 1.5; |
lh-5 | line-height: 1.625; |
lh-6 | line-height: 2; |
...and more
You can check the release notes for the full list of new utilities.
New colors
In the past, the colors weren't as rich as we wanted them to be, which was a bit of a limitation because colors with less contrast can go unnoticed in many scenarios.
Red
Orange
Yellow
Green
Teal
Cyan
Blue
Indigo
Violet
Pink
Gray
Lead
New transparent color variant
Oh, another thing, though it's not a technically color, we added support for transparent in all color utilities.
<div class="bg-transparent">Transparent</div>Dimension media query support
We added media query support for the Dimension utilities.
<div class="d-4 md:d-16"></div>Upgrade
You can get the latest version of Yumma CSS from npm:
pnpm up yummacss