Yumma CSS 1.0: Utilities expansion, New color and more
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 utility classes and, more importantly, on improving the overall experience of using Yumma CSS.
What's new in Yumma CSS 1.0?
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
Align Items
This update is mostly about flexbox classes, which were a big limitation of Yumma CSS before. We’ve added a set of utilities to make Yumma CSS even more flexible.
| Class | Property |
|---|---|
| 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; |
Layout
As the layouts of the applications change, we think it’d be good to add more control over the page. We’ve listed a few of them below:
Display
| Class | Property |
|---|---|
| d-fr | display: flow-root; |
Float
| Class | Property |
|---|---|
| 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 | Property |
|---|---|
| ta-ja | text-align: justify-all; |
| ta-mp | text-align: match-parent; |
| tdl-o | text-decoration-line: overline; |
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 Color
We’re pretty sure nobody builds websites in dark mode using gray, right? The new lead color is great for creating single-theme apps.
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="d-*"></div><div class="dis-*"></div>We’re also going to tweak the syntax for the hover state classes. Basically, we’re 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.