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.
Cursor Utilities - What's new in Yumma CSS v2.1?
Borders & Outlines — What's new in Yumma CSS v2.1?
You might also want to check out the release notes. Anyway, these are the most noticeable changes:
- All-new utilities: New variant additions and improvements
- Base Style: Base styles changes
This is an incremental update that may contain bug fixes. Minor releases follow semantic versioning conventions. In other words, this should be an easy update for you.
All-new utilities
In this new update, We’ve made a few changes to the utilities in the Yumma CSS Library. You can now have more control over the layout and add more properties to a certain utility class.
Align Content
New baseline property for ac-* utility.
| Class | Properties |
|---|---|
| ac-b | align-content: baseline; |
Align Items
New baseline property for ai-* utility.
| Class | Properties |
|---|---|
| ai-b | align-items: baseline; |
Cursor
We’ve also added several new variants for the Cursor (c-*) utility classes.
| Class | Properties |
|---|---|
| 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
We’ve tweaked the base value for Border radius utility classes to give you more precise options and better overall layout control.
In this context, the base value is 0.25rem.
| Class | Properties |
|---|---|
| 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 | Properties |
|---|---|
| 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 | Properties |
|---|---|
| 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 | Properties |
|---|---|
| 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 | Properties |
|---|---|
| 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 | Properties |
|---|---|
| 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 | Properties |
|---|---|
| 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 | Properties |
|---|---|
| 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 | Properties |
|---|---|
| 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 | Properties |
|---|---|
| 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
New cursor: pointer default rule to <button> element.
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
Finally, We’ve updated the font size utilities and changed the base value. We’ve also added a base utility: fs-b, and a fs-9xl variant.
In this context, the base value is 0.75rem.
| Class | Properties |
|---|---|
| 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 | Properties |
|---|---|
| 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 upgrade your projects by getting the latest version of yummacss from npm:
npm install yummacss@latestCommunity
Join the Yumma CSS community! Share your experiences and help Yumma CSS grow and be the best it can be.