Skip to content

Yumma CSS 1.0

Yumma CSS

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:

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.

Lead

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>

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>

Upgrade

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

Terminal window
npm i yummacss@latest

Community

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