Yumma CSS v1.0: Utilities expansion, New color and more
After a few months of development, I’m ready to release the first major version. In this release, I’m focusing on implementing a few utility classes and, more importantly, on improving the overall experience of using Yumma CSS.
You may also want to take a look at some of the release notes but, anyway, these are the most noticeable shifts:
- Utilities expansion: Margin X and Y, Padding X and Y, Align Content, and several more.
- Viewport expansion: Support for viewports for Height and Width utilities.
- New color: Introducing Lead Color.
- Syntax changes: Refactoring display and Hover utility classes.
This is a major update that introduces groundbreaking features. Major releases follow semantic versioning conventions. In other words, you probably need refactoring after upgrading.
Utilities expansion
This update is mostly about flexbox classes, which were a big limitation of Yumma CSS before. I’ve added a set of utilities to make Yumma CSS even more flexible.
| Class | Properties |
|---|---|
| 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; |
As the layouts of the applications change, I think it’d be good to add more control over the page. I’ve listed a few of them below:
| Class | Properties |
|---|---|
| d-fr | display: flow-root; |
| f-is | float: inline-start; |
| f-ie | float: inline-end; |
Yumma CSS v1.0 also introduces a whole new collection of advanced text formatting utilities for typographers.
| Class | Properties |
|---|---|
| ta-ja | text-align: justify-all; |
| ta-mp | text-align: match-parent; |
| tdl-o | text-decoration-line: overline; |
Viewport expansion
I’m also going to add viewports for the Height and Width utilities. This will be a huge help with responsive designs, and I 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 color
I’m sure nobody builds websites in dark mode using gray, right? The new lead color is perfect for creating single-theme apps.
Syntax changes
I’m changing the syntax for the Display utility class name because it wasn’t really consistent with the other classes.
<div class="d-*"></div><div class="dis-*"></div>I’m also going to tweak the syntax for the hover state classes. Basically, I’m going to move them to the start of the utility h:* to make the code easier to understand.
<div class="h:bg-blue"></div><div class="bg-h-blue"></div>Upgrade
You can upgrade your projects by getting the latest version of yummacss from npm:
npm i yummacss@latestCommunity
Join the Yumma CSS community! Share your experiences and help Yumma CSS grow and be the best it can be.