Skip to content
Yumma CSS Logo Yumma CSS Logo Yumma CSS
Blog

Yumma CSS 3.0

Yumma CSS 3.0.0
Renildo Pereira
Renildo Pereira
@rrenildoo

After almost six months of hard work, we’re super excited to share all of the new features, improvements, and fixes that we think you’re going to love.

This is the biggest release of Yumma CSS, and we can’t wait for you to try it out!

This update might break your codebase, we highly suggest you checking out the release notes before upgrading.

What’s new in v3.0?

We’ve completely rewritten the code base for Yumma CSS v3, both internally and externally, and we’re excited to improve the way you deal with CSS.

In v3, we’re planning to address some major performance issues and add and improve existing utilities in the framework, among other things.

All-new CLI

Until recently, you had to import a lot of annoying CSS from Yumma CSS, which was a real pain.

With v3, you won’t have to stress about shipping unused CSS to the browser. The new CLI will scan and get rid of them for you automatically.

  1. Install Yumma CSS

    Add yummacss to your project as dev dependency.

    Learn more about dependency changes.
    Terminal
    pnpm add yummacss -D

  2. Add the configuration file

    Next, add the yumma.config.js to the root level of your project or run npx yummacss init to create it for you.

    • Directorynode_modules/
      • …
    • Directorypublic
      • favicon.ico
    • Directorysrc
      • globals.css
      • index.html
    • .gitignore
    • package-lock.json
    • package.json
    • yumma.config.js

  3. Set up the config file

    To generate styles using the CLI, just set up the source array with the path to your template files and set the output string with the path to the CSS file you want to generate.

    yumma.config.js
    module.exports = {
      source: ["./src/**/*.html"],
      output: "./src/globals.css",
      buildOptions: {
        reset: true,
        minify: false,
      },
    };

  4. Write CSS

    Start using Yumma CSS utilities in your to generate CSS with the CLI.

    index.html
    <!DOCTYPE html>
    <html lang="en">
    

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/src/globals.css" />
    </head>
    

    <body>
      <div class="b-1 bc-silver-2 bg-white rad-2 bs-sm p-4">
          <h1 class="fw-600 tc-indigo fs-lg">Hello 👋, name's Renildo.</h1>
          <p class="tc-gray-7">I'm the Founder / CEO of Yumma CSS 💛</p>
    

          <button class="bg-indigo fs-sm h:bg-indigo-7 mt-6 px-4 py-1 rad-1 tc-white">GitHub</button>
      </div>
    </body>
    

    </html>

  5. Compile the SCSS

    To compile the source into CSS, ou can run the following command:

    Terminal
    pnpm yummacss build

    When you run the build command the CLI will create a new CSS file and scan project paths based on the yumma.config.js to purge of any unused styles.

    globals.css
    .rad-1 {
      border-radius: .25rem;
    }
    

    .rad-2 {
      border-radius: .5rem;
    }
    

    .b-1 {
      border-width: 1px;
    }
    

    .mt-6 {
      margin-top: 1.5rem;
    }
    

    .p-4 {
      padding: 1rem;
    }
    

    .px-4 {
      padding-left: 1rem;
      padding-right: 1rem;
    }
    

    .py-1 {
      padding-bottom: .25rem;
      padding-top: .25rem;
    }
    

    /* etc */

New utilities and variants

To make the Yumma CSS framework as complete as possible, we’re adding support for over 50 utilities to the core of the framework.

  • Added Background Attachment utilities.
  • Added Background Clip utilities.
  • Added Background Origin utilities.
  • Added Background Position utilities.
  • Added Background Repeat utilities.
  • Added Background Size utilities.
  • Added Blur utilities.
  • Added Border Spacing utilities.
  • Added Bottom Radius utilities.
  • Added Top/Right/Bottom/Left (Axis) utilities.
  • Added Clear utilities.
  • Added Field Sizing utilities.
  • Added Fill utilities.
  • Added Font Family fallbacks.
  • Added Grayscale utilities.
  • Added Isolation utilities.
  • Added Left Radius utilities.
  • Added Letter Spacing utilities.
  • Added List Style Position utilities.
  • Added Margin Block End utilities.
  • Added Margin Block Start utilities.
  • Added Margin Inline End utilities.
  • Added Margin Inline Start utilities.
  • Added Order utilities.
  • Added Padding Block End utilities.
  • Added Padding Block Start utilities.
  • Added Padding Inline End utilities.
  • Added Padding Inline Start utilities.
  • Added Place Content utilities.
  • Added Place Items utilities.
  • Added Place Self utilities.
  • Added Right Radius utilities.
  • Added Rotate utilities.
  • Added Scale utilities.
  • Added Scroll Behavior utilities.
  • Added Scroll Margin Bottom utilities.
  • Added Scroll Margin Inline End utilities.
  • Added Scroll Margin Inline Start utilities.
  • Added Scroll Margin Left utilities.
  • Added Scroll Margin Right utilities.
  • Added Scroll Margin Top utilities.
  • Added Scroll Margin X utilities.
  • Added Scroll Margin Y utilities.
  • Added Scroll Margin utilities.
  • Added Scroll Snap Align utilities.
  • Added Scroll Snap Stop utilities.
  • Added Scroll Snap Type utilities.
  • Added Skew utilities.
  • Added Stroke Width utilities.
  • Added Stroke utilities.
  • Added Text Indent utilities.
  • Added Text Overflow utilities.
  • Added Text Transform utilities.
  • Added Text Underline Offset utilities.
  • Added Text Wrap utilities.
  • Added Top Radius utilities.
  • Added Transform Origin utilities.
  • Added Visibility utilities.
  • Added White Space utilities.

