Upgrading

Modern versions of Yumma CSS introduce significant improvements, including a new CLI-based workflow & core shifts in utility naming.

Previous versions relied on @import statements; the current system uses a dedicated CLI for better performance & flexibility.

Legacy versions

In this guide, legacy refers to Yumma CSS v2 & earlier versions. These older systems are no longer actively developed & lack the performance optimizations of the current CLI-driven core.

1. 1

   Update Yumma CSS

   Remove the old yummacss package.

   pnpm add yummacss@latest

2. 2

   Initialize configuration

   Create a configuration file in your project.

   pnpx yummacss init

3. 3

   Delete old imports

   Remove the old @import statements from your CSS files.

   @import "yummacss/dist/yumma.min.css";
   @import "yummacss/dist/yumma.css";

4. 4

   Set up configuration

   Specify the locations of all your project files in the config file.

   export default {
     source: ["./src/**/*.html"],
     output: "./src/styles.css",
     buildOptions: {
       reset: true,
       minify: false,
     },
   };

5. 5

   Build styles

   You can now start generating your CSS with the build or watch command.

   pnpx yummacss build

Dependency changes

Yumma CSS now functions as a CLI tool. Install it as a dev dependency (-D) instead of a standard dependency to keep your production bundle lean.

pnpm add yummacss -D

Core package

Replace the @yummacss/api package with @yummacss/core. Update your imports accordingly.

pnpm remove @yummacss/api
pnpm add @yummacss/core

Utility changes

Utilities renamed in the current version:

Color utility changes

In the current version, light (l-) & dark (d-) characters are removed across all color utilities. lead is renamed to slate.

<button class="bg-l-lead-6 h:bg-d-lead-1">Button</button>
<button class="bg-slate-1 h:bg-slate-7">Button</button>

Color hue modification increased from 10 % to 14 %. Light colors are lighter; dark colors are darker.

Align & justify

Stretch utility suffixes updated from -s to -st.

<div class="ai-st">...</div>
<div class="jc-st">...</div>
<div class="ai-s">...</div>
<div class="jc-s">...</div>

Top / Right / Bottom / Left

dir- prefix removed for layout utilities.

<div class="dir-b-*">...</div>
<div class="dir-i-*">...</div>
<div class="dir-l-*">...</div>
<div class="dir-r-*">...</div>
<div class="dir-t-*">...</div>
<div class="b-*">...</div>
<div class="i-*">...</div>
<div class="l-*">...</div>
<div class="r-*">...</div>
<div class="t-*">...</div>

Columns

cols-* shortened to c-*.

<div class="cols-*">...</div>
<div class="c-*">...</div>

Dimension

dim-* and d-* utilities were removed. Use w- and h- utilities instead.

<div class="dim-*">...</div>
<div class="d-*">...</div>

Font size

fs-b renamed to fs-md.

<div class="fs-b">...</div>
<div class="fs-md">...</div>

Font family

Utility prefixes renamed for clarity:

<div class="ff-s">...</div>
<div class="ff-c">...</div>
<div class="ff-d">...</div>
<div class="ff-s">...</div>

Overflow

ovf-* shortened to o-*.

<div class="ovf-*">...</div>
<div class="o-*">...</div>

Float

flo-* shortened to fl-*.

<div class="flo-*">...</div>
<div class="fl-*">...</div>

Dynamic viewport

*-1/1 renamed to *-dvh.

<div class="w-1/1 h-1/1">...</div>
<div class="d-1/1">...</div>
<div class="w-dvh h-dvw">...</div>
<div class="d-dvh">...</div>

Border width

b-* renamed to bw-*.

<div class="b-*">...</div>
<div class="bw-*">...</div>

This also applies to directional border width utilities:

Border color

Directional border color utilities now use a consistent 3-character prefix.

Border radius

Directional border radius utilities now use a consistent 3-character prefix.

Border style

b-* renamed to bs-*.

<div class="b-solid">...</div>
<div class="bs-solid">...</div>

Border radius

rad-9 renamed to br-pill.

<div class="rad-9">...</div>
<div class="br-pill">...</div>

Color utilities

Text color prefix shortened from tc- to c-.

<div class="tc-slate">...</div>
<div class="c-slate">...</div>

Box shadow

Prefix updated from bsh- to bs-o- for outset shadows & bs-i- for inset shadows.

<div class="bsh-md">...</div>
<div class="bs-o-md">...</div>
<div class="bs-i-md">...</div>

Rotation

Prefix updated from t-r- to ro-. standalone rotate property is now used.

<div class="t-r-*">...</div>
<div class="ro-*">...</div>

Scale

The standalone scale property is now used instead of transform: scale().

<div class="t-s-*">...</div>
<div class="t-sx-*">...</div>
<div class="t-sy-*">...</div>
<div class="s-*">...</div>
<div class="sx-*">...</div>
<div class="sy-*">...</div>

Isolation

Prefix updated from i- to is-.

<div class="i-*">...</div>
<div class="is-*">...</div>

Base style changes

Modern Yumma CSS versions include standardized base styles for better consistency. These are enabled by default & can be disabled in yumma.config.mjs.

Remove paddings by default:

* {
  margin: 0;
  padding: 0;
}

Smother font rendering with a default system font. Source: joshwcomeau.com.

html {
  font-family: system-ui, sans-serif;
}

Form elements now include padding by default. Borders are added for form elements without class attributes.

body {
  -webkit-font-smoothing: antialiased;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

Form elements now include padding by default. Borders are added for form elements without class attributes.

button,
input,
optgroup,
select,
textarea {
  background-color: transparent;
  font-family: inherit;
  padding: 0.5 rem;
}

button:not([class]),
input:not([class]),
optgroup:not([class]),
select:not([class]),
textarea:not([class]) {
  border: 1px solid #bfc2c7;
}

Clear outlines for interactive elements to improve accessibility.

button,
input,
textarea,
select,
a,
summary {
  &:focus {
    outline: 2px solid transparent;
  }
}

Textareas without rows use a default height. Source: piccalil.li.

textarea:not([rows]) {
  min-height: 10 em;
}

Distinct visual states for disabled elements.

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

Headings use balanced wrapping, consistent sizes, & bold weights.

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1rem;
  font-weight: 600;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

Standardized scaling for small text & code elements. Source: modern-normalize.

b,
strong {
  font-weight: 700;
}

small {
  font-size: 80 %;
  line-height: 1.4;
}

pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1 em;
}

Reset default link styles:

a {
  color: inherit;
  text-decoration: none;
}

Consistent table header styling:

th {
  font-size: 1rem;
  font-weight: 600;
}

Updated spacing for miscellaneous elements.

hr {
  border-top: 1px solid #bfc2c7;
  height: 0;
  margin: 1 em 0;
}

details {
  display: block;
}

summary {
  display: list-item;
}

Disable base styles

Set buildOptions.reset to false in yumma.config.mjs to disable base styles.

export default {
  buildOptions: {
    reset: false,
    minify: false,
  },
};