Upgrade Guide

Yumma CSS v3 is a major update with a long list of new features, along with some breaking changes that you’ll need to know about when upgrading from v2 to v3. We did our best to make all the changes as user-friendly and logical as possible.

Working with the CLI

In v3, we’ve replaced the old @import and introduced a new CLI tool to work with Yumma CSS. Here’s how to set it up:

1. Update Yumma CSS

   Remove the old yummacss package.

   pnpm

   Terminal

   pnpm remove yummacss

   npm

   Terminal

   npm uninstall yummacss

   yarn

   Terminal

   yarn remove yummacss

   Install yummacss as a dev dependency.

   pnpm

   Terminal

   pnpm add yummacss -D

   npm

   Terminal

   npm i yummacss -D

   yarn

   Terminal

   yarn add yummacss -D

   
   

2. Initialize configuration

   Create a configuration file in your project.

   pnpm

   Terminal

   pnpx yummacss init

   npm

   Terminal

   npx yummacss init

   yarn

   Terminal

   yarn dlx yummacss init

3. Delete old imports

   Remove the old @import statements from your CSS files.

   styles.css

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

4. Set up configuration

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

   yumma.config.mjs

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

5. Build styles

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

   pnpm

   Terminal

   pnpx yummacss build

   npm

   Terminal

   npx yummacss build

   yarn

   Terminal

   yarn dlx yummacss build

Dependency changes

With Yumma CSS v3 you no longer need to install yummacss as a standard dependency. Instead, you can install it as a dev dependency. This is because Yumma CSS is now a CLI tool that generates CSS files based on your configuration.

pnpm

Terminal

pnpm add yummacss -D

npm

Terminal

npm i yummacss -D

yarn

Terminal

yarn add yummacss -D

Utility changes

Here are the utilities that have been renamed in v3:

Style	v2	v3
bottom	dir-b	bo-*
inset	dir-i	i-*
left	dir-l	l-*
right	dir-r	r-*
top	dir-t	t-*
columns	cols-*	c-*
height & width	dim-*	d-*
font-size: 1rem;	fs-b	fs-md
overflow	ovf-*	o-*
float	flo-*	fl-*
height / width	*-1/1	*-dvh
Any color utility	lead	slate

| *-lead

Color utility changes

In v3, both the light (l-) and dark (d-) characters are being removed across all color utilities. We are also renaming the lead color to slate.

index.html

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

Also, the color hue is increasing from 10% shade modification to 14%. This means that light colors will become lighter, and dark colors will become darker.

v2.1	v3.0	Difference
*-l-indigo-6	*-indigo-1	-2 characters
*-l-indigo-5	*-indigo-2	-2 characters
*-l-indigo-4	*-indigo-3	-2 characters
*-l-indigo-3	*-indigo-4	-2 characters
*-l-indigo-2	*-indigo-5	-2 characters
*-l-indigo-1	*-indigo-6	-2 characters
*-indigo	*-indigo	-0 characters
*-d-indigo-1	*-indigo-7	-2 character
*-d-indigo-2	*-indigo-8	-2 character
*-d-indigo-3	*-indigo-9	-2 character
*-d-indigo-4	*-indigo-10	-1 character
*-d-indigo-5	*-indigo-11	-1 character
*-d-indigo-6	*-indigo-12	-1 character

Align and Justify utility changes

With Yumma CSS v3, the align and justify utilities will have the stretch utility suffix updated from -s to -st.

index.html

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

Bottom / Inset / Left / Right / Top utility changes

The bottom, inset, left, right, and top utilities will have the dir- prefix removed.

index.html

<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="bo-*">...</div>
<div class="i-*">...</div>
<div class="l-*">...</div>
<div class="r-*">...</div>
<div class="t-*">...</div>

Columns utility changes

The columns utility have been shortened from cols-* to c-*.

index.html

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

Dimension utility changes

The height and width utilities have been shortened from dim-* to d-*.

index.html

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

Font Size utility changes

The font-size utilities have been renamed from fs-b to fs-md.

index.html

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

Overflow utility changes

The overflow utilities have been shortened from ovf-* to o-*.

index.html

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

Float utility changes

The float utilities have been shortened from flo-* to fl-*.

index.html

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

Dynamic viewport utility changes

The *-1/1 utility values have been renamed from *-1/1 to *-dvh.

index.html

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

Base style changes

We’re making some changes to base styles of Yumma CSS in v3 to make it more modern and consistent. These changes are turned on by default, but you can turn them off using the yummacss.config.mjs file.

By default, all paddings will be removed.

base.ts

* {
  margin: 0;
  padding: 0;
}

Font rendering is smoother, and a consistent system font is set as the default. — oshwcomeau.com

base.ts

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

base.ts

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.

base.ts

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

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

Interactive elements have clear outlines for accessibility.

base.ts

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

In the absence of content, textareas will exhibit a default height. — piccalil.li

base.ts

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

Disabled elements are visually distinct with reduced opacity and a “not-allowed” cursor.

base.ts

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

Headings adopt balanced text wrapping, consistent font sizes, and bold weights. — oshwcomeau.com

base.ts

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

p {
  text-wrap: pretty;
}

Small text and code elements are consistently scaled and inherited. Code elements will have consistent font family. — modern-normalize

base.ts

b,
strong {
  font-weight: 700;
}

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

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

Reset default link styles.

base.ts

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

Table headers are bold and sized consistently.

base.ts

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

Horizontal rules, details, and summaries are updated for better spacing and display. — modern-normalize

base.ts

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

details {
  display: block;
}

summary {
  display: list-item;
}

Disabling base styles

To disable the base styles generation you can set buildOptions.reset to false in the yummacss.config.mjs file.

yummacss.config.mjs

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