Yumma CSS 1.2
I’ve been meaning to update the color palette of Yumma CSS for a while, so I’m excited to announce the new version Yumma CSS v1.2.0! It has a reworked color palette, new variations 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 color palette: New palette with more vivid colors.
- Extending media queries: 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
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 | max-height: fit-content; |
| max-w-* | max-width: fit-content; |
| min-w-* | max-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; |
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%; |
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 color palette
Previously, the colors weren’t as rich as I 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.
Extending media queries
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.