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.
- Button Style: Button styling improvements.
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 | Properties |
|---|---|
| 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
I’ve also expanded the Flex utility classes to include: auto, full, and half.
| Class | Properties |
|---|---|
| f-auto | flex: auto; |
| f-full | flex: 100%; |
| f-half | flex: 50%; |
Line Height
I’ve added some new classes for Line Height, which makes it easier to differentiate between text styles.
| Class | Properties |
|---|---|
| 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; |
<p class="lh-6 t-l-gray-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo laoreet sit amet cursus sit amet dictum sit amet. Ultrices eros in cursus turpis. Nec feugiat in fermentum posuere urna nec tincidunt praesent.</p>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. I thought I’d show you the difference between the old and new color palettes in Yumma CSS v1.2.
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. I’ve added media queries for the dim-*, max-dim-*, and min-dim-* classes.
Button style
I’ve made a few changes to the button content to make it easier to read.
<div class="ins h-1/1"> <button class="btn-pink t-white">Button</button></div><div class="ins h-1/1"> <button class="btn-pink t-white">Button</button></div>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.