Yumma CSS 2.0

Aug 12, 2024

Renildo Pereira

@rrenildoo

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.

This update might break your codebase, we highly suggest you checking out the release notes before upgrading.

---

All-new utilities

We will continue to push more, and more utilities to Yumma CSS. This latest release is no exception.

Accent Color

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;

New Silver color option

6

5

4

3

2

1

Base

1

2

3

4

5

6

Silver

Aspect Ratio

Class	Style
ar-s	aspect-ratio: 1/1;
ar-l	aspect-ratio: 16/9;
ar-auto	aspect-ratio: auto;

Backdrop Filter

Class	Style
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 Collapse

Class	Style
bc-c	border-collapse: collapse;
bc-s	border-collapse: separate;

Border Style

Class	Style
b-none	border-style: none;
b-d	border-style: dashed;
b-h	border-style: hidden;
b-s	border-style: solid;

Caption Side

Class	Style
cs-b	caption-side: bottom;
cs-t	caption-side: top;

Font Style

Class	Style
fs-i	font-style: italic;
fs-n	font-style: normal;

Gap (Reworked)

We’ve completely reworked the Gap utilities. They now work as expected, and you can use them to add gaps between elements.

Class	Style
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

index.html

<div class="gc-s-* gce-* gcs-*">...</div>
<div class="gr-s-* gre-* grs-*">...</div>

Object Fit

Class	Style
of-c	object-fit: cover;
of-f	object-fit: fill;
of-none	object-fit: none;
of-sd	object-fit: scale-down;

Object Position

Class	Style
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 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	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 Style

Class	Style
os-none	outline-style: none;
os-d	outline-style: dashed;
os-h	outline-style: hidden;
os-s	outline-style: solid;

Outline Width

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;

Spacing X

Class	Style
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	Style
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;

Table Layout

Class	Style
tl-auto	table-layout: auto;
tl-f	table-layout: fixed;

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	Style
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	Style
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

Don’t like the default base styles? You can now disable them in the by importing the yumma-core.css file instead of the yumma.css file.

Standard CSS

<link href="https://cdn.jsdelivr.net/gh/yumma-lib/yumma-css@2.0.0/dist/yumma-core.css" rel="stylesheet" crossorigin="anonymous" />

Minified CSS

<link href="https://cdn.jsdelivr.net/gh/yumma-lib/yumma-css@2.0.0/dist/yumma-core.min.css" rel="stylesheet" crossorigin="anonymous" />

Media queries

You know how to use media queries, right? They’re now everywhere in Yumma CSS. Literally everywhere!

<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>

Breakpoints changes

We’ve made a few changes to the breakpoint system in Yumma CSS v2.0. We’ve removed the xs breakpoint and changed the values for the other breakpoints.

Now

Class	Style
sm	min-width: 640px;
md	min-width: 768px;
lg	min-width: 1024px;
xl	min-width: 1280px;
xxl	min-width: 1536px;

Previously

Class	Style
xs	min-width: 0;
sm	min-width: 480px;
md	min-width: 720px;
lg	min-width: 960px;
xl	min-width: 1200px;

Container rules

We’ve given it a new class name, cnt, and added a set of media query rules to make sure it responds to different screen sizes.

Now

.cnt {
  width: 100%;
  @each $bp, $bp_value in $yma-breakpoints {
    @include breakpoint($bp_value) {
      max-width: $bp_value;
    }
  }
}

Previously

.cnn {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

---

Upgrade

You can get the latest version of Yumma CSS from npm:

pnpm

Terminal

pnpm add yummacss@latest

npm

Terminal

npm i yummacss@latest

yarn

Terminal

yarn add yummacss@latest

Tags:

• release

Yumma CSS 2.1

Playground 0.1