Yumma CSS 1.1
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.
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.
| Class | Style |
|---|---|
| fs-xs | font-size: 0.6rem; |
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": 1200pxUtility 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 upgrade your projects by getting the latest version of yummacss from npm:
pnpm add yummacss@latestnpm i yummacss@latestyarn add yummacss@latest