Yumma CSS v3.0 Beta

Take a look at what's coming in the next version of Yumma CSS.

It looks like you’re just as excited as we are about what’s to come in the next version of Yumma CSS! We can’t wait to show you what we’ve got in store. Get ready, because the next version of Yumma CSS is going to be amazing!

This version is a work in progress and some features might be updated or left out of the final version.

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. We’re making some big changes to keep improving Yumma and take it to the next level.

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

Hello Yumma CSS 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.

Install Yumma CSS:

Add yummacss to your project as dev dependency.

Learn about dependency changes here.
Terminal
```
npm install yummacss@latest --save-dev
```
Add the configuration file

Next, add the yummacss.config.js to the root level of your project.
- Directorynode_modules/
  - …
- Directorypublic
  - favicon.ico
- Directorysrc
  - globals.css
  - app.html
- .gitignore
- package-lock.json
- package.json
- yummacss.config.js

Set up the config file

To build the CSS from the source include the content array and the styles string options inside a config named object.

export const config = {
    content: ["src/**/*.{html}"],
    output: "src/globals.css",
    capabilities: {
      reset: false, // Optional
      minify: false, // Optional
    }
};

Write CSS

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

<!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 creator 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>

Compile the SCSS

To compile the source into CSS, run npx yummacss build in your terminal.

npx yummacss build

Whenever you run npx yummacss build, the CLI will create a new CSS file and scan project paths based on the yummacss.config.js to purge of any unused styles.

.rad-1 {
  border-radius: 0.25rem;
}

25 collapsed lines
.rad-2 {
  border-radius: 0.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: 0.25rem;
  padding-top: 0.25rem;
}

.bg-indigo {
  background-color: rgb(89, 92, 217);
}

.h\:bg-indigo-7:hover {
  background-color: rgb(76.54, 79.12, 186.62);
}

.bg-white {
  background-color: white;
}

47 collapsed lines
.bc-silver-2 {
  border-color: rgb(235.8, 236.7, 238.2);
}

.bc-silver-2 {
  border-bottom-color: rgb(235.8, 236.7, 238.2);
}

.bc-silver-2 {
  border-left-color: rgb(235.8, 236.7, 238.2);
}

.bc-silver-2 {
  border-right-color: rgb(235.8, 236.7, 238.2);
}

.bc-silver-2 {
  border-top-color: rgb(235.8, 236.7, 238.2);
}

.tc-indigo {
  color: rgb(89, 92, 217);
}

.tc-gray-7 {
  color: rgb(82.56, 88.58, 98.9);
}

.tc-white {
  color: white;
}

.bs-sm {
  box-shadow: 1px 3px 5px -2px rgba(0, 0, 0, 0.1);
}

.fs-sm {
  font-size: 0.875rem;
}

.fs-lg {
  font-size: 1.125rem;
}

.fw-600 {
  font-weight: 600;
}

All-new utilities

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

Category	Properties
Backgrounds	Background Attachment, Background Clip, Background Origin, Background Position, Background Repeat, Background Size
Borders	Border Spacing, Border Bottom/Left/Right/Top Radius
Box Model	Margin: Block End, Block Start, Inline End, Inline Start; Padding: Block End, Block Start, Inline End, Inline Start
Effect	Blur, Box Decoration Break, Grayscale
Flexbox	Order, Place, Place Content, Place Items, Place Self
Interactivity	Scroll Behavior, Scroll Margin: Bottom, Inline End, Inline Start, Left, Right, Top, X, Y; Scroll Padding: Bottom, Inline End, Inline Start, Left, Right, Top, X, Y; Scroll Snap Align, Scroll Snap Stop, Scroll Snap Type; Field Sizing
Positioning	Clear, Direction (Axis), Isolation, Visibility
SVG	Fill, Stroke, Stroke Width
Text	Letter Spacing, List Style Position, Text Indent, Text Overflow, Text Transform, Text Underline Offset, Text Wrap, Whitespace
Transforms	Rotate, Scale, Skew, Transform Origin

