Blog/August 12, 2024

Yumma CSS 2.0

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.

Renildo PereiraRenildo Pereira
Yumma CSS 2.0

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

ClassStyles
ac-l-red-6accent-color: #efb1b1;
ac-l-red-5accent-color: #eb9e9e;
ac-l-red-4accent-color: #e78b8b;
ac-l-red-3accent-color: #e37777;
ac-l-red-2accent-color: #df6464;
ac-l-red-1accent-color: #db5050;
ac-redaccent-color: #d73d3d;
ac-d-red-1accent-color: #c23737;
ac-d-red-2accent-color: #ac3131;
ac-d-red-3accent-color: #972b2b;
ac-d-red-4accent-color: #812525;
ac-d-red-5accent-color: #6c1f1f;
ac-d-red-6accent-color: #561818;
ac-l-orange-6accent-color: #f3c3a1;
ac-l-orange-5accent-color: #f0b48a;
ac-l-orange-4accent-color: #eca472;
ac-l-orange-3accent-color: #e9955b;
ac-l-orange-2accent-color: #e68643;
ac-l-orange-1accent-color: #e3772c;
ac-orangeaccent-color: #e06814;
ac-d-orange-1accent-color: #ca5e12;
ac-d-orange-2accent-color: #b35310;
ac-d-orange-3accent-color: #9d490e;
ac-d-orange-4accent-color: #863e0c;
ac-d-orange-5accent-color: #70340a;
ac-d-orange-6accent-color: #5a2a08;
ac-l-yellow-6accent-color: #edd99c;
ac-l-yellow-5accent-color: #e9d083;
ac-l-yellow-4accent-color: #e5c76a;
ac-l-yellow-3accent-color: #e0bd51;
ac-l-yellow-2accent-color: #dcb439;
ac-l-yellow-1accent-color: #d7aa20;
ac-yellowaccent-color: #d3a107;
ac-d-yellow-1accent-color: #be9106;
ac-d-yellow-2accent-color: #a98106;
ac-d-yellow-3accent-color: #947105;
ac-d-yellow-4accent-color: #7f6104;
ac-d-yellow-5accent-color: #6a5104;
ac-d-yellow-6accent-color: #544003;
ac-l-green-6accent-color: #a5e0bb;
ac-l-green-5accent-color: #8fd8aa;
ac-l-green-4accent-color: #79d099;
ac-l-green-3accent-color: #62c888;
ac-l-green-2accent-color: #4cc177;
ac-l-green-1accent-color: #35b966;
ac-greenaccent-color: #1fb155;
ac-d-green-1accent-color: #1c9f4d;
ac-d-green-2accent-color: #198e44;
ac-d-green-3accent-color: #167c3c;
ac-d-green-4accent-color: #136a33;
ac-d-green-5accent-color: #10592b;
ac-d-green-6accent-color: #0c4722;
ac-l-teal-6accent-color: #a0dbd5;
ac-l-teal-5accent-color: #89d3ca;
ac-l-teal-4accent-color: #71cabf;
ac-l-teal-3accent-color: #59c1b5;
ac-l-teal-2accent-color: #41b8aa;
ac-l-teal-1accent-color: #2aafa0;
ac-tealaccent-color: #12a695;
ac-d-teal-1accent-color: #109586;
ac-d-teal-2accent-color: #0e8577;
ac-d-teal-3accent-color: #0d7468;
ac-d-teal-4accent-color: #0b6459;
ac-d-teal-5accent-color: #09534b;
ac-d-teal-6accent-color: #07423c;
ac-l-cyan-6accent-color: #9bdbe5;
ac-l-cyan-5accent-color: #82d2df;
ac-l-cyan-4accent-color: #69c8d9;
ac-l-cyan-3accent-color: #50bfd2;
ac-l-cyan-2accent-color: #37b6cc;
ac-l-cyan-1accent-color: #1eadc5;
ac-cyanaccent-color: #05a4bf;
ac-d-cyan-1accent-color: #0594ac;
ac-d-cyan-2accent-color: #048399;
ac-d-cyan-3accent-color: #047386;
ac-d-cyan-4accent-color: #036273;
ac-d-cyan-5accent-color: #035260;
ac-d-cyan-6accent-color: #02424c;
ac-l-blue-6accent-color: #aec8f1;
ac-l-blue-5accent-color: #9abaee;
ac-l-blue-4accent-color: #86aceb;
ac-l-blue-3accent-color: #729ee7;
ac-l-blue-2accent-color: #5d91e4;
ac-l-blue-1accent-color: #4983e0;
ac-blueaccent-color: #3575dd;
ac-d-blue-1accent-color: #3069c7;
ac-d-blue-2accent-color: #2a5eb1;
ac-d-blue-3accent-color: #25529b;
ac-d-blue-4accent-color: #204685;
ac-d-blue-5accent-color: #1b3b6f;
ac-d-blue-6accent-color: #152f58;
ac-l-indigo-6accent-color: #bdbef0;
ac-l-indigo-5accent-color: #acaeec;
ac-l-indigo-4accent-color: #9b9de8;
ac-l-indigo-3accent-color: #8b8de4;
ac-l-indigo-2accent-color: #7a7de1;
ac-l-indigo-1accent-color: #6a6cdd;
ac-indigoaccent-color: #595cd9;
ac-d-indigo-1accent-color: #5053c3;
ac-d-indigo-2accent-color: #474aae;
ac-d-indigo-3accent-color: #3e4098;
ac-d-indigo-4accent-color: #353782;
ac-d-indigo-5accent-color: #2d2e6d;
ac-d-indigo-6accent-color: #242557;
ac-l-violet-6accent-color: #cbbaf1;
ac-l-violet-5accent-color: #bea9ee;
ac-l-violet-4accent-color: #b198eb;
ac-l-violet-3accent-color: #a487e7;
ac-l-violet-2accent-color: #9775e4;
ac-l-violet-1accent-color: #8a64e0;
ac-violetaccent-color: #7d53dd;
ac-d-violet-1accent-color: #714bc7;
ac-d-violet-2accent-color: #6442b1;
ac-d-violet-3accent-color: #583a9b;
ac-d-violet-4accent-color: #4b3285;
ac-d-violet-5accent-color: #3f2a6f;
ac-d-violet-6accent-color: #322158;
ac-l-pink-6accent-color: #eeb3d0;
ac-l-pink-5accent-color: #eaa0c5;
ac-l-pink-4accent-color: #e58db9;
ac-l-pink-3accent-color: #e17aad;
ac-l-pink-2accent-color: #dd67a1;
ac-l-pink-1accent-color: #d85496;
ac-pinkaccent-color: #d4418a;
ac-d-pink-1accent-color: #bf3b7c;
ac-d-pink-2accent-color: #aa346e;
ac-d-pink-3accent-color: #942e61;
ac-d-pink-4accent-color: #7f2753;
ac-d-pink-5accent-color: #6a2145;
ac-d-pink-6accent-color: #551a37;
ac-l-gray-6accent-color: #bfc2c7;
ac-l-gray-5accent-color: #b0b3b9;
ac-l-gray-4accent-color: #a0a4ab;
ac-l-gray-3accent-color: #90959d;
ac-l-gray-2accent-color: #80858f;
ac-l-gray-1accent-color: #707681;
ac-grayaccent-color: #606773;
ac-d-gray-1accent-color: #565d68;
ac-d-gray-2accent-color: #4d525c;
ac-d-gray-3accent-color: #434851;
ac-d-gray-4accent-color: #3a3e45;
ac-d-gray-5accent-color: #30343a;
ac-d-gray-6accent-color: #26292e;
ac-l-lead-6accent-color: #b2b2b8;
ac-l-lead-5accent-color: #9f9fa7;
ac-l-lead-4accent-color: #8c8c95;
ac-l-lead-3accent-color: #797983;
ac-l-lead-2accent-color: #656571;
ac-l-lead-1accent-color: #525260;
ac-leadaccent-color: #3f3f4e;
ac-d-lead-1accent-color: #393946;
ac-d-lead-2accent-color: #32323e;
ac-d-lead-3accent-color: #2c2c37;
ac-d-lead-4accent-color: #26262f;
ac-d-lead-5accent-color: #202027;
ac-d-lead-6accent-color: #19191f;
ac-l-silver-6accent-color: #e5e7e9;
ac-l-silver-5accent-color: #dfe1e3;
ac-l-silver-4accent-color: #d9dadd;
ac-l-silver-3accent-color: #d2d4d8;
ac-l-silver-2accent-color: #ccced2;
ac-l-silver-1accent-color: #c5c8cd;
ac-silveraccent-color: #bfc2c7;
ac-d-silver-1accent-color: #acafb3;
ac-d-silver-2accent-color: #999b9f;
ac-d-silver-3accent-color: #86888b;
ac-d-silver-4accent-color: #737477;
ac-d-silver-5accent-color: #606164;
ac-d-silver-6accent-color: #4c4e50;

