Yumma CSS 1.1

This update shouldn't be difficult to upgrade, but you may want to check out the release notes.

Button transition

The btn-* component has been around for a while, and we 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.

Font sizes

We're going to add a new class for font sizes in Yumma CSS 1.1. It'll be a variant for the utility, specifically for the fs-xs size.

Dimension utilities

We're looking forward to showing you what we think is one of the coolest new additions. The new dim-* utility is here to replace Height and Width.

<div class="h-12 h-12"></div>
<div class="dim-12"></div>

Media query changes

We're going to be dropping the xsm and xlg breakpoints in favor of xs and xl.

"xsm": 0,
"xlg": 1200px
"xs": 0,
"xl": 1200px

Utility changes

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

Box Shadow

<div class="bs-xsm"></div>
<div class="bs-xlg"></div>
<div class="bs-xs"></div>
<div class="bs-xl"></div>

Font Sizes

<div class="fs-xlg"></div>
<div class="fs-xl"></div>

Columns

<div class="col-2"></div>
<div class="cols-2"></div>

Upgrade

You can get the latest version of Yumma CSS from npm:

pnpm up yummacss