Build performance

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

Metric	v2.1	v3.0	Improvement
Complete build	13.88 s	???	???
File size (standard)	3.21 MB	???	???
File size (minified)	2.48 MB	???	???
Utilities coverage	111	167	+55

Upgrading to v3.0

Remove @import rules

The CLI works by compiling SCSS to CSS, so there’s no need to import the Yumma CSS package dependency.
src/globals.css
```
@import "/node_modules/yummacss/dist/yumma.min.css";
```
Add the Yumma config file

Create a yummacss.config.js file at the project root.
- Directorynode_modules/
  - …
- Directorypublic
  - favicon.ico
- Directorysrc
  - globals.css
  - app.html
- .gitignore
- package-lock.json
- package.json
- yummacss.config.js

Set up the config file

Setup the content array and output string field.

export const config = {
  content: ["src/**/*.{html}"],
  output: "src/globals.css",
  capabilities: {
    reset: true, // Optional
    minify: true, // Optional
  },
};

Compile the SCSS

Run npx yummacss build in your terminal to compile to CSS.
Terminal
```
npx 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

Consider installing yummacss as a dev dependency when using the CLI feature since we’re now dealing with SCSS compilation, so there’s no need for you to ship extra content in your project.

npm install yummacss@latest --save-dev

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.

<button class="bg-l-indigo-6 h:bg-d-indigo-1">Hello</button>
<button class="bg-indigo-1 h:bg-indigo-7">Hello</button>

See what the bg-* background utility looks like compared to v2.1

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

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.

v3.0
v2.1

Base

Red

Orange

Yellow

Green

Teal

Cyan

Blue

Indigo

Violet

Pink

Lead

Gray

Silver

Stylecent changes

We’re making some changes to Stylecent 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.js file.

By default, all paddings will be removed.

* {
  margin: 0;
  padding: 0;
}

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

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.

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.

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

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

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

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

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

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.

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

Table headers are bold and sized consistently.

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

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

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

details {
  display: block;
}

summary {
  display: list-item;
}

Disabling Stylecent

From now on, files like yumma-core.css and yumma-core.min.css will be deleted from the /dist folder in favor of the yummacss.config.js config file.

v3.0
v2.1

export const config = {
    content: ["src/**/*.{html}"],
    output: "src/globals.css",
    capabilities: {
        reset: false, // Disable base styles
        minify: true, // Minifies CSS
    }
};

/* Disable base styles */
@import "https://cdn.jsdelivr.net/gh/yumma-lib/yumma-css@latest/dist/yumma-core.css";

/* Disable base styles and minify CSS */
@import "https://cdn.jsdelivr.net/gh/yumma-lib/yumma-css@latest/dist/yumma-core.min.css";

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.

Breakpoint	v2.1	v3.0
`sm`	640px	40rem (640px)
`md`	768px	48rem (768px)
`lg`	1024px	64rem (1024px)
`xl`	1280px	80rem (1280px)
`xxl`	1536px	96rem (1536px)

Fixed responsive utilities

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

We’ve grouped related responsive 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 utilities

In v3, we’re changing the align-content utility prefix from ac-s to ac-st to match with other utilities like ji-st and js-st.

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

Align Items utilities

Additionally, in v3, we’re changing changing the align-items utility prefix from ai-s to ai-st.

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

Align Self utilities

Additionally, in v3, we’re changing align-self utility prefix from as-s to as-st to match with other utilities like ji-st and js-st.

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

Justify Content utilities

Finally, in v3, we’re changing changing the justify-content utility prefix from jc-s to jc-st to match with other utilities like ji-st and js-st.

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

Border Bottom Radius utilities

In v3, we’re adding new border-radius utilities starting with rad-b-*

<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 utilities

Additionally, in v3, we’re also adding rad-l-* to add left rounded edges only to an element.

<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 utilities

Additionally, in v3, we’re also adding rad-r-* to add right rounded edges only to an element.

<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 utilities

Finally, in v3, we’re also adding rad-t-* to add top rounded edges only to an element.

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

Bottom / Left / Right / Top utilities

In v3, we’ve also made changes to the way the Bottom / Left / Right / Top utilities are written. This includes changes to the Bottom, Left, Right, and Top variants.

<div class="dir-b-* ..."></div>
<div class="bo-* ..."></div>

<div class="dir-l-* ..."></div>
<div class="l-* ..."></div>

<div class="dir-r-* ..."></div>
<div class="r-* ..."></div>

<div class="dir-t-* ..."></div>
<div class="t-* ..."></div>

Columns utilities

In v3, we’re making the columns utilities even smaller than before.

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

Dimension utilities

In v3, we’ve made the Dimension utility even more abbreviated to align with the purpose of the framework.

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

Max Dimension utilities

Additionally, in v3, we’re changing the Max Dimension utility syntax.

This also applies to the Max and Min Dimension utilities.

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

Min Dimension utilities

Finally, in v3, we’re changing the Min Dimension utility syntax.

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

Font Size utilities

In v3, new font-size utilities are being incorporated, and the visual sequential incremental between values is being enhanced to rectify the previous exaggerated outputs.

v3.0
v2.1

Class	Properties
fs-xs	`font-size: 0.75rem;`
fs-sm	`font-size: 0.875rem;`
fs-b	`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;`

Class	Properties
fs-xs	`font-size: 0.75rem;`
fs-b	`font-size: 1rem;`
fs-sm	`font-size: 1.5rem;`
fs-md	`font-size: 2.25rem;`
fs-lg	`font-size: 3rem;`
fs-xl	`font-size: 3.75rem;`
fs-xxl	`font-size: 4.5rem;`
fs-3xl	`font-size: 5.25rem;`
fs-6xl	`font-size: 6rem;`
fs-9xl	`font-size: 6.75rem;`

Font Family utilities

In v3, new font stacks are being implemented, existing utilities are being refined, and additional fallback options are being incorporated for every font-family utility class. — https://modernfontstacks.com/

v3.0
v2.1

Class	Properties
ff-c	`font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif; font-weight: 500;`
ff-m	`font-family: "Nimbus Mono PS", "Courier New", monospace; font-weight: 500;`
ff-s	`font-family: system-ui, sans-serif; font-weight: 500;`

Class	Properties
ff-c	`font-family: Charter, Cambria, serif;`
ff-m	`font-family: ui-monospace, Consolas, monospace;`
ff-s	`font-family: system-ui, sans-serif;`

Overflow utilities

In v3, we’ve completely reworked the overflow utility class syntax.

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

Overflow X utilities

Additionally, in v3, we’ve shortened the overflow-x utility class.

<div class="ovf-x-auto ..."></div>
<div class="o-x-auto ..."></div>

Overflow Y utilities

Finally, in v3, we’ve shortened the overflow-y utility class.

<div class="ovf-y-auto ..."></div>
<div class="o-y-auto ..."></div>

Removed Spacing X utilities

In v3 we’ve removed the 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 or d-if.

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

Removed Spacing Y utilities

The same concept applies to the Spacing Y utilities. You should now use the Column Gap utilities instead. You can even combine the Column Gap utilities with other utilities like d-f or d-if.

<div class="d-if fd-c stripes rg-8 tc-white">
  <div class="ai-c bg-indigo d-f dim-16 jc-c rad-1">A</div>
  <div class="ai-c bg-indigo d-f dim-16 jc-c rad-1">B</div>
  <div class="ai-c bg-indigo d-f dim-16 jc-c rad-1">C</div>
</div>

Removed Container utility

We are no longer supporting the cnt utility. We are making improvements to our modifiers to make them more flexible and easier to use.

<div class="cnt"></div>

Removed Insert utility

It’s been a great ride, and we’re sure most of you have used it to easily center a div in the middle of the screen, but this concept was not very useful in many case scenarios where you would typically need more customizability, so we’ve decided to remove it.

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