Skip to content

Yumma CSS 1.1

Yumma CSS

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:

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 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 Properties

fs-xs

font-size: 0.6rem;

New 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="dim-5 ...">5</div>
<div class="dim-10 ...">10</div>
<div class="dim-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, we 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:

Box Shadow

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);

Font Sizes

Class Properties

fs-xl

font-size: 3rem;

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

Class Properties

cols-*

columns: *;

Upgrade

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

Terminal window
npm install yummacss@latest

Community

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