…and more

You can check the release notes for the full list of new utilities.

Build performance

We completely overhauled the entire codebase to get better performance in build times and overall file size. We changing the way all utilities are generated, to eliminate any potential for duplicated or unnecessary data in the /dist folder.

Metricv2.1v3.0Improvement
Complete build13.88 s3.96 s-9.92 s (71% faster)
File size (standard)3.21 MB2.53 MB-0.68 MB (21% smaller)
File size (minified)2.48 MB1.89 MB-0.59 MB (24% smaller)
Utilities coverage111167+56

Upgrading to v3.0

If you’re using Yumma CSS v2 or older, the process of upgrading to v3 using the Yumma CLI is honestly super easy.

  1. Remove @import rules

    The CLI works by compiling SCSS to CSS, so there’s no need to import the Yumma CSS package dependency.

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

  2. Add the Yumma config file

    Create a yumma.config.js file at the project root.

    • Directorynode_modules/
      • …
    • Directorypublic
      • favicon.ico
    • Directorysrc
      • globals.css
      • index.html
    • .gitignore
    • package-lock.json
    • package.json
    • yumma.config.js

  3. Set up the config file

    Setup the source array and output string field.

    yumma.config.js
    module.exports = {
      source: ["./src/**/*.html"],
      output: "./src/globals.css",
      buildOptions: {
        reset: true,
        minify: true,
      },
    };

  4. Compile the SCSS

    Run npx yummacss build in your terminal to compile to CSS.

    Terminal
    pnpm yummacss build

Changes in v3.0

Like some of the past major updates, Yumma CSS v3 is changing its core framework structure. Just so you know, there are going to be a few breaking changes in the release, so it might be worth taking a look before you update.

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.

Terminal
pnpm add yummacss -D

The full set of utilities will be retained within the distribution folder for the purpose of facilitating the importation of the entire Yumma utilities suite, should this be required.

  • Directorydist
    • yumma.css
    • yumma.min.css

Color utility changes

In v3, both the light (l-) and dark (d-) characters are being removed across all color utilities. As a result, the range used to determine a color’s shade was also adjusted.

index.html
<button class="bg-l-indigo-6 h:bg-d-indigo-1">Button</button>
<button class="bg-indigo-1 h:bg-indigo-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.

Here’s a quick reference using background-color

v2.1v3.0Difference
*-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
1
2
3
4
5
6
Base
7
8
9
10
11
12

Red

Orange

Yellow

Green

Teal

Cyan

Blue

Indigo

Violet

Pink

Lead

Gray

Silver

Base style changes

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

By default, all paddings will be removed.

base/stylecent.scss
* {
  margin: 0;
  padding: 0;
}

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

base/stylecent.scss
html {
  font-family: vars.$yma-font-system;
}
base/stylecent.scss
body {
  -webkit-font-smoothing: antialiased;
  font-family: vars.$yma-font-system;
  line-height: 1.5;
}

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

base/stylecent.scss
button,
input,
optgroup,
select,
textarea {
  background-color: vars.$yma-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 vars.$yma-color-silver;
}

Interactive elements have clear outlines for accessibility.

base/stylecent.scss
button,
input,
textarea,
select,
a,
summary {
  &:focus {
    outline: 2px solid vars.$yma-color-transparent;
  }
}

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

base/stylecent.scss
textarea:not([rows]) {
  min-height: 10em;
}

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

base/stylecent.scss
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/stylecent.scss
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/stylecent.scss
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/stylecent.scss
a {
  color: inherit;
  text-decoration: none;
}

Table headers are bold and sized consistently.