New Silver color option

6
5
4
3
2
1
Base
1
2
3
4
5
6

Silver

Aspect Ratio

ClassStyle
ar-saspect-ratio: 1/1;
ar-laspect-ratio: 16/9;
ar-autoaspect-ratio: auto;

Backdrop Filter

ClassStyle
bf-b-nonebackdrop-filter: blur(0px);
bf-b-xsbackdrop-filter: blur(4px);
bf-b-smbackdrop-filter: blur(8px);
bf-b-mdbackdrop-filter: blur(16px);
bf-b-lgbackdrop-filter: blur(32px);
bf-b-xlbackdrop-filter: blur(64px);

Border Collapse

ClassStyle
bc-cborder-collapse: collapse;
bc-sborder-collapse: separate;

Border Style

ClassStyle
b-noneborder-style: none;
b-dborder-style: dashed;
b-hborder-style: hidden;
b-sborder-style: solid;

Caption Side

ClassStyle
cs-bcaption-side: bottom;
cs-tcaption-side: top;

Font Style

ClassStyle
fs-ifont-style: italic;
fs-nfont-style: normal;

Gap

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

ClassStyle
g-0gap: 0rem;
g-1gap: 0.25rem;
g-2gap: 0.5rem;
g-3gap: 0.75rem;
g-4gap: 1rem;
g-5gap: 1.25rem;
g-6gap: 1.5rem;
g-7gap: 1.75rem;
g-8gap: 2rem;
g-9gap: 2.25rem;
g-10gap: 2.5rem;
g-11gap: 2.75rem;
g-12gap: 3rem;
g-13gap: 3.25rem;
g-14gap: 3.5rem;
g-15gap: 3.75rem;
g-16gap: 4rem;

Grid

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

Object Fit

ClassStyle
of-cobject-fit: cover;
of-fobject-fit: fill;
of-noneobject-fit: none;
of-sdobject-fit: scale-down;

Object Position

ClassStyle
op-bobject-position: bottom;
op-cobject-position: center;
op-lbobject-position: left bottom;
op-leftobject-position: left;
op-ltobject-position: left top;
op-robject-position: right;
op-rbobject-position: right bottom;
op-rtobject-position: right top;
op-tobject-position: top;

