Skip to content

Yumma CSS 1.2

Yumma CSS

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:

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.

1
2
3
4
5
6
Base
1
2
3
4
5
6
Blue
Indigo

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>

Upgrade

You can upgrade your projects by getting the latest version of yummacss from npm:

Terminal window
npm i yummacss@latest

Community

Join the Yumma CSS community! Share your experiences and help Yumma CSS grow and be the best it can be.