Yumma CSS 2.1
More control over Border, Outline, & other, base styles & other improvements.
All-New Utilities
Yumma CSS v2.1.0 introduces several new utilities for improved design precision.
Align Content
| Utility | Property |
|---|---|
ac-b | align-content: baseline; |
Align Items
| Utility | Property |
|---|---|
ai-b | align-items: baseline; |
Cursor
| Utility | Property |
|---|---|
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. ```html
</TabsPanel>
<TabsPanel value="v2.0">
In this context, the base value is `4px`.
```html
<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%;. ```html
</TabsPanel>
<TabsPanel value="v2.0">
In this context, `f-1` is a shorthand for `flex: 1 1 0;`.
```html
<div class="f-[1/8]">…</div>
<div class="f-none">…</div>
Border Width
In this context, values range from 1px to 8px. ```html
</TabsPanel>
<TabsPanel value="v2.0">
In this context, values range from `0px` to `14px`.
```html
<div class="b-[0/8]">…</div>
Outline Offset
In this context, the base value is 0.25rem. ```html
</TabsPanel>
<TabsPanel value="v2.0">
In this context, the base value is `4px`.
```html
<div class="oo-[0/4]">…</div>
Outline Width
In this context, the base value is 0.25rem. ```html
</TabsPanel>
<TabsPanel value="v2.0">
In this context, the base value is `4px`.
```html
<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. | Utility | Property |
|---------|--------------------| | 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; |
Upgrade
Check the Upgrading Guide for a full list of utility renames & removals.
pnpm up yummacss@latest