Outline Color

ClassStyles
oc-l-red-6outline-color: #efb1b1;
oc-l-red-5outline-color: #eb9e9e;
oc-l-red-4outline-color: #e78b8b;
oc-l-red-3outline-color: #e37777;
oc-l-red-2outline-color: #df6464;
oc-l-red-1outline-color: #db5050;
oc-redoutline-color: #d73d3d;
oc-d-red-1outline-color: #c23737;
oc-d-red-2outline-color: #ac3131;
oc-d-red-3outline-color: #972b2b;
oc-d-red-4outline-color: #812525;
oc-d-red-5outline-color: #6c1f1f;
oc-d-red-6outline-color: #561818;
oc-l-orange-6outline-color: #f3c3a1;
oc-l-orange-5outline-color: #f0b48a;
oc-l-orange-4outline-color: #eca472;
oc-l-orange-3outline-color: #e9955b;
oc-l-orange-2outline-color: #e68643;
oc-l-orange-1outline-color: #e3772c;
oc-orangeoutline-color: #e06814;
oc-d-orange-1outline-color: #ca5e12;
oc-d-orange-2outline-color: #b35310;
oc-d-orange-3outline-color: #9d490e;
oc-d-orange-4outline-color: #863e0c;
oc-d-orange-5outline-color: #70340a;
oc-d-orange-6outline-color: #5a2a08;
oc-l-yellow-6outline-color: #edd99c;
oc-l-yellow-5outline-color: #e9d083;
oc-l-yellow-4outline-color: #e5c76a;
oc-l-yellow-3outline-color: #e0bd51;
oc-l-yellow-2outline-color: #dcb439;
oc-l-yellow-1outline-color: #d7aa20;
oc-yellowoutline-color: #d3a107;
oc-d-yellow-1outline-color: #be9106;
oc-d-yellow-2outline-color: #a98106;
oc-d-yellow-3outline-color: #947105;
oc-d-yellow-4outline-color: #7f6104;
oc-d-yellow-5outline-color: #6a5104;
oc-d-yellow-6outline-color: #544003;
oc-l-green-6outline-color: #a5e0bb;
oc-l-green-5outline-color: #8fd8aa;
oc-l-green-4outline-color: #79d099;
oc-l-green-3outline-color: #62c888;
oc-l-green-2outline-color: #4cc177;
oc-l-green-1outline-color: #35b966;
oc-greenoutline-color: #1fb155;
oc-d-green-1outline-color: #1c9f4d;
oc-d-green-2outline-color: #198e44;
oc-d-green-3outline-color: #167c3c;
oc-d-green-4outline-color: #136a33;
oc-d-green-5outline-color: #10592b;
oc-d-green-6outline-color: #0c4722;
oc-l-teal-6outline-color: #a0dbd5;
oc-l-teal-5outline-color: #89d3ca;
oc-l-teal-4outline-color: #71cabf;
oc-l-teal-3outline-color: #59c1b5;
oc-l-teal-2outline-color: #41b8aa;
oc-l-teal-1outline-color: #2aafa0;
oc-tealoutline-color: #12a695;
oc-d-teal-1outline-color: #109586;
oc-d-teal-2outline-color: #0e8577;
oc-d-teal-3outline-color: #0d7468;
oc-d-teal-4outline-color: #0b6459;
oc-d-teal-5outline-color: #09534b;
oc-d-teal-6outline-color: #07423c;
oc-l-cyan-6outline-color: #9bdbe5;
oc-l-cyan-5outline-color: #82d2df;
oc-l-cyan-4outline-color: #69c8d9;
oc-l-cyan-3outline-color: #50bfd2;
oc-l-cyan-2outline-color: #37b6cc;
oc-l-cyan-1outline-color: #1eadc5;
oc-cyanoutline-color: #05a4bf;
oc-d-cyan-1outline-color: #0594ac;
oc-d-cyan-2outline-color: #048399;
oc-d-cyan-3outline-color: #047386;
oc-d-cyan-4outline-color: #036273;
oc-d-cyan-5outline-color: #035260;
oc-d-cyan-6outline-color: #02424c;
oc-l-blue-6outline-color: #aec8f1;
oc-l-blue-5outline-color: #9abaee;
oc-l-blue-4outline-color: #86aceb;
oc-l-blue-3outline-color: #729ee7;
oc-l-blue-2outline-color: #5d91e4;
oc-l-blue-1outline-color: #4983e0;
oc-blueoutline-color: #3575dd;
oc-d-blue-1outline-color: #3069c7;
oc-d-blue-2outline-color: #2a5eb1;
oc-d-blue-3outline-color: #25529b;
oc-d-blue-4outline-color: #204685;
oc-d-blue-5outline-color: #1b3b6f;
oc-d-blue-6outline-color: #152f58;
oc-l-indigo-6outline-color: #bdbef0;
oc-l-indigo-5outline-color: #acaeec;
oc-l-indigo-4outline-color: #9b9de8;
oc-l-indigo-3outline-color: #8b8de4;
oc-l-indigo-2outline-color: #7a7de1;
oc-l-indigo-1outline-color: #6a6cdd;
oc-indigooutline-color: #595cd9;
oc-d-indigo-1outline-color: #5053c3;
oc-d-indigo-2outline-color: #474aae;
oc-d-indigo-3outline-color: #3e4098;
oc-d-indigo-4outline-color: #353782;
oc-d-indigo-5outline-color: #2d2e6d;
oc-d-indigo-6outline-color: #242557;
oc-l-violet-6outline-color: #cbbaf1;
oc-l-violet-5outline-color: #bea9ee;
oc-l-violet-4outline-color: #b198eb;
oc-l-violet-3outline-color: #a487e7;
oc-l-violet-2outline-color: #9775e4;
oc-l-violet-1outline-color: #8a64e0;
oc-violetoutline-color: #7d53dd;
oc-d-violet-1outline-color: #714bc7;
oc-d-violet-2outline-color: #6442b1;
oc-d-violet-3outline-color: #583a9b;
oc-d-violet-4outline-color: #4b3285;
oc-d-violet-5outline-color: #3f2a6f;
oc-d-violet-6outline-color: #322158;
oc-l-pink-6outline-color: #eeb3d0;
oc-l-pink-5outline-color: #eaa0c5;
oc-l-pink-4outline-color: #e58db9;
oc-l-pink-3outline-color: #e17aad;
oc-l-pink-2outline-color: #dd67a1;
oc-l-pink-1outline-color: #d85496;
oc-pinkoutline-color: #d4418a;
oc-d-pink-1outline-color: #bf3b7c;
oc-d-pink-2outline-color: #aa346e;
oc-d-pink-3outline-color: #942e61;
oc-d-pink-4outline-color: #7f2753;
oc-d-pink-5outline-color: #6a2145;
oc-d-pink-6outline-color: #551a37;
oc-l-gray-6outline-color: #bfc2c7;
oc-l-gray-5outline-color: #b0b3b9;
oc-l-gray-4outline-color: #a0a4ab;
oc-l-gray-3outline-color: #90959d;
oc-l-gray-2outline-color: #80858f;
oc-l-gray-1outline-color: #707681;
oc-grayoutline-color: #606773;
oc-d-gray-1outline-color: #565d68;
oc-d-gray-2outline-color: #4d525c;
oc-d-gray-3outline-color: #434851;
oc-d-gray-4outline-color: #3a3e45;
oc-d-gray-5outline-color: #30343a;
oc-d-gray-6outline-color: #26292e;
oc-l-lead-6outline-color: #b2b2b8;
oc-l-lead-5outline-color: #9f9fa7;
oc-l-lead-4outline-color: #8c8c95;
oc-l-lead-3outline-color: #797983;
oc-l-lead-2outline-color: #656571;
oc-l-lead-1outline-color: #525260;
oc-leadoutline-color: #3f3f4e;
oc-d-lead-1outline-color: #393946;
oc-d-lead-2outline-color: #32323e;
oc-d-lead-3outline-color: #2c2c37;
oc-d-lead-4outline-color: #26262f;
oc-d-lead-5outline-color: #202027;
oc-d-lead-6outline-color: #19191f;

