Yumma CSS 1.0
After a few months of development, we're ready to release the first major version. In this release, we're focusing on implementing a few utilities and, more importantly, on improving the overall experience of using Yumma CSS.
This update might break your codebase, we highly suggest you checking out the release notes before upgrading.
All-new utilities
We're always looking for ways to improve Yumma CSS. In this release, we're adding a few new utilities to cover more of the CSS specs.
Align Items
| Class | Style |
|---|---|
ai-fs | align-items: flex-start; |
ai-fe | align-items: flex-end; |
jc-e | justify-content: end; |
jc-fs | justify-content: flex-start; |
jc-fe | justify-content: flex-end; |
jc-l | justify-content: left; |
jc-r | justify-content: right; |
jc-n | justify-content: normal; |
jc-s | justify-content: stretch; |
Display
| Class | Style |
|---|---|
d-fr | display: flow-root; |
Float
| Class | Style |
|---|---|
f-is | float: inline-start; |
f-ie | float: inline-end; |
Text Align
Yumma CSS v1.0 also introduces a whole new collection of advanced text formatting utilities for typographers.
| Class | Style |
|---|---|
ta-ja | text-align: justify-all; |
ta-mp | text-align: match-parent; |
tdl-o | text-decoration-line: overline; |
...and more
There are a lot more utilities in this release, but we're not going to list them all here. You can check the release notes though.
Viewport expansion
We're also going to add viewports for the Height and Width utilities, which will be a huge help with responsive designs. We can't wait to roll it out to the other utilities!
<div class="... h-10 md:h-auto md:w-auto w-10">...</div>New Lead color option
We're pretty sure nobody builds websites in dark mode using gray, right? The new lead color is great for creating single-theme apps.
Lead
Syntax changes
We're making some changes to the syntax for the Display utilities. Here's how it's going to work from now on.
<div class="dis-*"></div><div class="d-*"></div>We're also going to tweak the syntax for the hover state utilities. Basically, we're going to move them to the start of the utility h:* to make the code easier to understand.
<div class="bg-h-blue"></div><div class="h:bg-blue"></div>Upgrade
You can get the latest version of Yumma CSS from npm:
pnpm up yummacss