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] (https://github.com/yumma-lib/yumma-css/releases/tag/v1.2.0)! It has a reworked color palette, new variants for dimension classes, line height classes, and more.
You may also want to take a look at some of the release notes but, anyway these are the most noticeable shifts:
- All-new utilities: Heights, Widths, Flex, Box Shadow and Line Height.
- New Colors: New palette with more vivid colors.
- Dimension Modifiers: Dimension utility class media query extension.
This is an incremental update that may contain bug fixes. Minor releases follow semantic versioning conventions. In other words, this should be an easy update for you.
All-new utilities
Box Model
It’s been a while since we’ve seen new utility classes for height, width, and dimension. Well, here it is — fit-content!
| Class | 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-* | 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
We’ve added auto, full and half
| Class | Property |
|---|---|
| f-auto | flex: auto; |
| f-full | flex: 100%; |
| f-half | flex: 50%; |
Line Height
We’ve added some new classes for Line Height, which makes it easier to differentiate between text styles.
| Class | 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; |
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.
Transparent Support
Oh, another thing, though it’s not a color, Yumma CSS v1.2 now supports — transparent.
Dimension Modifiers
Yumma CSS is working on getting around this responsive issue, but for now, let’s focus on what we’ve got. We’ve added media queries for the dim-*, max-dim-*, and min-dim-* classes.
Upgrade
You can upgrade your projects by getting the latest version of yummacss from npm:
npm i yummacss@latestCommunity
Join the Yumma CSS community! Share your experiences and help Yumma CSS grow and be the best it can be.