Blog/August 12, 2024

Yumma CSS 2.0

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.

RPRenildo Pereira

All-new utilities

Continuous utility expansion remains a priority. This major release introduces several new tools for design control.

Accent Color

<input class="ac-red" type="checkbox" checked />
<input class="ac-orange" type="checkbox" checked />
<input class="ac-yellow" type="checkbox" checked />

New silver color option

Silver

Aspect Ratio

Utility	Property
`ar-s`	`aspect-ratio: 1/1;`
`ar-l`	`aspect-ratio: 16/9;`
`ar-auto`	`aspect-ratio: auto;`

Backdrop Filter

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

Utility	Property
`bc-c`	`border-collapse: collapse;`
`bc-s`	`border-collapse: separate;`

Border Style

Utility	Property
`b-none`	`border-style: none;`
`b-d`	`border-style: dashed;`
`b-h`	`border-style: hidden;`
`b-s`	`border-style: solid;`

Caption Side

Utility	Property
`cs-b`	`caption-side: bottom;`
`cs-t`	`caption-side: top;`

Font Style

Utility	Property
`fs-i`	`font-style: italic;`
`fs-n`	`font-style: normal;`

Gap

Reworked the Gap utilities for more intuitive layout controls.

<div class="g-[0/16]">...</div>

Grid

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

Object Fit

Utility	Property
`of-c`	`object-fit: cover;`
`of-f`	`object-fit: fill;`
`of-none`	`object-fit: none;`
`of-sd`	`object-fit: scale-down;`

Object Position

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

<div class="o-4 os-s oc-indigo-6"></div>
<div class="o-4 os-s oc-violet-6"></div>
<div class="o-4 os-s oc-pink-6"></div>

Outline Offset

<div class="oo-[0/4]">...</div>

Outline Style

Utility	Property
`os-none`	`outline-style: none;`
`os-d`	`outline-style: dashed;`
`os-h`	`outline-style: hidden;`
`os-s`	`outline-style: solid;`

Outline Width

<div class="ow-[0/4]">...</div>

Spacing X

<div class="s-x-[0/100]">...</div>

Spacing Y

<div class="s-y-[0/100]">...</div>

Table Layout

Utility	Property
`tl-auto`	`table-layout: auto;`
`tl-f`	`table-layout: fixed;`

Text Decoration Color

<p class="td-u tdc-red">Red Underline</p>
<p class="td-u tdc-green">Green Underline</p>
<p class="td-u tdc-blue">Blue Underline</p>

Text Decoration Style

Utility	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

Utility	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

Disable default base styles by importing yumma-core.css instead of yumma.css.

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

Media query support is now available across nearly all Yumma CSS utilities for better responsiveness.

<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

Refined the breakpoint system by removing the xs breakpoint & adjusting existing values.

Utility	Property
`sm`	`min-width: 640px;`
`md`	`min-width: 768px;`
`lg`	`min-width: 1024px;`
`xl`	`min-width: 1280px;`
`xxl`	`min-width: 1536px;`

Container rules

Introduced the cnt class for containers with built-in media query rules for responsiveness.

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

Upgrade

Get the latest version of Yumma CSS:

pnpm up yummacss@latest