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%; |
In this context, the base value is 4px.
| Class | Style |
|---|---|
| rad-0 | border-radius: 0px; |
| rad-1 | border-radius: 4px; |
| rad-2 | border-radius: 8px; |
| rad-3 | border-radius: 12px; |
| rad-4 | border-radius: 16px; |
| rad-5 | border-radius: 20px; |
| rad-6 | border-radius: 24px; |
| rad-7 | border-radius: 28px; |
| rad-8 | border-radius: 32px; |
| 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; |
In this context, the f-1 for example is a shorthand to flex: 1 1 0;
| Class | Style |
|---|---|
| f-1 | flex: 1; |
| f-2 | flex: 2; |
| f-3 | flex: 3; |
| f-4 | flex: 4; |
| f-5 | flex: 5; |
| f-6 | flex: 6; |
| f-7 | flex: 7; |
| f-8 | flex: 8; |
| 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; |
In this context, the sequence is not constant, starting from 0px to 14px.
| Class | Style |
|---|---|
| b-0 | border-width: 0px; |
| b-1 | border-width: 1px; |
| b-2 | border-width: 2px; |
| b-3 | border-width: 4px; |
| b-4 | border-width: 6px; |
| b-5 | border-width: 8px; |
| b-6 | border-width: 10px; |
| b-7 | border-width: 12px; |
| b-8 | border-width: 14px; |
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; |
In this context, the base value is 4px.
| Class | Style |
|---|---|
| oo-0 | outline-offset: 0px; |
| oo-1 | outline-offset: 4px; |
| oo-2 | outline-offset: 8px; |
| oo-3 | outline-offset: 12px; |
| oo-4 | outline-offset: 16px; |
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; |
In this context, the base value is 4px.
| Class | Style |
|---|---|
| ow-0 | outline-width: 0px; |
| ow-1 | outline-width: 4px; |
| ow-2 | outline-width: 8px; |
| ow-3 | outline-width: 12px; |
| ow-4 | outline-width: 16px; |
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.
In this context, the base value is 0.75rem.
| Class | Style |
|---|---|
| fs-xs | font-size: 0.75rem; |
| fs-b | font-size: 1rem; |
| fs-sm | font-size: 1.5rem; |
| fs-md | font-size: 2.25rem; |
| fs-lg | font-size: 3rem; |
| fs-xl | font-size: 3.75rem; |
| fs-xxl | font-size: 4.5rem; |
| fs-3xl | font-size: 5.25rem; |
| fs-6xl | font-size: 6rem; |
| fs-9xl | font-size: 6.75rem; |
In this context, the base value is 16px.
| Class | Style |
|---|---|
| fs-xs | font-size: 12px; |
| fs-sm | font-size: 14.4px; |
| fs-md | font-size: 16px; |
| fs-lg | font-size: 19.2px; |
| fs-xl | font-size: 23.04px; |
| fs-xxl | font-size: 30.08px; |
| fs-3xl | font-size: 35.52px; |
| fs-6xl | font-size: 58.56px; |
Upgrade
You can get the latest version of Yumma CSS from npm:
pnpm add yummacss@latestnpm i yummacss@latestyarn add yummacss@latest