Yumma CSS 1.1

Jan 24, 2024

This update isn’t going to introduce any major new features. It’s more about syntax changes. Anyway, here it is — Yumma CSS v1.1.0.

You may also want to take a look at some of the release notes but, anyway these are the most noticeable shifts:

Button transition: New button component animations.
Font sizes: New variant for font sizes.
New dim-*: New utilities for setting height and width simultaneously.
Utility syntax changes: Changing syntax for Box Shadow, Column and List Style Type utilities.

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.

Button transition

The btn-* component has been around for a while, and I thought it could use a refresh with Yumma v1.1. So, to make the button components a bit more fancy, you’ll now have transitions for button components with Yumma CSS v1.1.

Now
Then

<div class="ins">
        <button class="btn-pink t-white">Button</button>
      </div>

<div class="ins">
        <button class="btn-pink t-white">Button</button>
      </div>

Font sizes

I’m going to add a new class for font sizes in Yumma CSS 1.1. This is going to be a variant for the utility, specifically for the fs-xs size.

Class	Properties
fs-xs	`font-size: 0.6rem;`

New `dim-*` utilities

I’m excited to show you what I think is one of the coolest new additions. The new dim-* utility is here to replace Height and Width.

Now
Then

<div class="dim-5 ...">5</div>
<div class="dim-10 ...">10</div>
<div class="dim-20 ...">20</div>

<div class="h-5 w-5 w-5 ...">5</div>
<div class="h-10 h-10 w-10 ...">10</div>
<div class="h-20 h-20 w-20 ...">20</div>

Utility syntax changes

This update will bring a few increments and small changes to the syntax of some of the utilities, and here’s the list:

Starting with the breakpoints, Yumma CSS v1.1 changes the way you use your breakpoints for the better, no more nonsense class names.

$breakpoints: (
    "xsm": 0,
    "xs": 0,
    "sm": 480px,
    "md": 720px,
    "lg": 960px,
    "xlg": 1200px
    "xl": 1200px
);

Similar to the breakpoint change mentioned above, I thought it would make a lot of sense to take the same approach with the Box Shadow and Font Sizes utilities. Let’s look at the difference:

Class	Properties
bs-xs	`box-shadow: 1px 3px 5px -3px rgba(0,0,0,0.1);`
bs-xl	`box-shadow: 1px 3px 5px 2px rgba(0,0,0,0.1);`

Class	Properties
bs-xsm	`box-shadow: 1px 3px 5px -3px rgba(0,0,0,0.1);`
bs-xlg	`box-shadow: 1px 3px 5px 2px rgba(0,0,0,0.1);`

Font Sizes

Now
Then

Class	Properties
fs-xl	`font-size: 3rem;`

Class	Properties
fs-xlg	`font-size: 3rem;`

Last but not least, Yumma CSS v1.1 will include a small change to the syntax of the Columns utility.

Now
Then

Class	Properties
cols-*	`columns: *;`

Class	Properties
col-*	`columns: *;`

Upgrade

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

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.

GitHub If you experience any problems, please notify us at GitHub.

Discord Join our Discord for discussion, sharing, and learning.

Twitter Please follow us on Twitter to receive the latest updates.

YouTube Watch our screencasts on YouTube for the latest updates.