Outline Offset

ClassStyle
oo-0outline-offset: 0px;
oo-1outline-offset: 4px;
oo-2outline-offset: 8px;
oo-3outline-offset: 12px;
oo-4outline-offset: 16px;

Outline Style

ClassStyle
os-noneoutline-style: none;
os-doutline-style: dashed;
os-houtline-style: hidden;
os-soutline-style: solid;

Outline Width

ClassStyle
ow-0outline-width: 0px;
ow-1outline-width: 4px;
ow-2outline-width: 8px;
ow-3outline-width: 12px;
ow-4outline-width: 16px;

Spacing X

ClassStyle
s-x-0margin-left: 0rem; margin-right: 0rem;
s-x-1margin-left: 0.25rem; margin-right: 0.25rem;
s-x-2margin-left: 0.5rem; margin-right: 0.5rem;
s-x-3margin-left: 0.75rem; margin-right: 0.75rem;
s-x-4margin-left: 1rem; margin-right: 1rem;
s-x-5margin-left: 1.25rem; margin-right: 1.25rem;
s-x-6margin-left: 1.5rem; margin-right: 1.5rem;
s-x-7margin-left: 1.75rem; margin-right: 1.75rem;
s-x-8margin-left: 2rem; margin-right: 2rem;
s-x-9margin-left: 2.25rem; margin-right: 2.25rem;
s-x-10margin-left: 2.5rem; margin-right: 2.5rem;
s-x-11margin-left: 2.75rem; margin-right: 2.75rem;
s-x-12margin-left: 3rem; margin-right: 3rem;
s-x-13margin-left: 3.25rem; margin-right: 3.25rem;
s-x-14margin-left: 3.5rem; margin-right: 3.5rem;
s-x-15margin-left: 3.75rem; margin-right: 3.75rem;
s-x-16margin-left: 4rem; margin-right: 4rem;
s-x-17margin-left: 4.25rem; margin-right: 4.25rem;
s-x-18margin-left: 4.5rem; margin-right: 4.5rem;
s-x-19margin-left: 4.75rem; margin-right: 4.75rem;
s-x-20margin-left: 5rem; margin-right: 5rem;
s-x-21margin-left: 5.25rem; margin-right: 5.25rem;
s-x-22margin-left: 5.5rem; margin-right: 5.5rem;
s-x-23margin-left: 5.75rem; margin-right: 5.75rem;
s-x-24margin-left: 6rem; margin-right: 6rem;
s-x-25margin-left: 6.25rem; margin-right: 6.25rem;
s-x-26margin-left: 6.5rem; margin-right: 6.5rem;
s-x-27margin-left: 6.75rem; margin-right: 6.75rem;
s-x-28margin-left: 7rem; margin-right: 7rem;
s-x-29margin-left: 7.25rem; margin-right: 7.25rem;
s-x-30margin-left: 7.5rem; margin-right: 7.5rem;
s-x-31margin-left: 7.75rem; margin-right: 7.75rem;
s-x-32margin-left: 8rem; margin-right: 8rem;
s-x-33margin-left: 8.25rem; margin-right: 8.25rem;
s-x-34margin-left: 8.5rem; margin-right: 8.5rem;
s-x-35margin-left: 8.75rem; margin-right: 8.75rem;
s-x-36margin-left: 9rem; margin-right: 9rem;
s-x-37margin-left: 9.25rem; margin-right: 9.25rem;
s-x-38margin-left: 9.5rem; margin-right: 9.5rem;
s-x-39margin-left: 9.75rem; margin-right: 9.75rem;
s-x-40margin-left: 10rem; margin-right: 10rem;
s-x-41margin-left: 10.25rem; margin-right: 10.25rem;
s-x-42margin-left: 10.5rem; margin-right: 10.5rem;
s-x-43margin-left: 10.75rem; margin-right: 10.75rem;
s-x-44margin-left: 11rem; margin-right: 11rem;
s-x-45margin-left: 11.25rem; margin-right: 11.25rem;
s-x-46margin-left: 11.5rem; margin-right: 11.5rem;
s-x-47margin-left: 11.75rem; margin-right: 11.75rem;
s-x-48margin-left: 12rem; margin-right: 12rem;
s-x-49margin-left: 12.25rem; margin-right: 12.25rem;
s-x-50margin-left: 12.5rem; margin-right: 12.5rem;
s-x-51margin-left: 12.75rem; margin-right: 12.75rem;
s-x-52margin-left: 13rem; margin-right: 13rem;
s-x-53margin-left: 13.25rem; margin-right: 13.25rem;
s-x-54margin-left: 13.5rem; margin-right: 13.5rem;
s-x-55margin-left: 13.75rem; margin-right: 13.75rem;
s-x-56margin-left: 14rem; margin-right: 14rem;
s-x-57margin-left: 14.25rem; margin-right: 14.25rem;
s-x-58margin-left: 14.5rem; margin-right: 14.5rem;
s-x-59margin-left: 14.75rem; margin-right: 14.75rem;
s-x-60margin-left: 15rem; margin-right: 15rem;
s-x-61margin-left: 15.25rem; margin-right: 15.25rem;
s-x-62margin-left: 15.5rem; margin-right: 15.5rem;
s-x-63margin-left: 15.75rem; margin-right: 15.75rem;
s-x-64margin-left: 16rem; margin-right: 16rem;
s-x-65margin-left: 16.25rem; margin-right: 16.25rem;
s-x-66margin-left: 16.5rem; margin-right: 16.5rem;
s-x-67margin-left: 16.75rem; margin-right: 16.75rem;
s-x-68margin-left: 17rem; margin-right: 17rem;
s-x-69margin-left: 17.25rem; margin-right: 17.25rem;
s-x-70margin-left: 17.5rem; margin-right: 17.5rem;
s-x-71margin-left: 17.75rem; margin-right: 17.75rem;
s-x-72margin-left: 18rem; margin-right: 18rem;
s-x-73margin-left: 18.25rem; margin-right: 18.25rem;
s-x-74margin-left: 18.5rem; margin-right: 18.5rem;
s-x-75margin-left: 18.75rem; margin-right: 18.75rem;
s-x-76margin-left: 19rem; margin-right: 19rem;
s-x-77margin-left: 19.25rem; margin-right: 19.25rem;
s-x-78margin-left: 19.5rem; margin-right: 19.5rem;
s-x-79margin-left: 19.75rem; margin-right: 19.75rem;
s-x-80margin-left: 20rem; margin-right: 20rem;
s-x-81margin-left: 20.25rem; margin-right: 20.25rem;
s-x-82margin-left: 20.5rem; margin-right: 20.5rem;
s-x-83margin-left: 20.75rem; margin-right: 20.75rem;
s-x-84margin-left: 21rem; margin-right: 21rem;
s-x-85margin-left: 21.25rem; margin-right: 21.25rem;
s-x-86margin-left: 21.5rem; margin-right: 21.5rem;
s-x-87margin-left: 21.75rem; margin-right: 21.75rem;
s-x-88margin-left: 22rem; margin-right: 22rem;
s-x-89margin-left: 22.25rem; margin-right: 22.25rem;
s-x-90margin-left: 22.5rem; margin-right: 22.5rem;
s-x-91margin-left: 22.75rem; margin-right: 22.75rem;
s-x-92margin-left: 23rem; margin-right: 23rem;
s-x-93margin-left: 23.25rem; margin-right: 23.25rem;
s-x-94margin-left: 23.5rem; margin-right: 23.5rem;
s-x-95margin-left: 23.75rem; margin-right: 23.75rem;
s-x-96margin-left: 24rem; margin-right: 24rem;
s-x-97margin-left: 24.25rem; margin-right: 24.25rem;
s-x-98margin-left: 24.5rem; margin-right: 24.5rem;
s-x-99margin-left: 24.75rem; margin-right: 24.75rem;
s-x-100margin-left: 25rem; margin-right: 25rem;

