Yumma CSS 2.0

What's New in v2.0

The source was rewritten from scratch. On top of that, this release adds a color, widens media query support & fills most of the remaining gaps in the utility set.

All-New Utilities

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

Accent Color

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

New Silver Color Palette

Aspect Ratio

ar-s is square, ar-l is 16/9 & ar-auto restores the default.

Backdrop Filter

Blur steps from bf-b-none through bf-b-xs, bf-b-sm, bf-b-md, bf-b-lg & bf-b-xl, doubling at each step from 4px to 64px.

Border Collapse

bc-c collapses table borders, bc-s separates them.

Border Style

b-none, b-d for dashed, b-h for hidden & b-s for solid.

Caption Side

cs-t & cs-b place a table caption above or below.

Font Style

fs-i is italic, fs-n is normal.

Gap

Reworked the Gap utilities for more intuitive layout controls.

<div className="g-[0/16]">…</div>

Grid

<div className="gc-s-(value) gce-(value) gcs-(value)">…</div>
<div className="gr-s-(value) gre-(value) grs-(value)">…</div>

Object Fit

of-c covers, of-f fills, of-sd scales down & of-none leaves the image at its own size.

Object Position

Nine positions: op-t, op-b, op-left, op-r & op-c for the edges & center, plus the corners as op-lt, op-lb, op-rt & op-rb.

Outline Color

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

Outline Offset

<div className="oo-[0/4]">…</div>

Outline Style

os-none, os-d, os-h & os-s, matching the border style names.

Outline Width

<div className="ow-[0/4]">…</div>

Spacing X & Y

<div className="s-x-(value)">…</div>
<div className="s-y-(value)">…</div>

Table Layout

tl-auto sizes columns to their content, tl-f fixes them.

Text Decoration Color

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

Text Decoration Style

tds-none, tds-d, tds-h & tds-s.

Text Decoration Thickness

tdt-auto & tdt-ff follow the font. tdt-0 through tdt-4 step from 0 to 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 className="mx-auto p-4">
  <div className="d-g gtc-1 g-4 sm:gtc-2 md:gtc-3 lg:gtc-4">
    <div className="…">…</div>
    <div className="…">…</div>
    <div className="…">…</div>
  </div>
</div>

Breakpoint Changes

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