Blog/January 3, 2024

Yumma CSS 1.0

New utilities. New Lead color option & QoL changes.

Yumma CSS 1.0

What's New in v1.0

The first major release. Seventeen new utility families, a shorter syntax for display & hover, & a new color for single-theme projects.

All-New Utilities

Seventeen families landed at once, covering layout, typography & interaction.

Layout & grid got align-content, align-self, justify-items, justify-self, flex-basis, flex-grow, grid-auto-columns, grid-auto-flow & grid-auto-rows.

Typography got font-family, list-style-type & text-decoration.

Interaction got appearance, caret-color, cursor, pointer-events & user-select.

New Values

Existing utilities picked up the values they were missing.

align-items gained flex-start & flex-end. justify-content gained end, flex-start, flex-end, left, right, normal & stretch.

<div className="ai-fs jc-s">…</div>

display gained flow-root.

<div className="d-fr">…</div>

float gained the inline directions, inline-start & inline-end.

<div className="f-is">…</div>
<div className="f-ie">…</div>

text-align gained justify-all & match-parent.

<p className="ta-ja">…</p>
<p className="ta-mp">…</p>

text-decoration-line gained overline.

<p className="tdl-o">…</p>

Axis Shorthands

Margin & padding got axis shorthands, so a matching pair of sides is one class instead of two.

<div className="ml-4 mr-4 pt-2 pb-2">…</div><div className="mx-4 py-2">…</div>

Viewport Expansion

Height & width utilities accept viewport values.

<div className="w-10 h-10 … md:w-auto md:h-auto">…</div>

New Lead Color Palette

A neutral built for single-theme applications.

1
2
3
4
5
6
Base
7
8
9
10
11
12

Lead

<div className="bg-lead"></div>

Syntax Changes

Display

display drops to a single letter, matching the property-initials rule the rest of the framework already followed.

<div className="dis-f"></div><div className="d-f"></div>

Hover Variants

Hover moves from the middle of the class to the front, so the variant reads first & groups predictably.

<div className="bg-h-blue"></div><div className="h:bg-blue"></div>

Removals

break-all & keep-all are gone from overflow-wrap, the nav-l component was dropped, & the greet() helper is now showVer().