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.
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.
| Utility | Property |
|---|---|
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-fc | max-width: fit-content; |
min-w-fc | 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
| Utility | Property |
|---|---|
f-auto | flex: auto; |
f-full | flex: 100%; |
f-half | flex: 50%; |
Line Height
| Utility | Property |
|---|---|
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; |
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:
pnpm up yummacss@latest