Spacing Y

ClassStyle
s-y-0margin-top: 0rem; margin-bottom: 0rem;
s-y-1margin-top: 0.25rem; margin-bottom: 0.25rem;
s-y-2margin-top: 0.5rem; margin-bottom: 0.5rem;
s-y-3margin-top: 0.75rem; margin-bottom: 0.75rem;
s-y-4margin-top: 1rem; margin-bottom: 1rem;
s-y-5margin-top: 1.25rem; margin-bottom: 1.25rem;
s-y-6margin-top: 1.5rem; margin-bottom: 1.5rem;
s-y-7margin-top: 1.75rem; margin-bottom: 1.75rem;
s-y-8margin-top: 2rem; margin-bottom: 2rem;
s-y-9margin-top: 2.25rem; margin-bottom: 2.25rem;
s-y-10margin-top: 2.5rem; margin-bottom: 2.5rem;
s-y-11margin-top: 2.75rem; margin-bottom: 2.75rem;
s-y-12margin-top: 3rem; margin-bottom: 3rem;
s-y-13margin-top: 3.25rem; margin-bottom: 3.25rem;
s-y-14margin-top: 3.5rem; margin-bottom: 3.5rem;
s-y-15margin-top: 3.75rem; margin-bottom: 3.75rem;
s-y-16margin-top: 4rem; margin-bottom: 4rem;
s-y-17margin-top: 4.25rem; margin-bottom: 4.25rem;
s-y-18margin-top: 4.5rem; margin-bottom: 4.5rem;
s-y-19margin-top: 4.75rem; margin-bottom: 4.75rem;
s-y-20margin-top: 5rem; margin-bottom: 5rem;
s-y-21margin-top: 5.25rem; margin-bottom: 5.25rem;
s-y-22margin-top: 5.5rem; margin-bottom: 5.5rem;
s-y-23margin-top: 5.75rem; margin-bottom: 5.75rem;
s-y-24margin-top: 6rem; margin-bottom: 6rem;
s-y-25margin-top: 6.25rem; margin-bottom: 6.25rem;
s-y-26margin-top: 6.5rem; margin-bottom: 6.5rem;
s-y-27margin-top: 6.75rem; margin-bottom: 6.75rem;
s-y-28margin-top: 7rem; margin-bottom: 7rem;
s-y-29margin-top: 7.25rem; margin-bottom: 7.25rem;
s-y-30margin-top: 7.5rem; margin-bottom: 7.5rem;
s-y-31margin-top: 7.75rem; margin-bottom: 7.75rem;
s-y-32margin-top: 8rem; margin-bottom: 8rem;
s-y-33margin-top: 8.25rem; margin-bottom: 8.25rem;
s-y-34margin-top: 8.5rem; margin-bottom: 8.5rem;
s-y-35margin-top: 8.75rem; margin-bottom: 8.75rem;
s-y-36margin-top: 9rem; margin-bottom: 9rem;
s-y-37margin-top: 9.25rem; margin-bottom: 9.25rem;
s-y-38margin-top: 9.5rem; margin-bottom: 9.5rem;
s-y-39margin-top: 9.75rem; margin-bottom: 9.75rem;
s-y-40margin-top: 10rem; margin-bottom: 10rem;
s-y-41margin-top: 10.25rem; margin-bottom: 10.25rem;
s-y-42margin-top: 10.5rem; margin-bottom: 10.5rem;
s-y-43margin-top: 10.75rem; margin-bottom: 10.75rem;
s-y-44margin-top: 11rem; margin-bottom: 11rem;
s-y-45margin-top: 11.25rem; margin-bottom: 11.25rem;
s-y-46margin-top: 11.5rem; margin-bottom: 11.5rem;
s-y-47margin-top: 11.75rem; margin-bottom: 11.75rem;
s-y-48margin-top: 12rem; margin-bottom: 12rem;
s-y-49margin-top: 12.25rem; margin-bottom: 12.25rem;
s-y-50margin-top: 12.5rem; margin-bottom: 12.5rem;
s-y-51margin-top: 12.75rem; margin-bottom: 12.75rem;
s-y-52margin-top: 13rem; margin-bottom: 13rem;
s-y-53margin-top: 13.25rem; margin-bottom: 13.25rem;
s-y-54margin-top: 13.5rem; margin-bottom: 13.5rem;
s-y-55margin-top: 13.75rem; margin-bottom: 13.75rem;
s-y-56margin-top: 14rem; margin-bottom: 14rem;
s-y-57margin-top: 14.25rem; margin-bottom: 14.25rem;
s-y-58margin-top: 14.5rem; margin-bottom: 14.5rem;
s-y-59margin-top: 14.75rem; margin-bottom: 14.75rem;
s-y-60margin-top: 15rem; margin-bottom: 15rem;
s-y-61margin-top: 15.25rem; margin-bottom: 15.25rem;
s-y-62margin-top: 15.5rem; margin-bottom: 15.5rem;
s-y-63margin-top: 15.75rem; margin-bottom: 15.75rem;
s-y-64margin-top: 16rem; margin-bottom: 16rem;
s-y-65margin-top: 16.25rem; margin-bottom: 16.25rem;
s-y-66margin-top: 16.5rem; margin-bottom: 16.5rem;
s-y-67margin-top: 16.75rem; margin-bottom: 16.75rem;
s-y-68margin-top: 17rem; margin-bottom: 17rem;
s-y-69margin-top: 17.25rem; margin-bottom: 17.25rem;
s-y-70margin-top: 17.5rem; margin-bottom: 17.5rem;
s-y-71margin-top: 17.75rem; margin-bottom: 17.75rem;
s-y-72margin-top: 18rem; margin-bottom: 18rem;
s-y-73margin-top: 18.25rem; margin-bottom: 18.25rem;
s-y-74margin-top: 18.5rem; margin-bottom: 18.5rem;
s-y-75margin-top: 18.75rem; margin-bottom: 18.75rem;
s-y-76margin-top: 19rem; margin-bottom: 19rem;
s-y-77margin-top: 19.25rem; margin-bottom: 19.25rem;
s-y-78margin-top: 19.5rem; margin-bottom: 19.5rem;
s-y-79margin-top: 19.75rem; margin-bottom: 19.75rem;
s-y-80margin-top: 20rem; margin-bottom: 20rem;
s-y-81margin-top: 20.25rem; margin-bottom: 20.25rem;
s-y-82margin-top: 20.5rem; margin-bottom: 20.5rem;
s-y-83margin-top: 20.75rem; margin-bottom: 20.75rem;
s-y-84margin-top: 21rem; margin-bottom: 21rem;
s-y-85margin-top: 21.25rem; margin-bottom: 21.25rem;
s-y-86margin-top: 21.5rem; margin-bottom: 21.5rem;
s-y-87margin-top: 21.75rem; margin-bottom: 21.75rem;
s-y-88margin-top: 22rem; margin-bottom: 22rem;
s-y-89margin-top: 22.25rem; margin-bottom: 22.25rem;
s-y-90margin-top: 22.5rem; margin-bottom: 22.5rem;
s-y-91margin-top: 22.75rem; margin-bottom: 22.75rem;
s-y-92margin-top: 23rem; margin-bottom: 23rem;
s-y-93margin-top: 23.25rem; margin-bottom: 23.25rem;
s-y-94margin-top: 23.5rem; margin-bottom: 23.5rem;
s-y-95margin-top: 23.75rem; margin-bottom: 23.75rem;
s-y-96margin-top: 24rem; margin-bottom: 24rem;
s-y-97margin-top: 24.25rem; margin-bottom: 24.25rem;
s-y-98margin-top: 24.5rem; margin-bottom: 24.5rem;
s-y-99margin-top: 24.75rem; margin-bottom: 24.75rem;
s-y-100margin-top: 25rem; margin-bottom: 25rem;

