Blog/October 11, 2024

Yumma CSS 2.1

More control over Border, Outline, & other, base styles & other improvements.

RPRenildo Pereira
Yumma CSS 2.1

All-new utilities

Yumma CSS v2.1.0 introduces several new utilities for improved design precision.

Align Content

UtilityProperty
ac-balign-content: baseline;

Align Items

UtilityProperty
ai-balign-items: baseline;

Cursor

UtilityProperty
c-crcol-resize
c-ddefault
c-nerne-resize
c-neswrnesw-resize
c-nonenone
c-nwrnw-resize
c-nwsernwse-resize
c-prprogress
c-rsrow-resize
c-srs-resize
c-serse-resize
c-swrsw-resize
c-wrw-resize
c-zizoom-in
c-zozoom-out

Border Radius

In this context, the base value is 0.25rem.

<div class="rad-[0/8]">...</div>
<div class="rad-full">...</div>
<div class="rad-half">...</div>

Flex

In this context, f-1 is a shorthand for flex: 1 1 0%;.

<div class="f-[1/8]">...</div>
<div class="f-auto">...</div>
<div class="f-none">...</div>

Border Width

In this context, values range from 1px to 8px.

<div class="b-[1/8]">...</div>

Outline Offset

In this context, the base value is 0.25rem.

<div class="oo-[0/4]">...</div>

Outline Width

In this context, the base value is 0.25rem.

<div class="ow-[0/4]">...</div>

Base styles

So buttons can act more like buttons.

button {
  cursor: pointer;
}

New font-size: inherit & font-weight: inherit default rules.

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-size: inherit;
  font-weight: inherit;
  overflow-wrap: break-word;
}

Font Size

Added a base utility: fs-b, & a fs-9xl utility variant.

In this context, the base value is 0.75rem.

UtilityProperty
fs-xsfont-size: 0.75rem;
fs-bfont-size: 1rem;
fs-smfont-size: 1.5rem;
fs-mdfont-size: 2.25rem;
fs-lgfont-size: 3rem;
fs-xlfont-size: 3.75rem;
fs-xxlfont-size: 4.5rem;
fs-3xlfont-size: 5.25rem;
fs-6xlfont-size: 6rem;
fs-9xlfont-size: 6.75rem;

Upgrade

Get the latest version of Yumma CSS:

Terminal window
pnpm up yummacss@latest