base/stylecent.scss
th {
  font-size: 1rem;
  font-weight: 600;
}

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

base/stylecent.scss
hr {
  border-top: 1px solid vars.$yma-color-silver;
  height: 0;
  margin: 1em 0;
}


details {
  display: block;
}


summary {
  display: list-item;
}

Disabling Stylecent

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,
  },
};

Breakpoint changes

In v3, we are moving from pixel-based units to rem-based units. This change promotes better accessibility and scalability, as rem units respect the user’s browser font size settings.

v2.1v3.0Breakpoint
640px40rem (640px)sm
768px48rem (768px)md
1024px64rem (1024px)lg
1280px80rem (1280px)xl
1536px96rem (1536px)xxl

Fixed media query utilities

We’re finally rolling out fixes for all the unexpected behaviors that popped up when using media query utilities in Yumma CSS v3.

We’ve grouped related media query utilities together so they can override existing ones in the DOM like they were supposed to.

This improvement also eliminates redundant CSS and makes the framework more predictable and easier to develop with.

Align Content

index.html
<div class="ac-s ..."></div>
<div class="ac-st ..."></div>

Align Items

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

Align Self

index.html
<div class="as-s ..."></div>
<div class="as-st ..."></div>

Justify Content

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

Border Bottom Radius

index.html
<button class="b-1 bg-black rad-bl-2 rad-br-2 tc-white">Subscribe</button>
<button class="b-1 bg-black rad-b-2 tc-white">Subscribe</button>

Border Left Radius

index.html
<button class="b-1 bg-black rad-bl-2 rad-tl-2 tc-white">Subscribe</button>
<button class="b-1 bg-black rad-l-2 tc-white">Subscribe</button>

Border Right Radius

index.html
<button class="b-1 bg-black rad-br-2 rad-tr-2 tc-white">Subscribe</button>
<button class="b-1 bg-black rad-r-2 tc-white">Subscribe</button>

Border Top Radius

index.html
<button class="b-1 bg-black rad-tl-2 rad-tr-2 tc-white">Subscribe</button>
<button class="b-1 bg-black rad-t-2 tc-white">Subscribe</button>

Top / Right / Bottom / Left

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

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

Dimension

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

Max Dimension

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

Min Dimension

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

Font Size

Class Style

fs-xs

 font-size: 0.75rem;

fs-sm

 font-size: 0.875rem;

fs-md

 font-size: 1rem;

fs-lg

 font-size: 1.125rem;

fs-xl

 font-size: 1.25rem;

fs-xxl

 font-size: 1.5rem;

fs-3xl

 font-size: 1.875rem;

fs-4xl

 font-size: 2.25rem;

fs-5xl

 font-size: 3rem;

fs-6xl

 font-size: 3.75rem;

fs-7xl

 font-size: 4.5rem;

fs-8xl

 font-size: 6rem;

fs-9xl

 font-size: 8rem;

Font Family

Class Style

ff-c

 font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;

ff-m

 font-family: "Nimbus Mono PS", "Courier New", monospace;

ff-s

 font-family: system-ui, sans-serif;

Overflow

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

Overflow X

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

Overflow Y

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

Float

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

Dimension, Height and Width

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

Removed Container utility

index.html
<div class="cnt"></div>

Removed Insert utility

index.html
<div class="ins ..."></div>
<div class="ai-c d-f jc-c ..."></div>

Removed Spacing X utilities

You can use the Row Gap utilities instead for almost all cases, and even combine the Row Gap utilities with other utilities like d-f (display: flex) or d-if (display: inline-flex).

A
B
C
index.html
<div class="d-if fd-r cg-8 tc-white" id="area">
  <div class="ai-c bg-indigo d-f d-16 jc-c rad-1">A</div>
  <div class="ai-c bg-indigo d-f d-16 jc-c rad-1">B</div>
  <div class="ai-c bg-indigo d-f d-16 jc-c rad-1">C</div>
</div>

Removed Spacing Y utilities

The same idea applies to the Column Gap utilities by the way.

A
B
C
index.html
<div class="d-if fd-c rg-8 tc-white" id="area">
  <div class="ai-c bg-indigo d-f d-16 jc-c rad-1">A</div>
  <div class="ai-c bg-indigo d-f d-16 jc-c rad-1">B</div>
  <div class="ai-c bg-indigo d-f d-16 jc-c rad-1">C</div>
</div>

Removed *-1/2 property values

Turns out it wasn’t very useful at all.

index.html
<div class="h-1/2 ..."></div>
<div class="w-1/2 ..."></div>
<div class="d-1/2 ..."></div>
Tags: