Yumma CSS 2.0: New utilities, changes and more
Yes, it’s happening again! We’re excited to announce the release of Yumma CSS v2.0.0! This new update is full of new features, big improvements, a redesigned source code, and of course, some important fixes.
What's new in Yumma CSS v2.0?
You might also want to check out the release notes. Anyway, these are the most noticeable changes:
- All-new Utilities: Silver color, Gap, Spacing, and much more
- Base Styles: Base styles are now optional
- Responsive Breakpoints: Media query utilities support extended
- Container Rules: New container utility rules
This is a major update that introduces groundbreaking features. Major releases follow semantic versioning conventions. In other words, you probably need refactoring after upgrading.
All new utilities
As part of our standard procedure for each new grand release, we implement a range of new customization utilities.
Accent Color
This latest release is no exception, as it introduces the Accent Color utilities.
| Class | Properties |
|---|---|
| ac-l-red-6 | accent-color: #efb1b1; |
| ac-l-red-5 | accent-color: #eb9e9e; |
| ac-l-red-4 | accent-color: #e78b8b; |
| ac-l-red-3 | accent-color: #e37777; |
| ac-l-red-2 | accent-color: #df6464; |
| ac-l-red-1 | accent-color: #db5050; |
| ac-red | accent-color: #d73d3d; |
| ac-d-red-1 | accent-color: #c23737; |
| ac-d-red-2 | accent-color: #ac3131; |
| ac-d-red-3 | accent-color: #972b2b; |
| ac-d-red-4 | accent-color: #812525; |
| ac-d-red-5 | accent-color: #6c1f1f; |
| ac-d-red-6 | accent-color: #561818; |
| ac-l-orange-6 | accent-color: #f3c3a1; |
| ac-l-orange-5 | accent-color: #f0b48a; |
| ac-l-orange-4 | accent-color: #eca472; |
| ac-l-orange-3 | accent-color: #e9955b; |
| ac-l-orange-2 | accent-color: #e68643; |
| ac-l-orange-1 | accent-color: #e3772c; |
| ac-orange | accent-color: #e06814; |
| ac-d-orange-1 | accent-color: #ca5e12; |
| ac-d-orange-2 | accent-color: #b35310; |
| ac-d-orange-3 | accent-color: #9d490e; |
| ac-d-orange-4 | accent-color: #863e0c; |
| ac-d-orange-5 | accent-color: #70340a; |
| ac-d-orange-6 | accent-color: #5a2a08; |
| ac-l-yellow-6 | accent-color: #edd99c; |
| ac-l-yellow-5 | accent-color: #e9d083; |
| ac-l-yellow-4 | accent-color: #e5c76a; |
| ac-l-yellow-3 | accent-color: #e0bd51; |
| ac-l-yellow-2 | accent-color: #dcb439; |
| ac-l-yellow-1 | accent-color: #d7aa20; |
| ac-yellow | accent-color: #d3a107; |
| ac-d-yellow-1 | accent-color: #be9106; |
| ac-d-yellow-2 | accent-color: #a98106; |
| ac-d-yellow-3 | accent-color: #947105; |
| ac-d-yellow-4 | accent-color: #7f6104; |
| ac-d-yellow-5 | accent-color: #6a5104; |
| ac-d-yellow-6 | accent-color: #544003; |
| ac-l-green-6 | accent-color: #a5e0bb; |
| ac-l-green-5 | accent-color: #8fd8aa; |
| ac-l-green-4 | accent-color: #79d099; |
| ac-l-green-3 | accent-color: #62c888; |
| ac-l-green-2 | accent-color: #4cc177; |
| ac-l-green-1 | accent-color: #35b966; |
| ac-green | accent-color: #1fb155; |
| ac-d-green-1 | accent-color: #1c9f4d; |
| ac-d-green-2 | accent-color: #198e44; |
| ac-d-green-3 | accent-color: #167c3c; |
| ac-d-green-4 | accent-color: #136a33; |
| ac-d-green-5 | accent-color: #10592b; |
| ac-d-green-6 | accent-color: #0c4722; |
| ac-l-teal-6 | accent-color: #a0dbd5; |
| ac-l-teal-5 | accent-color: #89d3ca; |
| ac-l-teal-4 | accent-color: #71cabf; |
| ac-l-teal-3 | accent-color: #59c1b5; |
| ac-l-teal-2 | accent-color: #41b8aa; |
| ac-l-teal-1 | accent-color: #2aafa0; |
| ac-teal | accent-color: #12a695; |
| ac-d-teal-1 | accent-color: #109586; |
| ac-d-teal-2 | accent-color: #0e8577; |
| ac-d-teal-3 | accent-color: #0d7468; |
| ac-d-teal-4 | accent-color: #0b6459; |
| ac-d-teal-5 | accent-color: #09534b; |
| ac-d-teal-6 | accent-color: #07423c; |
| ac-l-cyan-6 | accent-color: #9bdbe5; |
| ac-l-cyan-5 | accent-color: #82d2df; |
| ac-l-cyan-4 | accent-color: #69c8d9; |
| ac-l-cyan-3 | accent-color: #50bfd2; |
| ac-l-cyan-2 | accent-color: #37b6cc; |
| ac-l-cyan-1 | accent-color: #1eadc5; |
| ac-cyan | accent-color: #05a4bf; |
| ac-d-cyan-1 | accent-color: #0594ac; |
| ac-d-cyan-2 | accent-color: #048399; |
| ac-d-cyan-3 | accent-color: #047386; |
| ac-d-cyan-4 | accent-color: #036273; |
| ac-d-cyan-5 | accent-color: #035260; |
| ac-d-cyan-6 | accent-color: #02424c; |
| ac-l-blue-6 | accent-color: #aec8f1; |
| ac-l-blue-5 | accent-color: #9abaee; |
| ac-l-blue-4 | accent-color: #86aceb; |
| ac-l-blue-3 | accent-color: #729ee7; |
| ac-l-blue-2 | accent-color: #5d91e4; |
| ac-l-blue-1 | accent-color: #4983e0; |
| ac-blue | accent-color: #3575dd; |
| ac-d-blue-1 | accent-color: #3069c7; |
| ac-d-blue-2 | accent-color: #2a5eb1; |
| ac-d-blue-3 | accent-color: #25529b; |
| ac-d-blue-4 | accent-color: #204685; |
| ac-d-blue-5 | accent-color: #1b3b6f; |
| ac-d-blue-6 | accent-color: #152f58; |
| ac-l-indigo-6 | accent-color: #bdbef0; |
| ac-l-indigo-5 | accent-color: #acaeec; |
| ac-l-indigo-4 | accent-color: #9b9de8; |
| ac-l-indigo-3 | accent-color: #8b8de4; |
| ac-l-indigo-2 | accent-color: #7a7de1; |
| ac-l-indigo-1 | accent-color: #6a6cdd; |
| ac-indigo | accent-color: #595cd9; |
| ac-d-indigo-1 | accent-color: #5053c3; |
| ac-d-indigo-2 | accent-color: #474aae; |
| ac-d-indigo-3 | accent-color: #3e4098; |
| ac-d-indigo-4 | accent-color: #353782; |
| ac-d-indigo-5 | accent-color: #2d2e6d; |
| ac-d-indigo-6 | accent-color: #242557; |
| ac-l-violet-6 | accent-color: #cbbaf1; |
| ac-l-violet-5 | accent-color: #bea9ee; |
| ac-l-violet-4 | accent-color: #b198eb; |
| ac-l-violet-3 | accent-color: #a487e7; |
| ac-l-violet-2 | accent-color: #9775e4; |
| ac-l-violet-1 | accent-color: #8a64e0; |
| ac-violet | accent-color: #7d53dd; |
| ac-d-violet-1 | accent-color: #714bc7; |
| ac-d-violet-2 | accent-color: #6442b1; |
| ac-d-violet-3 | accent-color: #583a9b; |
| ac-d-violet-4 | accent-color: #4b3285; |
| ac-d-violet-5 | accent-color: #3f2a6f; |
| ac-d-violet-6 | accent-color: #322158; |
| ac-l-pink-6 | accent-color: #eeb3d0; |
| ac-l-pink-5 | accent-color: #eaa0c5; |
| ac-l-pink-4 | accent-color: #e58db9; |
| ac-l-pink-3 | accent-color: #e17aad; |
| ac-l-pink-2 | accent-color: #dd67a1; |
| ac-l-pink-1 | accent-color: #d85496; |
| ac-pink | accent-color: #d4418a; |
| ac-d-pink-1 | accent-color: #bf3b7c; |
| ac-d-pink-2 | accent-color: #aa346e; |
| ac-d-pink-3 | accent-color: #942e61; |
| ac-d-pink-4 | accent-color: #7f2753; |
| ac-d-pink-5 | accent-color: #6a2145; |
| ac-d-pink-6 | accent-color: #551a37; |
| ac-l-gray-6 | accent-color: #bfc2c7; |
| ac-l-gray-5 | accent-color: #b0b3b9; |
| ac-l-gray-4 | accent-color: #a0a4ab; |
| ac-l-gray-3 | accent-color: #90959d; |
| ac-l-gray-2 | accent-color: #80858f; |
| ac-l-gray-1 | accent-color: #707681; |
| ac-gray | accent-color: #606773; |
| ac-d-gray-1 | accent-color: #565d68; |
| ac-d-gray-2 | accent-color: #4d525c; |
| ac-d-gray-3 | accent-color: #434851; |
| ac-d-gray-4 | accent-color: #3a3e45; |
| ac-d-gray-5 | accent-color: #30343a; |
| ac-d-gray-6 | accent-color: #26292e; |
| ac-l-lead-6 | accent-color: #b2b2b8; |
| ac-l-lead-5 | accent-color: #9f9fa7; |
| ac-l-lead-4 | accent-color: #8c8c95; |
| ac-l-lead-3 | accent-color: #797983; |
| ac-l-lead-2 | accent-color: #656571; |
| ac-l-lead-1 | accent-color: #525260; |
| ac-lead | accent-color: #3f3f4e; |
| ac-d-lead-1 | accent-color: #393946; |
| ac-d-lead-2 | accent-color: #32323e; |
| ac-d-lead-3 | accent-color: #2c2c37; |
| ac-d-lead-4 | accent-color: #26262f; |
| ac-d-lead-5 | accent-color: #202027; |
| ac-d-lead-6 | accent-color: #19191f; |
| ac-l-silver-6 | accent-color: #e5e7e9; |
| ac-l-silver-5 | accent-color: #dfe1e3; |
| ac-l-silver-4 | accent-color: #d9dadd; |
| ac-l-silver-3 | accent-color: #d2d4d8; |
| ac-l-silver-2 | accent-color: #ccced2; |
| ac-l-silver-1 | accent-color: #c5c8cd; |
| ac-silver | accent-color: #bfc2c7; |
| ac-d-silver-1 | accent-color: #acafb3; |
| ac-d-silver-2 | accent-color: #999b9f; |
| ac-d-silver-3 | accent-color: #86888b; |
| ac-d-silver-4 | accent-color: #737477; |
| ac-d-silver-5 | accent-color: #606164; |
| ac-d-silver-6 | accent-color: #4c4e50; |
We’re also adding a new color to the color palette — Silver.
Aspect Ratio
The Aspect Ratio is a great addition, especially for image elements.
| Class | Property |
|---|---|
| ar-s | aspect-ratio: 1/1; |
| ar-l | aspect-ratio: 16/9; |
| ar-auto | aspect-ratio: auto; |
Backdrop Filter
You can now apply cool effects to your components thanks to the Backdrop Filter utilities.
| Class | Property |
|---|---|
| bf-b-none | backdrop-filter: blur(0px); |
| bf-b-xs | backdrop-filter: blur(4px); |
| bf-b-sm | backdrop-filter: blur(8px); |
| bf-b-md | backdrop-filter: blur(16px); |
| bf-b-lg | backdrop-filter: blur(32px); |
| bf-b-xl | backdrop-filter: blur(64px); |
Border
We’re also going to be adding some new Border utilities.
Border Collapse
We’re finally adding the Border Collapse utilities to create better tables in your site with Yumma CSS.
| Class | Property |
|---|---|
| bc-c | border-collapse: collapse; |
| bc-s | border-collapse: separate; |
Border Style
The new Border Style utilities let you change how borders look on different elements.
| Class | Property |
|---|---|
| b-none | border-style: none; |
| b-d | border-style: dashed; |
| b-h | border-style: hidden; |
| b-s | border-style: solid; |
Caption Side
We’re also adding some handy features for tables, like Caption Side.
| Class | Property |
|---|---|
| cs-b | caption-side: bottom; |
| cs-t | caption-side: top; |
Font Style
You can now change the Font Style of text elements.
| Class | Property |
|---|---|
| fs-i | font-style: italic; |
| fs-n | font-style: normal; |
Gap
The Gap utilities aren’t necessarily new, but they are different in older versions. Gap was designed for responsive layouts, not for adding gaps between elements.
| Class | Property |
|---|---|
| g-0 | gap: 0rem; |
| g-1 | gap: 0.25rem; |
| g-2 | gap: 0.5rem; |
| g-3 | gap: 0.75rem; |
| g-4 | gap: 1rem; |
| g-5 | gap: 1.25rem; |
| g-6 | gap: 1.5rem; |
| g-7 | gap: 1.75rem; |
| g-8 | gap: 2rem; |
| g-9 | gap: 2.25rem; |
| g-10 | gap: 2.5rem; |
| g-11 | gap: 2.75rem; |
| g-12 | gap: 3rem; |
| g-13 | gap: 3.25rem; |
| g-14 | gap: 3.5rem; |
| g-15 | gap: 3.75rem; |
| g-16 | gap: 4rem; |
Grid
If you’re looking for more control over your grid layouts, this new update includes new utility classes to control Grid Column and Grid Row properties.
Grid Column
| Class | Property |
|---|---|
| gc-s-1 | grid-column: span 1 / span 1; |
| gc-s-2 | grid-column: span 2 / span 2; |
| gc-s-3 | grid-column: span 3 / span 3; |
| gc-s-4 | grid-column: span 4 / span 4; |
| gc-s-5 | grid-column: span 5 / span 5; |
| gc-s-6 | grid-column: span 6 / span 6; |
| gc-s-7 | grid-column: span 7 / span 7; |
| gc-s-8 | grid-column: span 8 / span 8; |
| gc-s-9 | grid-column: span 9 / span 9; |
| gc-s-10 | grid-column: span 10 / span 10; |
| gc-s-11 | grid-column: span 11 / span 11; |
| gc-s-12 | grid-column: span 12 / span 12; |
| gc-s-13 | grid-column: span 13 / span 13; |
| gc-s-14 | grid-column: span 14 / span 14; |
| gc-s-15 | grid-column: span 15 / span 15; |
| gc-s-16 | grid-column: span 16 / span 16; |
Grid Column End
| Class | Property |
|---|---|
| gce-0 | grid-column-end: 0; |
| gce-1 | grid-column-end: 1; |
| gce-2 | grid-column-end: 2; |
| gce-3 | grid-column-end: 3; |
| gce-4 | grid-column-end: 4; |
| gce-5 | grid-column-end: 5; |
| gce-6 | grid-column-end: 6; |
| gce-7 | grid-column-end: 7; |
| gce-8 | grid-column-end: 8; |
| gce-9 | grid-column-end: 9; |
| gce-10 | grid-column-end: 10; |
| gce-11 | grid-column-end: 11; |
| gce-12 | grid-column-end: 12; |
| gce-13 | grid-column-end: 13; |
| gce-14 | grid-column-end: 14; |
| gce-15 | grid-column-end: 15; |
| gce-16 | grid-column-end: 16; |
Grid Column Start
| Class | Property |
|---|---|
| gcs-0 | grid-column-start: 0; |
| gcs-1 | grid-column-start: 1; |
| gcs-2 | grid-column-start: 2; |
| gcs-3 | grid-column-start: 3; |
| gcs-4 | grid-column-start: 4; |
| gcs-5 | grid-column-start: 5; |
| gcs-6 | grid-column-start: 6; |
| gcs-7 | grid-column-start: 7; |
| gcs-8 | grid-column-start: 8; |
| gcs-9 | grid-column-start: 9; |
| gcs-10 | grid-column-start: 10; |
| gcs-11 | grid-column-start: 11; |
| gcs-12 | grid-column-start: 12; |
| gcs-13 | grid-column-start: 13; |
| gcs-14 | grid-column-start: 14; |
| gcs-15 | grid-column-start: 15; |
| gcs-16 | grid-column-start: 16; |
Grid Row Span
| Class | Property |
|---|---|
| gr-s-1 | grid-row: span 1 / span 1; |
| gr-s-2 | grid-row: span 2 / span 2; |
| gr-s-3 | grid-row: span 3 / span 3; |
| gr-s-4 | grid-row: span 4 / span 4; |
| gr-s-5 | grid-row: span 5 / span 5; |
| gr-s-6 | grid-row: span 6 / span 6; |
| gr-s-7 | grid-row: span 7 / span 7; |
| gr-s-8 | grid-row: span 8 / span 8; |
| gr-s-9 | grid-row: span 9 / span 9; |
| gr-s-10 | grid-row: span 10 / span 10; |
| gr-s-11 | grid-row: span 11 / span 11; |
| gr-s-12 | grid-row: span 12 / span 12; |
| gr-s-13 | grid-row: span 13 / span 13; |
| gr-s-14 | grid-row: span 14 / span 14; |
| gr-s-15 | grid-row: span 15 / span 15; |
| gr-s-16 | grid-row: span 16 / span 16; |
Grid Row End
| Class | Property |
|---|---|
| gre-0 | grid-row-end: 0; |
| gre-1 | grid-row-end: 1; |
| gre-2 | grid-row-end: 2; |
| gre-3 | grid-row-end: 3; |
| gre-4 | grid-row-end: 4; |
| gre-5 | grid-row-end: 5; |
| gre-6 | grid-row-end: 6; |
| gre-7 | grid-row-end: 7; |
| gre-8 | grid-row-end: 8; |
| gre-9 | grid-row-end: 9; |
| gre-10 | grid-row-end: 10; |
| gre-11 | grid-row-end: 11; |
| gre-12 | grid-row-end: 12; |
| gre-13 | grid-row-end: 13; |
| gre-14 | grid-row-end: 14; |
| gre-15 | grid-row-end: 15; |
| gre-16 | grid-row-end: 16; |
Grid Row Start
| Class | Property |
|---|---|
| grs-0 | grid-row-start: 0; |
| grs-1 | grid-row-start: 1; |
| grs-2 | grid-row-start: 2; |
| grs-3 | grid-row-start: 3; |
| grs-4 | grid-row-start: 4; |
| grs-5 | grid-row-start: 5; |
| grs-6 | grid-row-start: 6; |
| grs-7 | grid-row-start: 7; |
| grs-8 | grid-row-start: 8; |
| grs-9 | grid-row-start: 9; |
| grs-10 | grid-row-start: 10; |
| grs-11 | grid-row-start: 11; |
| grs-12 | grid-row-start: 12; |
| grs-13 | grid-row-start: 13; |
| grs-14 | grid-row-start: 14; |
| grs-15 | grid-row-start: 15; |
| grs-16 | grid-row-start: 16; |
Object
We’re also including the Object Fit and Object Position utility classes.
Object Fit
| Class | Property |
|---|---|
| of-c | object-fit: cover; |
| of-f | object-fit: fill; |
| of-none | object-fit: none; |
| of-sd | object-fit: scale-down; |
Object Position
| Class | Property |
|---|---|
| op-b | object-position: bottom; |
| op-c | object-position: center; |
| op-lb | object-position: left bottom; |
| op-left | object-position: left; |
| op-lt | object-position: left top; |
| op-r | object-position: right; |
| op-rb | object-position: right bottom; |
| op-rt | object-position: right top; |
| op-t | object-position: top; |
Outline
On top of the customization utilities we’ve already talked about, Yumma CSS 2.0 also includes Outline Color, Outline Offset, Outline Style, and Outline Width utility classes.
Outline Color
| Class | Properties |
|---|---|
| oc-l-red-6 | outline-color: #efb1b1; |
| oc-l-red-5 | outline-color: #eb9e9e; |
| oc-l-red-4 | outline-color: #e78b8b; |
| oc-l-red-3 | outline-color: #e37777; |
| oc-l-red-2 | outline-color: #df6464; |
| oc-l-red-1 | outline-color: #db5050; |
| oc-red | outline-color: #d73d3d; |
| oc-d-red-1 | outline-color: #c23737; |
| oc-d-red-2 | outline-color: #ac3131; |
| oc-d-red-3 | outline-color: #972b2b; |
| oc-d-red-4 | outline-color: #812525; |
| oc-d-red-5 | outline-color: #6c1f1f; |
| oc-d-red-6 | outline-color: #561818; |
| oc-l-orange-6 | outline-color: #f3c3a1; |
| oc-l-orange-5 | outline-color: #f0b48a; |
| oc-l-orange-4 | outline-color: #eca472; |
| oc-l-orange-3 | outline-color: #e9955b; |
| oc-l-orange-2 | outline-color: #e68643; |
| oc-l-orange-1 | outline-color: #e3772c; |
| oc-orange | outline-color: #e06814; |
| oc-d-orange-1 | outline-color: #ca5e12; |
| oc-d-orange-2 | outline-color: #b35310; |
| oc-d-orange-3 | outline-color: #9d490e; |
| oc-d-orange-4 | outline-color: #863e0c; |
| oc-d-orange-5 | outline-color: #70340a; |
| oc-d-orange-6 | outline-color: #5a2a08; |
| oc-l-yellow-6 | outline-color: #edd99c; |
| oc-l-yellow-5 | outline-color: #e9d083; |
| oc-l-yellow-4 | outline-color: #e5c76a; |
| oc-l-yellow-3 | outline-color: #e0bd51; |
| oc-l-yellow-2 | outline-color: #dcb439; |
| oc-l-yellow-1 | outline-color: #d7aa20; |
| oc-yellow | outline-color: #d3a107; |
| oc-d-yellow-1 | outline-color: #be9106; |
| oc-d-yellow-2 | outline-color: #a98106; |
| oc-d-yellow-3 | outline-color: #947105; |
| oc-d-yellow-4 | outline-color: #7f6104; |
| oc-d-yellow-5 | outline-color: #6a5104; |
| oc-d-yellow-6 | outline-color: #544003; |
| oc-l-green-6 | outline-color: #a5e0bb; |
| oc-l-green-5 | outline-color: #8fd8aa; |
| oc-l-green-4 | outline-color: #79d099; |
| oc-l-green-3 | outline-color: #62c888; |
| oc-l-green-2 | outline-color: #4cc177; |
| oc-l-green-1 | outline-color: #35b966; |
| oc-green | outline-color: #1fb155; |
| oc-d-green-1 | outline-color: #1c9f4d; |
| oc-d-green-2 | outline-color: #198e44; |
| oc-d-green-3 | outline-color: #167c3c; |
| oc-d-green-4 | outline-color: #136a33; |
| oc-d-green-5 | outline-color: #10592b; |
| oc-d-green-6 | outline-color: #0c4722; |
| oc-l-teal-6 | outline-color: #a0dbd5; |
| oc-l-teal-5 | outline-color: #89d3ca; |
| oc-l-teal-4 | outline-color: #71cabf; |
| oc-l-teal-3 | outline-color: #59c1b5; |
| oc-l-teal-2 | outline-color: #41b8aa; |
| oc-l-teal-1 | outline-color: #2aafa0; |
| oc-teal | outline-color: #12a695; |
| oc-d-teal-1 | outline-color: #109586; |
| oc-d-teal-2 | outline-color: #0e8577; |
| oc-d-teal-3 | outline-color: #0d7468; |
| oc-d-teal-4 | outline-color: #0b6459; |
| oc-d-teal-5 | outline-color: #09534b; |
| oc-d-teal-6 | outline-color: #07423c; |
| oc-l-cyan-6 | outline-color: #9bdbe5; |
| oc-l-cyan-5 | outline-color: #82d2df; |
| oc-l-cyan-4 | outline-color: #69c8d9; |
| oc-l-cyan-3 | outline-color: #50bfd2; |
| oc-l-cyan-2 | outline-color: #37b6cc; |
| oc-l-cyan-1 | outline-color: #1eadc5; |
| oc-cyan | outline-color: #05a4bf; |
| oc-d-cyan-1 | outline-color: #0594ac; |
| oc-d-cyan-2 | outline-color: #048399; |
| oc-d-cyan-3 | outline-color: #047386; |
| oc-d-cyan-4 | outline-color: #036273; |
| oc-d-cyan-5 | outline-color: #035260; |
| oc-d-cyan-6 | outline-color: #02424c; |
| oc-l-blue-6 | outline-color: #aec8f1; |
| oc-l-blue-5 | outline-color: #9abaee; |
| oc-l-blue-4 | outline-color: #86aceb; |
| oc-l-blue-3 | outline-color: #729ee7; |
| oc-l-blue-2 | outline-color: #5d91e4; |
| oc-l-blue-1 | outline-color: #4983e0; |
| oc-blue | outline-color: #3575dd; |
| oc-d-blue-1 | outline-color: #3069c7; |
| oc-d-blue-2 | outline-color: #2a5eb1; |
| oc-d-blue-3 | outline-color: #25529b; |
| oc-d-blue-4 | outline-color: #204685; |
| oc-d-blue-5 | outline-color: #1b3b6f; |
| oc-d-blue-6 | outline-color: #152f58; |
| oc-l-indigo-6 | outline-color: #bdbef0; |
| oc-l-indigo-5 | outline-color: #acaeec; |
| oc-l-indigo-4 | outline-color: #9b9de8; |
| oc-l-indigo-3 | outline-color: #8b8de4; |
| oc-l-indigo-2 | outline-color: #7a7de1; |
| oc-l-indigo-1 | outline-color: #6a6cdd; |
| oc-indigo | outline-color: #595cd9; |
| oc-d-indigo-1 | outline-color: #5053c3; |
| oc-d-indigo-2 | outline-color: #474aae; |
| oc-d-indigo-3 | outline-color: #3e4098; |
| oc-d-indigo-4 | outline-color: #353782; |
| oc-d-indigo-5 | outline-color: #2d2e6d; |
| oc-d-indigo-6 | outline-color: #242557; |
| oc-l-violet-6 | outline-color: #cbbaf1; |
| oc-l-violet-5 | outline-color: #bea9ee; |
| oc-l-violet-4 | outline-color: #b198eb; |
| oc-l-violet-3 | outline-color: #a487e7; |
| oc-l-violet-2 | outline-color: #9775e4; |
| oc-l-violet-1 | outline-color: #8a64e0; |
| oc-violet | outline-color: #7d53dd; |
| oc-d-violet-1 | outline-color: #714bc7; |
| oc-d-violet-2 | outline-color: #6442b1; |
| oc-d-violet-3 | outline-color: #583a9b; |
| oc-d-violet-4 | outline-color: #4b3285; |
| oc-d-violet-5 | outline-color: #3f2a6f; |
| oc-d-violet-6 | outline-color: #322158; |
| oc-l-pink-6 | outline-color: #eeb3d0; |
| oc-l-pink-5 | outline-color: #eaa0c5; |
| oc-l-pink-4 | outline-color: #e58db9; |
| oc-l-pink-3 | outline-color: #e17aad; |
| oc-l-pink-2 | outline-color: #dd67a1; |
| oc-l-pink-1 | outline-color: #d85496; |
| oc-pink | outline-color: #d4418a; |
| oc-d-pink-1 | outline-color: #bf3b7c; |
| oc-d-pink-2 | outline-color: #aa346e; |
| oc-d-pink-3 | outline-color: #942e61; |
| oc-d-pink-4 | outline-color: #7f2753; |
| oc-d-pink-5 | outline-color: #6a2145; |
| oc-d-pink-6 | outline-color: #551a37; |
| oc-l-gray-6 | outline-color: #bfc2c7; |
| oc-l-gray-5 | outline-color: #b0b3b9; |
| oc-l-gray-4 | outline-color: #a0a4ab; |
| oc-l-gray-3 | outline-color: #90959d; |
| oc-l-gray-2 | outline-color: #80858f; |
| oc-l-gray-1 | outline-color: #707681; |
| oc-gray | outline-color: #606773; |
| oc-d-gray-1 | outline-color: #565d68; |
| oc-d-gray-2 | outline-color: #4d525c; |
| oc-d-gray-3 | outline-color: #434851; |
| oc-d-gray-4 | outline-color: #3a3e45; |
| oc-d-gray-5 | outline-color: #30343a; |
| oc-d-gray-6 | outline-color: #26292e; |
| oc-l-lead-6 | outline-color: #b2b2b8; |
| oc-l-lead-5 | outline-color: #9f9fa7; |
| oc-l-lead-4 | outline-color: #8c8c95; |
| oc-l-lead-3 | outline-color: #797983; |
| oc-l-lead-2 | outline-color: #656571; |
| oc-l-lead-1 | outline-color: #525260; |
| oc-lead | outline-color: #3f3f4e; |
| oc-d-lead-1 | outline-color: #393946; |
| oc-d-lead-2 | outline-color: #32323e; |
| oc-d-lead-3 | outline-color: #2c2c37; |
| oc-d-lead-4 | outline-color: #26262f; |
| oc-d-lead-5 | outline-color: #202027; |
| oc-d-lead-6 | outline-color: #19191f; |
Outline Offset
| Class | Property |
|---|---|
| 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 Style
| Class | Property |
|---|---|
| os-none | outline-style: none; |
| os-d | outline-style: dashed; |
| os-h | outline-style: hidden; |
| os-s | outline-style: solid; |
Outline Width
| Class | Property |
|---|---|
| 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; |
Spacing
We’re also adding new Spacing utilities, similar to Tailwind CSS. These utilities work a bit differently, in that they use a unique syntax. This means you don’t need to specify margin or padding if they have the same value.
Spacing X
| Class | Property |
|---|---|
| s-x-0 | margin-left: 0rem;
margin-right: 0rem; |
| s-x-1 | margin-left: 0.25rem;
margin-right: 0.25rem; |
| s-x-2 | margin-left: 0.5rem;
margin-right: 0.5rem; |
| s-x-3 | margin-left: 0.75rem;
margin-right: 0.75rem; |
| s-x-4 | margin-left: 1rem;
margin-right: 1rem; |
| s-x-5 | margin-left: 1.25rem;
margin-right: 1.25rem; |
| s-x-6 | margin-left: 1.5rem;
margin-right: 1.5rem; |
| s-x-7 | margin-left: 1.75rem;
margin-right: 1.75rem; |
| s-x-8 | margin-left: 2rem;
margin-right: 2rem; |
| s-x-9 | margin-left: 2.25rem;
margin-right: 2.25rem; |
| s-x-10 | margin-left: 2.5rem;
margin-right: 2.5rem; |
| s-x-11 | margin-left: 2.75rem;
margin-right: 2.75rem; |
| s-x-12 | margin-left: 3rem;
margin-right: 3rem; |
| s-x-13 | margin-left: 3.25rem;
margin-right: 3.25rem; |
| s-x-14 | margin-left: 3.5rem;
margin-right: 3.5rem; |
| s-x-15 | margin-left: 3.75rem;
margin-right: 3.75rem; |
| s-x-16 | margin-left: 4rem;
margin-right: 4rem; |
| s-x-17 | margin-left: 4.25rem;
margin-right: 4.25rem; |
| s-x-18 | margin-left: 4.5rem;
margin-right: 4.5rem; |
| s-x-19 | margin-left: 4.75rem;
margin-right: 4.75rem; |
| s-x-20 | margin-left: 5rem;
margin-right: 5rem; |
| s-x-21 | margin-left: 5.25rem;
margin-right: 5.25rem; |
| s-x-22 | margin-left: 5.5rem;
margin-right: 5.5rem; |
| s-x-23 | margin-left: 5.75rem;
margin-right: 5.75rem; |
| s-x-24 | margin-left: 6rem;
margin-right: 6rem; |
| s-x-25 | margin-left: 6.25rem;
margin-right: 6.25rem; |
| s-x-26 | margin-left: 6.5rem;
margin-right: 6.5rem; |
| s-x-27 | margin-left: 6.75rem;
margin-right: 6.75rem; |
| s-x-28 | margin-left: 7rem;
margin-right: 7rem; |
| s-x-29 | margin-left: 7.25rem;
margin-right: 7.25rem; |
| s-x-30 | margin-left: 7.5rem;
margin-right: 7.5rem; |
| s-x-31 | margin-left: 7.75rem;
margin-right: 7.75rem; |
| s-x-32 | margin-left: 8rem;
margin-right: 8rem; |
| s-x-33 | margin-left: 8.25rem;
margin-right: 8.25rem; |
| s-x-34 | margin-left: 8.5rem;
margin-right: 8.5rem; |
| s-x-35 | margin-left: 8.75rem;
margin-right: 8.75rem; |
| s-x-36 | margin-left: 9rem;
margin-right: 9rem; |
| s-x-37 | margin-left: 9.25rem;
margin-right: 9.25rem; |
| s-x-38 | margin-left: 9.5rem;
margin-right: 9.5rem; |
| s-x-39 | margin-left: 9.75rem;
margin-right: 9.75rem; |
| s-x-40 | margin-left: 10rem;
margin-right: 10rem; |
| s-x-41 | margin-left: 10.25rem;
margin-right: 10.25rem; |
| s-x-42 | margin-left: 10.5rem;
margin-right: 10.5rem; |
| s-x-43 | margin-left: 10.75rem;
margin-right: 10.75rem; |
| s-x-44 | margin-left: 11rem;
margin-right: 11rem; |
| s-x-45 | margin-left: 11.25rem;
margin-right: 11.25rem; |
| s-x-46 | margin-left: 11.5rem;
margin-right: 11.5rem; |
| s-x-47 | margin-left: 11.75rem;
margin-right: 11.75rem; |
| s-x-48 | margin-left: 12rem;
margin-right: 12rem; |
| s-x-49 | margin-left: 12.25rem;
margin-right: 12.25rem; |
| s-x-50 | margin-left: 12.5rem;
margin-right: 12.5rem; |
| s-x-51 | margin-left: 12.75rem;
margin-right: 12.75rem; |
| s-x-52 | margin-left: 13rem;
margin-right: 13rem; |
| s-x-53 | margin-left: 13.25rem;
margin-right: 13.25rem; |
| s-x-54 | margin-left: 13.5rem;
margin-right: 13.5rem; |
| s-x-55 | margin-left: 13.75rem;
margin-right: 13.75rem; |
| s-x-56 | margin-left: 14rem;
margin-right: 14rem; |
| s-x-57 | margin-left: 14.25rem;
margin-right: 14.25rem; |
| s-x-58 | margin-left: 14.5rem;
margin-right: 14.5rem; |
| s-x-59 | margin-left: 14.75rem;
margin-right: 14.75rem; |
| s-x-60 | margin-left: 15rem;
margin-right: 15rem; |
| s-x-61 | margin-left: 15.25rem;
margin-right: 15.25rem; |
| s-x-62 | margin-left: 15.5rem;
margin-right: 15.5rem; |
| s-x-63 | margin-left: 15.75rem;
margin-right: 15.75rem; |
| s-x-64 | margin-left: 16rem;
margin-right: 16rem; |
| s-x-65 | margin-left: 16.25rem;
margin-right: 16.25rem; |
| s-x-66 | margin-left: 16.5rem;
margin-right: 16.5rem; |
| s-x-67 | margin-left: 16.75rem;
margin-right: 16.75rem; |
| s-x-68 | margin-left: 17rem;
margin-right: 17rem; |
| s-x-69 | margin-left: 17.25rem;
margin-right: 17.25rem; |
| s-x-70 | margin-left: 17.5rem;
margin-right: 17.5rem; |
| s-x-71 | margin-left: 17.75rem;
margin-right: 17.75rem; |
| s-x-72 | margin-left: 18rem;
margin-right: 18rem; |
| s-x-73 | margin-left: 18.25rem;
margin-right: 18.25rem; |
| s-x-74 | margin-left: 18.5rem;
margin-right: 18.5rem; |
| s-x-75 | margin-left: 18.75rem;
margin-right: 18.75rem; |
| s-x-76 | margin-left: 19rem;
margin-right: 19rem; |
| s-x-77 | margin-left: 19.25rem;
margin-right: 19.25rem; |
| s-x-78 | margin-left: 19.5rem;
margin-right: 19.5rem; |
| s-x-79 | margin-left: 19.75rem;
margin-right: 19.75rem; |
| s-x-80 | margin-left: 20rem;
margin-right: 20rem; |
| s-x-81 | margin-left: 20.25rem;
margin-right: 20.25rem; |
| s-x-82 | margin-left: 20.5rem;
margin-right: 20.5rem; |
| s-x-83 | margin-left: 20.75rem;
margin-right: 20.75rem; |
| s-x-84 | margin-left: 21rem;
margin-right: 21rem; |
| s-x-85 | margin-left: 21.25rem;
margin-right: 21.25rem; |
| s-x-86 | margin-left: 21.5rem;
margin-right: 21.5rem; |
| s-x-87 | margin-left: 21.75rem;
margin-right: 21.75rem; |
| s-x-88 | margin-left: 22rem;
margin-right: 22rem; |
| s-x-89 | margin-left: 22.25rem;
margin-right: 22.25rem; |
| s-x-90 | margin-left: 22.5rem;
margin-right: 22.5rem; |
| s-x-91 | margin-left: 22.75rem;
margin-right: 22.75rem; |
| s-x-92 | margin-left: 23rem;
margin-right: 23rem; |
| s-x-93 | margin-left: 23.25rem;
margin-right: 23.25rem; |
| s-x-94 | margin-left: 23.5rem;
margin-right: 23.5rem; |
| s-x-95 | margin-left: 23.75rem;
margin-right: 23.75rem; |
| s-x-96 | margin-left: 24rem;
margin-right: 24rem; |
| s-x-97 | margin-left: 24.25rem;
margin-right: 24.25rem; |
| s-x-98 | margin-left: 24.5rem;
margin-right: 24.5rem; |
| s-x-99 | margin-left: 24.75rem;
margin-right: 24.75rem; |
| s-x-100 | margin-left: 25rem;
margin-right: 25rem; |
Spacing Y
| Class | Property |
|---|---|
| s-y-0 | margin-top: 0rem;
margin-bottom: 0rem; |
| s-y-1 | margin-top: 0.25rem;
margin-bottom: 0.25rem; |
| s-y-2 | margin-top: 0.5rem;
margin-bottom: 0.5rem; |
| s-y-3 | margin-top: 0.75rem;
margin-bottom: 0.75rem; |
| s-y-4 | margin-top: 1rem;
margin-bottom: 1rem; |
| s-y-5 | margin-top: 1.25rem;
margin-bottom: 1.25rem; |
| s-y-6 | margin-top: 1.5rem;
margin-bottom: 1.5rem; |
| s-y-7 | margin-top: 1.75rem;
margin-bottom: 1.75rem; |
| s-y-8 | margin-top: 2rem;
margin-bottom: 2rem; |
| s-y-9 | margin-top: 2.25rem;
margin-bottom: 2.25rem; |
| s-y-10 | margin-top: 2.5rem;
margin-bottom: 2.5rem; |
| s-y-11 | margin-top: 2.75rem;
margin-bottom: 2.75rem; |
| s-y-12 | margin-top: 3rem;
margin-bottom: 3rem; |
| s-y-13 | margin-top: 3.25rem;
margin-bottom: 3.25rem; |
| s-y-14 | margin-top: 3.5rem;
margin-bottom: 3.5rem; |
| s-y-15 | margin-top: 3.75rem;
margin-bottom: 3.75rem; |
| s-y-16 | margin-top: 4rem;
margin-bottom: 4rem; |
| s-y-17 | margin-top: 4.25rem;
margin-bottom: 4.25rem; |
| s-y-18 | margin-top: 4.5rem;
margin-bottom: 4.5rem; |
| s-y-19 | margin-top: 4.75rem;
margin-bottom: 4.75rem; |
| s-y-20 | margin-top: 5rem;
margin-bottom: 5rem; |
| s-y-21 | margin-top: 5.25rem;
margin-bottom: 5.25rem; |
| s-y-22 | margin-top: 5.5rem;
margin-bottom: 5.5rem; |
| s-y-23 | margin-top: 5.75rem;
margin-bottom: 5.75rem; |
| s-y-24 | margin-top: 6rem;
margin-bottom: 6rem; |
| s-y-25 | margin-top: 6.25rem;
margin-bottom: 6.25rem; |
| s-y-26 | margin-top: 6.5rem;
margin-bottom: 6.5rem; |
| s-y-27 | margin-top: 6.75rem;
margin-bottom: 6.75rem; |
| s-y-28 | margin-top: 7rem;
margin-bottom: 7rem; |
| s-y-29 | margin-top: 7.25rem;
margin-bottom: 7.25rem; |
| s-y-30 | margin-top: 7.5rem;
margin-bottom: 7.5rem; |
| s-y-31 | margin-top: 7.75rem;
margin-bottom: 7.75rem; |
| s-y-32 | margin-top: 8rem;
margin-bottom: 8rem; |
| s-y-33 | margin-top: 8.25rem;
margin-bottom: 8.25rem; |
| s-y-34 | margin-top: 8.5rem;
margin-bottom: 8.5rem; |
| s-y-35 | margin-top: 8.75rem;
margin-bottom: 8.75rem; |
| s-y-36 | margin-top: 9rem;
margin-bottom: 9rem; |
| s-y-37 | margin-top: 9.25rem;
margin-bottom: 9.25rem; |
| s-y-38 | margin-top: 9.5rem;
margin-bottom: 9.5rem; |
| s-y-39 | margin-top: 9.75rem;
margin-bottom: 9.75rem; |
| s-y-40 | margin-top: 10rem;
margin-bottom: 10rem; |
| s-y-41 | margin-top: 10.25rem;
margin-bottom: 10.25rem; |
| s-y-42 | margin-top: 10.5rem;
margin-bottom: 10.5rem; |
| s-y-43 | margin-top: 10.75rem;
margin-bottom: 10.75rem; |
| s-y-44 | margin-top: 11rem;
margin-bottom: 11rem; |
| s-y-45 | margin-top: 11.25rem;
margin-bottom: 11.25rem; |
| s-y-46 | margin-top: 11.5rem;
margin-bottom: 11.5rem; |
| s-y-47 | margin-top: 11.75rem;
margin-bottom: 11.75rem; |
| s-y-48 | margin-top: 12rem;
margin-bottom: 12rem; |
| s-y-49 | margin-top: 12.25rem;
margin-bottom: 12.25rem; |
| s-y-50 | margin-top: 12.5rem;
margin-bottom: 12.5rem; |
| s-y-51 | margin-top: 12.75rem;
margin-bottom: 12.75rem; |
| s-y-52 | margin-top: 13rem;
margin-bottom: 13rem; |
| s-y-53 | margin-top: 13.25rem;
margin-bottom: 13.25rem; |
| s-y-54 | margin-top: 13.5rem;
margin-bottom: 13.5rem; |
| s-y-55 | margin-top: 13.75rem;
margin-bottom: 13.75rem; |
| s-y-56 | margin-top: 14rem;
margin-bottom: 14rem; |
| s-y-57 | margin-top: 14.25rem;
margin-bottom: 14.25rem; |
| s-y-58 | margin-top: 14.5rem;
margin-bottom: 14.5rem; |
| s-y-59 | margin-top: 14.75rem;
margin-bottom: 14.75rem; |
| s-y-60 | margin-top: 15rem;
margin-bottom: 15rem; |
| s-y-61 | margin-top: 15.25rem;
margin-bottom: 15.25rem; |
| s-y-62 | margin-top: 15.5rem;
margin-bottom: 15.5rem; |
| s-y-63 | margin-top: 15.75rem;
margin-bottom: 15.75rem; |
| s-y-64 | margin-top: 16rem;
margin-bottom: 16rem; |
| s-y-65 | margin-top: 16.25rem;
margin-bottom: 16.25rem; |
| s-y-66 | margin-top: 16.5rem;
margin-bottom: 16.5rem; |
| s-y-67 | margin-top: 16.75rem;
margin-bottom: 16.75rem; |
| s-y-68 | margin-top: 17rem;
margin-bottom: 17rem; |
| s-y-69 | margin-top: 17.25rem;
margin-bottom: 17.25rem; |
| s-y-70 | margin-top: 17.5rem;
margin-bottom: 17.5rem; |
| s-y-71 | margin-top: 17.75rem;
margin-bottom: 17.75rem; |
| s-y-72 | margin-top: 18rem;
margin-bottom: 18rem; |
| s-y-73 | margin-top: 18.25rem;
margin-bottom: 18.25rem; |
| s-y-74 | margin-top: 18.5rem;
margin-bottom: 18.5rem; |
| s-y-75 | margin-top: 18.75rem;
margin-bottom: 18.75rem; |
| s-y-76 | margin-top: 19rem;
margin-bottom: 19rem; |
| s-y-77 | margin-top: 19.25rem;
margin-bottom: 19.25rem; |
| s-y-78 | margin-top: 19.5rem;
margin-bottom: 19.5rem; |
| s-y-79 | margin-top: 19.75rem;
margin-bottom: 19.75rem; |
| s-y-80 | margin-top: 20rem;
margin-bottom: 20rem; |
| s-y-81 | margin-top: 20.25rem;
margin-bottom: 20.25rem; |
| s-y-82 | margin-top: 20.5rem;
margin-bottom: 20.5rem; |
| s-y-83 | margin-top: 20.75rem;
margin-bottom: 20.75rem; |
| s-y-84 | margin-top: 21rem;
margin-bottom: 21rem; |
| s-y-85 | margin-top: 21.25rem;
margin-bottom: 21.25rem; |
| s-y-86 | margin-top: 21.5rem;
margin-bottom: 21.5rem; |
| s-y-87 | margin-top: 21.75rem;
margin-bottom: 21.75rem; |
| s-y-88 | margin-top: 22rem;
margin-bottom: 22rem; |
| s-y-89 | margin-top: 22.25rem;
margin-bottom: 22.25rem; |
| s-y-90 | margin-top: 22.5rem;
margin-bottom: 22.5rem; |
| s-y-91 | margin-top: 22.75rem;
margin-bottom: 22.75rem; |
| s-y-92 | margin-top: 23rem;
margin-bottom: 23rem; |
| s-y-93 | margin-top: 23.25rem;
margin-bottom: 23.25rem; |
| s-y-94 | margin-top: 23.5rem;
margin-bottom: 23.5rem; |
| s-y-95 | margin-top: 23.75rem;
margin-bottom: 23.75rem; |
| s-y-96 | margin-top: 24rem;
margin-bottom: 24rem; |
| s-y-97 | margin-top: 24.25rem;
margin-bottom: 24.25rem; |
| s-y-98 | margin-top: 24.5rem;
margin-bottom: 24.5rem; |
| s-y-99 | margin-top: 24.75rem;
margin-bottom: 24.75rem; |
| s-y-100 | margin-top: 25rem;
margin-bottom: 25rem; |
I have to mention the new table utilities and the Table Layout utility classes.
| Class | Property |
|---|---|
| tl-auto | table-layout: auto; |
| tl-f | table-layout: fixed; |
We’re also adding a bunch of new utility classes for text formatting to the table. These include things like Text Decoration Color, Text Decoration Style, and Text Decoration Thickness.
Text Decoration Color
| Class | Properties |
|---|---|
| tdc-l-red-6 | outline-color: #efb1b1; |
| tdc-l-red-5 | outline-color: #eb9e9e; |
| tdc-l-red-4 | outline-color: #e78b8b; |
| tdc-l-red-3 | outline-color: #e37777; |
| tdc-l-red-2 | outline-color: #df6464; |
| tdc-l-red-1 | outline-color: #db5050; |
| tdc-red | outline-color: #d73d3d; |
| tdc-d-red-1 | outline-color: #c23737; |
| tdc-d-red-2 | outline-color: #ac3131; |
| tdc-d-red-3 | outline-color: #972b2b; |
| tdc-d-red-4 | outline-color: #812525; |
| tdc-d-red-5 | outline-color: #6c1f1f; |
| tdc-d-red-6 | outline-color: #561818; |
| tdc-l-orange-6 | outline-color: #f3c3a1; |
| tdc-l-orange-5 | outline-color: #f0b48a; |
| tdc-l-orange-4 | outline-color: #eca472; |
| tdc-l-orange-3 | outline-color: #e9955b; |
| tdc-l-orange-2 | outline-color: #e68643; |
| tdc-l-orange-1 | outline-color: #e3772c; |
| tdc-orange | outline-color: #e06814; |
| tdc-d-orange-1 | outline-color: #ca5e12; |
| tdc-d-orange-2 | outline-color: #b35310; |
| tdc-d-orange-3 | outline-color: #9d490e; |
| tdc-d-orange-4 | outline-color: #863e0c; |
| tdc-d-orange-5 | outline-color: #70340a; |
| tdc-d-orange-6 | outline-color: #5a2a08; |
| tdc-l-yellow-6 | outline-color: #edd99c; |
| tdc-l-yellow-5 | outline-color: #e9d083; |
| tdc-l-yellow-4 | outline-color: #e5c76a; |
| tdc-l-yellow-3 | outline-color: #e0bd51; |
| tdc-l-yellow-2 | outline-color: #dcb439; |
| tdc-l-yellow-1 | outline-color: #d7aa20; |
| tdc-yellow | outline-color: #d3a107; |
| tdc-d-yellow-1 | outline-color: #be9106; |
| tdc-d-yellow-2 | outline-color: #a98106; |
| tdc-d-yellow-3 | outline-color: #947105; |
| tdc-d-yellow-4 | outline-color: #7f6104; |
| tdc-d-yellow-5 | outline-color: #6a5104; |
| tdc-d-yellow-6 | outline-color: #544003; |
| tdc-l-green-6 | outline-color: #a5e0bb; |
| tdc-l-green-5 | outline-color: #8fd8aa; |
| tdc-l-green-4 | outline-color: #79d099; |
| tdc-l-green-3 | outline-color: #62c888; |
| tdc-l-green-2 | outline-color: #4cc177; |
| tdc-l-green-1 | outline-color: #35b966; |
| tdc-green | outline-color: #1fb155; |
| tdc-d-green-1 | outline-color: #1c9f4d; |
| tdc-d-green-2 | outline-color: #198e44; |
| tdc-d-green-3 | outline-color: #167c3c; |
| tdc-d-green-4 | outline-color: #136a33; |
| tdc-d-green-5 | outline-color: #10592b; |
| tdc-d-green-6 | outline-color: #0c4722; |
| tdc-l-teal-6 | outline-color: #a0dbd5; |
| tdc-l-teal-5 | outline-color: #89d3ca; |
| tdc-l-teal-4 | outline-color: #71cabf; |
| tdc-l-teal-3 | outline-color: #59c1b5; |
| tdc-l-teal-2 | outline-color: #41b8aa; |
| tdc-l-teal-1 | outline-color: #2aafa0; |
| tdc-teal | outline-color: #12a695; |
| tdc-d-teal-1 | outline-color: #109586; |
| tdc-d-teal-2 | outline-color: #0e8577; |
| tdc-d-teal-3 | outline-color: #0d7468; |
| tdc-d-teal-4 | outline-color: #0b6459; |
| tdc-d-teal-5 | outline-color: #09534b; |
| tdc-d-teal-6 | outline-color: #07423c; |
| tdc-l-cyan-6 | outline-color: #9bdbe5; |
| tdc-l-cyan-5 | outline-color: #82d2df; |
| tdc-l-cyan-4 | outline-color: #69c8d9; |
| tdc-l-cyan-3 | outline-color: #50bfd2; |
| tdc-l-cyan-2 | outline-color: #37b6cc; |
| tdc-l-cyan-1 | outline-color: #1eadc5; |
| tdc-cyan | outline-color: #05a4bf; |
| tdc-d-cyan-1 | outline-color: #0594ac; |
| tdc-d-cyan-2 | outline-color: #048399; |
| tdc-d-cyan-3 | outline-color: #047386; |
| tdc-d-cyan-4 | outline-color: #036273; |
| tdc-d-cyan-5 | outline-color: #035260; |
| tdc-d-cyan-6 | outline-color: #02424c; |
| tdc-l-blue-6 | outline-color: #aec8f1; |
| tdc-l-blue-5 | outline-color: #9abaee; |
| tdc-l-blue-4 | outline-color: #86aceb; |
| tdc-l-blue-3 | outline-color: #729ee7; |
| tdc-l-blue-2 | outline-color: #5d91e4; |
| tdc-l-blue-1 | outline-color: #4983e0; |
| tdc-blue | outline-color: #3575dd; |
| tdc-d-blue-1 | outline-color: #3069c7; |
| tdc-d-blue-2 | outline-color: #2a5eb1; |
| tdc-d-blue-3 | outline-color: #25529b; |
| tdc-d-blue-4 | outline-color: #204685; |
| tdc-d-blue-5 | outline-color: #1b3b6f; |
| tdc-d-blue-6 | outline-color: #152f58; |
| tdc-l-indigo-6 | outline-color: #bdbef0; |
| tdc-l-indigo-5 | outline-color: #acaeec; |
| tdc-l-indigo-4 | outline-color: #9b9de8; |
| tdc-l-indigo-3 | outline-color: #8b8de4; |
| tdc-l-indigo-2 | outline-color: #7a7de1; |
| tdc-l-indigo-1 | outline-color: #6a6cdd; |
| tdc-indigo | outline-color: #595cd9; |
| tdc-d-indigo-1 | outline-color: #5053c3; |
| tdc-d-indigo-2 | outline-color: #474aae; |
| tdc-d-indigo-3 | outline-color: #3e4098; |
| tdc-d-indigo-4 | outline-color: #353782; |
| tdc-d-indigo-5 | outline-color: #2d2e6d; |
| tdc-d-indigo-6 | outline-color: #242557; |
| tdc-l-violet-6 | outline-color: #cbbaf1; |
| tdc-l-violet-5 | outline-color: #bea9ee; |
| tdc-l-violet-4 | outline-color: #b198eb; |
| tdc-l-violet-3 | outline-color: #a487e7; |
| tdc-l-violet-2 | outline-color: #9775e4; |
| tdc-l-violet-1 | outline-color: #8a64e0; |
| tdc-violet | outline-color: #7d53dd; |
| tdc-d-violet-1 | outline-color: #714bc7; |
| tdc-d-violet-2 | outline-color: #6442b1; |
| tdc-d-violet-3 | outline-color: #583a9b; |
| tdc-d-violet-4 | outline-color: #4b3285; |
| tdc-d-violet-5 | outline-color: #3f2a6f; |
| tdc-d-violet-6 | outline-color: #322158; |
| tdc-l-pink-6 | outline-color: #eeb3d0; |
| tdc-l-pink-5 | outline-color: #eaa0c5; |
| tdc-l-pink-4 | outline-color: #e58db9; |
| tdc-l-pink-3 | outline-color: #e17aad; |
| tdc-l-pink-2 | outline-color: #dd67a1; |
| tdc-l-pink-1 | outline-color: #d85496; |
| tdc-pink | outline-color: #d4418a; |
| tdc-d-pink-1 | outline-color: #bf3b7c; |
| tdc-d-pink-2 | outline-color: #aa346e; |
| tdc-d-pink-3 | outline-color: #942e61; |
| tdc-d-pink-4 | outline-color: #7f2753; |
| tdc-d-pink-5 | outline-color: #6a2145; |
| tdc-d-pink-6 | outline-color: #551a37; |
| tdc-l-gray-6 | outline-color: #bfc2c7; |
| tdc-l-gray-5 | outline-color: #b0b3b9; |
| tdc-l-gray-4 | outline-color: #a0a4ab; |
| tdc-l-gray-3 | outline-color: #90959d; |
| tdc-l-gray-2 | outline-color: #80858f; |
| tdc-l-gray-1 | outline-color: #707681; |
| tdc-gray | outline-color: #606773; |
| tdc-d-gray-1 | outline-color: #565d68; |
| tdc-d-gray-2 | outline-color: #4d525c; |
| tdc-d-gray-3 | outline-color: #434851; |
| tdc-d-gray-4 | outline-color: #3a3e45; |
| tdc-d-gray-5 | outline-color: #30343a; |
| tdc-d-gray-6 | outline-color: #26292e; |
| tdc-l-lead-6 | outline-color: #b2b2b8; |
| tdc-l-lead-5 | outline-color: #9f9fa7; |
| tdc-l-lead-4 | outline-color: #8c8c95; |
| tdc-l-lead-3 | outline-color: #797983; |
| tdc-l-lead-2 | outline-color: #656571; |
| tdc-l-lead-1 | outline-color: #525260; |
| tdc-lead | outline-color: #3f3f4e; |
| tdc-d-lead-1 | outline-color: #393946; |
| tdc-d-lead-2 | outline-color: #32323e; |
| tdc-d-lead-3 | outline-color: #2c2c37; |
| tdc-d-lead-4 | outline-color: #26262f; |
| tdc-d-lead-5 | outline-color: #202027; |
| tdc-d-lead-6 | outline-color: #19191f; |
Text Decoration Style
| Class | Property |
|---|---|
| tds-none | text-decoration-style: none; |
| tds-d | text-decoration-style: dashed; |
| tds-h | text-decoration-style: hidden; |
| tds-s | text-decoration-style: solid; |
Text Decoration Thickness
| Class | Property |
|---|---|
| tdt-auto | text-decoration-thickness: auto; |
| tdt-ff | text-decoration-thickness: from-font; |
| tdt-0 | text-decoration-thickness: 0px; |
| tdt-1 | text-decoration-thickness: 4px; |
| tdt-2 | text-decoration-thickness: 8px; |
| tdt-3 | text-decoration-thickness: 12px; |
| tdt-4 | text-decoration-thickness: 16px; |
Base styles
You can now use Yumma CSS without the default base styles. This could be really useful if you want to set specific rules in your theme.
Standard Core
<link href="https://cdn.jsdelivr.net/gh/yumma-lib/yumma-css@2.0.0/dist/yumma-core.css" rel="stylesheet" crossorigin="anonymous" />Minified Core
<link href="https://cdn.jsdelivr.net/gh/yumma-lib/yumma-css@2.0.0/dist/yumma-core.min.css" rel="stylesheet" crossorigin="anonymous" />Responsive breakpoints
It took us a while, but We’ve finally added full media query support for every single utility class.
<div class="cnt mx-auto p-4"> <div class="d-g gtc-1 sm:gtc-2 md:gtc-3 lg:gtc-4 g-4"> <div class="...">...</div> <div class="...">...</div> <div class="...">...</div> </div></div>Yumma CSS is going to change how your browser handles breakpoints.
| Class | Property |
|---|---|
| sm | min-width: 640px; |
| md | min-width: 768px; |
| lg | min-width: 1024px; |
| xl | min-width: 1280px; |
| xxl | min-width: 1536px; |
| Class | Property |
|---|---|
| xs | min-width: 0; |
| sm | min-width: 480px; |
| md | min-width: 720px; |
| lg | min-width: 960px; |
| xl | min-width: 1200px; |
Container rules
The container utility has a fresh new look in this update. We’ve given it a new class name, cnt, and added a set of media query rules to make sure it responds well to different themes.
.cnt { width: 100%; @each $bp, $bp_value in $yma-breakpoints { @include breakpoint($bp_value) { max-width: $bp_value; } }}.cnn { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}Upgrade
You can upgrade your projects by getting the latest version of yummacss from npm:
npm i yummacss@latestCommunity
Join the Yumma CSS community! Share your experiences and help Yumma CSS grow and be the best it can be.