Table Layout

ClassStyle
tl-autotable-layout: auto;
tl-ftable-layout: fixed;

Text Decoration Color

ClassStyles
tdc-l-red-6outline-color: #efb1b1;
tdc-l-red-5outline-color: #eb9e9e;
tdc-l-red-4outline-color: #e78b8b;
tdc-l-red-3outline-color: #e37777;
tdc-l-red-2outline-color: #df6464;
tdc-l-red-1outline-color: #db5050;
tdc-redoutline-color: #d73d3d;
tdc-d-red-1outline-color: #c23737;
tdc-d-red-2outline-color: #ac3131;
tdc-d-red-3outline-color: #972b2b;
tdc-d-red-4outline-color: #812525;
tdc-d-red-5outline-color: #6c1f1f;
tdc-d-red-6outline-color: #561818;
tdc-l-orange-6outline-color: #f3c3a1;
tdc-l-orange-5outline-color: #f0b48a;
tdc-l-orange-4outline-color: #eca472;
tdc-l-orange-3outline-color: #e9955b;
tdc-l-orange-2outline-color: #e68643;
tdc-l-orange-1outline-color: #e3772c;
tdc-orangeoutline-color: #e06814;
tdc-d-orange-1outline-color: #ca5e12;
tdc-d-orange-2outline-color: #b35310;
tdc-d-orange-3outline-color: #9d490e;
tdc-d-orange-4outline-color: #863e0c;
tdc-d-orange-5outline-color: #70340a;
tdc-d-orange-6outline-color: #5a2a08;
tdc-l-yellow-6outline-color: #edd99c;
tdc-l-yellow-5outline-color: #e9d083;
tdc-l-yellow-4outline-color: #e5c76a;
tdc-l-yellow-3outline-color: #e0bd51;
tdc-l-yellow-2outline-color: #dcb439;
tdc-l-yellow-1outline-color: #d7aa20;
tdc-yellowoutline-color: #d3a107;
tdc-d-yellow-1outline-color: #be9106;
tdc-d-yellow-2outline-color: #a98106;
tdc-d-yellow-3outline-color: #947105;
tdc-d-yellow-4outline-color: #7f6104;
tdc-d-yellow-5outline-color: #6a5104;
tdc-d-yellow-6outline-color: #544003;
tdc-l-green-6outline-color: #a5e0bb;
tdc-l-green-5outline-color: #8fd8aa;
tdc-l-green-4outline-color: #79d099;
tdc-l-green-3outline-color: #62c888;
tdc-l-green-2outline-color: #4cc177;
tdc-l-green-1outline-color: #35b966;
tdc-greenoutline-color: #1fb155;
tdc-d-green-1outline-color: #1c9f4d;
tdc-d-green-2outline-color: #198e44;
tdc-d-green-3outline-color: #167c3c;
tdc-d-green-4outline-color: #136a33;
tdc-d-green-5outline-color: #10592b;
tdc-d-green-6outline-color: #0c4722;
tdc-l-teal-6outline-color: #a0dbd5;
tdc-l-teal-5outline-color: #89d3ca;
tdc-l-teal-4outline-color: #71cabf;
tdc-l-teal-3outline-color: #59c1b5;
tdc-l-teal-2outline-color: #41b8aa;
tdc-l-teal-1outline-color: #2aafa0;
tdc-tealoutline-color: #12a695;
tdc-d-teal-1outline-color: #109586;
tdc-d-teal-2outline-color: #0e8577;
tdc-d-teal-3outline-color: #0d7468;
tdc-d-teal-4outline-color: #0b6459;
tdc-d-teal-5outline-color: #09534b;
tdc-d-teal-6outline-color: #07423c;
tdc-l-cyan-6outline-color: #9bdbe5;
tdc-l-cyan-5outline-color: #82d2df;
tdc-l-cyan-4outline-color: #69c8d9;
tdc-l-cyan-3outline-color: #50bfd2;
tdc-l-cyan-2outline-color: #37b6cc;
tdc-l-cyan-1outline-color: #1eadc5;
tdc-cyanoutline-color: #05a4bf;
tdc-d-cyan-1outline-color: #0594ac;
tdc-d-cyan-2outline-color: #048399;
tdc-d-cyan-3outline-color: #047386;
tdc-d-cyan-4outline-color: #036273;
tdc-d-cyan-5outline-color: #035260;
tdc-d-cyan-6outline-color: #02424c;
tdc-l-blue-6outline-color: #aec8f1;
tdc-l-blue-5outline-color: #9abaee;
tdc-l-blue-4outline-color: #86aceb;
tdc-l-blue-3outline-color: #729ee7;
tdc-l-blue-2outline-color: #5d91e4;
tdc-l-blue-1outline-color: #4983e0;
tdc-blueoutline-color: #3575dd;
tdc-d-blue-1outline-color: #3069c7;
tdc-d-blue-2outline-color: #2a5eb1;
tdc-d-blue-3outline-color: #25529b;
tdc-d-blue-4outline-color: #204685;
tdc-d-blue-5outline-color: #1b3b6f;
tdc-d-blue-6outline-color: #152f58;
tdc-l-indigo-6outline-color: #bdbef0;
tdc-l-indigo-5outline-color: #acaeec;
tdc-l-indigo-4outline-color: #9b9de8;
tdc-l-indigo-3outline-color: #8b8de4;
tdc-l-indigo-2outline-color: #7a7de1;
tdc-l-indigo-1outline-color: #6a6cdd;
tdc-indigooutline-color: #595cd9;
tdc-d-indigo-1outline-color: #5053c3;
tdc-d-indigo-2outline-color: #474aae;
tdc-d-indigo-3outline-color: #3e4098;
tdc-d-indigo-4outline-color: #353782;
tdc-d-indigo-5outline-color: #2d2e6d;
tdc-d-indigo-6outline-color: #242557;
tdc-l-violet-6outline-color: #cbbaf1;
tdc-l-violet-5outline-color: #bea9ee;
tdc-l-violet-4outline-color: #b198eb;
tdc-l-violet-3outline-color: #a487e7;
tdc-l-violet-2outline-color: #9775e4;
tdc-l-violet-1outline-color: #8a64e0;
tdc-violetoutline-color: #7d53dd;
tdc-d-violet-1outline-color: #714bc7;
tdc-d-violet-2outline-color: #6442b1;
tdc-d-violet-3outline-color: #583a9b;
tdc-d-violet-4outline-color: #4b3285;
tdc-d-violet-5outline-color: #3f2a6f;
tdc-d-violet-6outline-color: #322158;
tdc-l-pink-6outline-color: #eeb3d0;
tdc-l-pink-5outline-color: #eaa0c5;
tdc-l-pink-4outline-color: #e58db9;
tdc-l-pink-3outline-color: #e17aad;
tdc-l-pink-2outline-color: #dd67a1;
tdc-l-pink-1outline-color: #d85496;
tdc-pinkoutline-color: #d4418a;
tdc-d-pink-1outline-color: #bf3b7c;
tdc-d-pink-2outline-color: #aa346e;
tdc-d-pink-3outline-color: #942e61;
tdc-d-pink-4outline-color: #7f2753;
tdc-d-pink-5outline-color: #6a2145;
tdc-d-pink-6outline-color: #551a37;
tdc-l-gray-6outline-color: #bfc2c7;
tdc-l-gray-5outline-color: #b0b3b9;
tdc-l-gray-4outline-color: #a0a4ab;
tdc-l-gray-3outline-color: #90959d;
tdc-l-gray-2outline-color: #80858f;
tdc-l-gray-1outline-color: #707681;
tdc-grayoutline-color: #606773;
tdc-d-gray-1outline-color: #565d68;
tdc-d-gray-2outline-color: #4d525c;
tdc-d-gray-3outline-color: #434851;
tdc-d-gray-4outline-color: #3a3e45;
tdc-d-gray-5outline-color: #30343a;
tdc-d-gray-6outline-color: #26292e;
tdc-l-lead-6outline-color: #b2b2b8;
tdc-l-lead-5outline-color: #9f9fa7;
tdc-l-lead-4outline-color: #8c8c95;
tdc-l-lead-3outline-color: #797983;
tdc-l-lead-2outline-color: #656571;
tdc-l-lead-1outline-color: #525260;
tdc-leadoutline-color: #3f3f4e;
tdc-d-lead-1outline-color: #393946;
tdc-d-lead-2outline-color: #32323e;
tdc-d-lead-3outline-color: #2c2c37;
tdc-d-lead-4outline-color: #26262f;
tdc-d-lead-5outline-color: #202027;
tdc-d-lead-6outline-color: #19191f;

Text Decoration Style

ClassStyle
tds-nonetext-decoration-style: none;
tds-dtext-decoration-style: dashed;
tds-htext-decoration-style: hidden;
tds-stext-decoration-style: solid;

Text Decoration Thickness

ClassStyle
tdt-autotext-decoration-thickness: auto;
tdt-fftext-decoration-thickness: from-font;
tdt-0text-decoration-thickness: 0px;
tdt-1text-decoration-thickness: 4px;
tdt-2text-decoration-thickness: 8px;
tdt-3text-decoration-thickness: 12px;
tdt-4text-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.

ClassStyle
smmin-width: 640px;
mdmin-width: 768px;
lgmin-width: 1024px;
xlmin-width: 1280px;
xxlmin-width: 1536px;

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.

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

Upgrade

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

Terminal window
pnpm up yummacss