Yumma CSS 2.1
We've got another new one coming your way! This new version is going to give you a lot more control over Border, Outline, and other utilities. It'll also improve the default rules in the base styles, along with a few other things.
This update shouldn't be difficult to upgrade, but you may want to check out the release notes.
All-new utilities
We're adding a few more utilities to Yumma CSS v2.1.0. Here are a few of the most notable ones:
Align Content
| Class | Style |
|---|---|
ac-b | align-content: baseline; |
Align Items
| Class | Style |
|---|---|
ai-b | align-items: baseline; |
Cursor
| Class | Style |
|---|---|
c-cr | col-resize |
c-d | default |
c-ner | ne-resize |
c-neswr | nesw-resize |
c-none | none |
c-nwr | nw-resize |
c-nwser | nwse-resize |
c-pr | progress |
c-rs | row-resize |
c-sr | s-resize |
c-ser | se-resize |
c-swr | sw-resize |
c-wr | w-resize |
c-zi | zoom-in |
c-zo | zoom-out |
Border Radius
In this context, the base value is 0.25rem.
| Class | Style |
|---|---|
rad-0 | border-radius: 0rem; |
rad-1 | border-radius: 0.25rem; |
rad-2 | border-radius: 0.5rem; |
rad-3 | border-radius: 0.75rem; |
rad-4 | border-radius: 1rem; |
rad-5 | border-radius: 1.25rem; |
rad-6 | border-radius: 1.5rem; |
rad-7 | border-radius: 1.75rem; |
rad-8 | border-radius: 2rem; |
rad-full | border-radius: 100%; |
rad-half | border-radius: 50%; |
Flex
In this context, the f-1 for example is a shorthand to flex: 1 1 0%;
| Class | Style |
|---|---|
f-1 | flex: 1 1 0%; |
f-2 | flex: 2 2 0%; |
f-3 | flex: 3 3 0%; |
f-4 | flex: 4 4 0%; |
f-5 | flex: 5 5 0%; |
f-6 | flex: 6 6 0%; |
f-7 | flex: 7 7 0%; |
f-8 | flex: 8 8 0%; |
f-auto | flex: 1 1 auto; |
f-none | flex: none; |
Border Width
In this context, the sequence is always constant, starting from 1px to 8px.
| Class | Style |
|---|---|
b-0 | border-width: 0px; |
b-1 | border-width: 1px; |
b-2 | border-width: 2px; |
b-3 | border-width: 3px; |
b-4 | border-width: 4px; |
b-5 | border-width: 5px; |
b-6 | border-width: 6px; |
b-7 | border-width: 7px; |
b-8 | border-width: 8px; |
Outline Offset
In this context, the base value is 0.25rem.
| Class | Style |
|---|---|
oo-0 | outline-offset: 0px; |
oo-1 | outline-offset: 1px; |
oo-2 | outline-offset: 2px; |
oo-3 | outline-offset: 3px; |
oo-4 | outline-offset: 4px; |
Outline Width
In this context, the base value is 0.25rem.
| Class | Style |
|---|---|
ow-0 | outline-width: 0px; |
ow-1 | outline-width: 1px; |
ow-2 | outline-width: 2px; |
ow-3 | outline-width: 3px; |
ow-4 | outline-width: 4px; |
Base styles
So buttons can act more like buttons.
button { cursor: pointer;}New font-size: inherit and font-weight: inherit default rules.
h1,h2,h3,h4,h5,h6,p { font-size: inherit; font-weight: inherit; overflow-wrap: break-word;}Font Size
We added a base utility: fs-b, and a fs-9xl utility variant.
Upgrade
You can get the latest version of Yumma CSS from npm:
pnpm up yummacss