Yumma CSS v3.0 Beta
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!
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. Some features might be updated or left out of the final version.
New logotype, new logomark
After putting in weeks of work and going through a bunch of trials, we finally refreshed the new logo and design of Yumma CSS — Special shout-out to @heydut for their help.


This new logo shows the major changes to Yumma CSS 3.0 and how it will have a positive impact on future versions. We’ve switched from a Pink to an Indigo color.
We also changed the shape of the logomark to resemble the flexibility that v3 is all about. Check out our brand logotype guidelines here.
Yumma CSS CLI
Up until recently, the only way to use Yumma CSS was to import the compiled CSS into your main CSS file. As Yumma CSS is becoming more and more extensive, importing all its content at once might cause performance issues and slower loading times.
We’re really excited to introduce Yumma CSS CLI, an awesome new way to create production-ready and fully optimized Yumma CSS projects.
Dependency changes
If you’re planning on using the command-line interface feature, we suggest installing yummacss as a dev dependency since we’re now dealing with SCSS compilation on the user side.
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
Upgrade from v2.1
The new command-line interface (CLI) system lets you compile and get rid of any unused utilities you’re not using in your Yumma CSS project, which means smaller CSS files and better performance.
-
Remove
@import
rulesThe CLI works by compiling SCSS to CSS, so there’s no need to import the Yumma CSS package dependency.
src/globals.css /* Minified Version */@import "/node_modules/yummacss/dist/yumma.min.css"; -
Add the Yumma config file
Next, add the
yummacss.config.js
to the root level of your project.Directorypublic
- favicon.ico
Directorysrc
- globals.css
- app.html
- .gitignore
- package-lock.json
- package.json
- yummacss.config.js
-
Set up the config file
To allow the CLI command to scan your project files and build the CSS base in the output path, add the content array and output string field.
yummacss.config.js export const config = {content: ["src/**/*.{html}"],output: "src/globals.css",}; -
Write CSS
Start using Yumma CSS utilities in your markup to generate CSS with the CLI.
app.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 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 SCSS into CSS, just run
npx yummacss build
in your terminal to compile and scan all your configured styles.Terminal npx yummacss buildWhenever you run
npx yummacss build
, the CLI will rescan the whole project to make sure you’re always compiling what your project is using. This also purges of any useless utilities in your codebase.globals.css 138 collapsed lines/*** Yumma CSS v3.0.0 by Renildo Pereira | https://www.yummacss.com/*//** -- Box sizing --* 1. Use a more intuitive box-sizing model to make the design consistent.* 2. Remove default margin and padding.* 3. Reset default border styles.*/*,*::before,*::after {box-sizing: border-box; /* 1 */border: 0 solid; /* 3 */}* {margin: 0; /* 2 */padding: 0; /* 2 */}/** -- Document --* 1. Improve font smoothing.* 2. Set a default system font.* 3. Add accessible line-height.*/body {-webkit-font-smoothing: antialiased; /* 1 */font-family: system-ui, sans-serif; /* 2 */line-height: 1.5; /* 3 */}/** -- Media Elements --* 1. Ensure all media elements like images, videos, and canvases are block-level.* 2. Limit their maximum width to the parent container.*//** -- Form Elements --* 1. Reset background and border styles for form elements.* 2. Use `inherit` to ensure font consistency within forms.* 3. Add default padding for usability.*/button {background-color: transparent; /* 1 */font-family: inherit; /* 2 */padding: 0.5rem; /* 3 */}/*** Add a default border to form elements that do not have a class attribute.*/button:not([class]) {border: 1px solid rgb(191, 194, 199); /* 1 */}/*** Apply consistent focus styles to interactive elements.*/button:focus {outline: 2px solid black;outline-offset: 2px;}/*** Set a minimum height for textareas without a defined `rows` attribute.*//*** Ensure the buttons have a pointer cursor.*/button {cursor: pointer;}/** Disabled States* 1. Reduce opacity and set a "not-allowed" cursor for disabled elements.*/button:disabled {cursor: not-allowed; /* 1 */opacity: 0.5; /* 1 */}/** -- Typography --* 1. Avoid text overflows.* 2. Improve line wrapping for headings.* 3. Add a consistent font weight for bold text.*/h1,p {overflow-wrap: break-word; /* 1 */}h1 {font-size: 1rem; /* 3 */font-weight: 600; /* 3 */text-wrap: balance; /* 2 */}p {text-wrap: pretty; /* 2 */}/*** Add the correct font weight in Chrome, Edge, and Safari.*//*** Add the correct font size in all browsers.*//*** 1. Correct the inheritance and scaling of font size in all browsers.* 2. Correct the odd `em` font sizing in all browsers.*//** -- Links --* 1. Remove underline styling from links by default.* 2. Restore underline styling on hover for accessibility.* 3. Reset color to inherit from parent element.*//** -- Lists --* Remove default list styling and padding.*//** -- Tables --* 1. Add a consistent font weight for bold text.*//** -- Miscellaneous --* 1. Add the correct height in Firefox.* 2. Correct text decoration.* 3. Add spacing around horizontal rules.*//*** Ensure details and summary elements display correctly.*/.rad-1 {border-radius: 0.25rem;}.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);}51 collapsed lines.bg-white {background-color: white;}.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;}
Core changes
From now on, core 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.
export const config = { content: ["src/**/*.{html}"], output: "src/globals.css", capabilities: { core: 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";
Performance boost
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 | 108 | 176 | +68 |
Stylecent changes
We’re making some changes to Stylecent in version 3 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-black; outline-offset: 2px; }}
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;}
Default link styles are reset, with underline styling applied on hover for accessibility.
a { color: inherit; text-decoration: none;}
a:hover { text-decoration: underline;}
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;}
All-new utilities
To make the Yumma CSS framework as complete as possible, we’re adding support for over 60 utility classes to the core of the framework.
Backgrounds
- Background Attachment
- Background Clip
- Background Origin
- Background Position
- Background Repeat
- Background Size
Borders
- Border Spacing
- Border 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
Layout
- 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
- Vertical Align
- Whitespace
Transforms
- Rotate
- Scale
- Skew
- Transform Origin
- Translate
Transitions
- Transition Delay
- Transition Duration
- Transition Property
Font Size
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.
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
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/
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; |
Border Bottom / Left/ Right/ Top Radius
In v3, we’re adding individual tools for Border Radius. This helps avoid duplication while maintaining design consistency.
<button class="b-1 bg-black rad-bl-2 rad-br-2 tc-white">Send</button><button class="b-1 bg-black rad-b-2 tc-white">Send</button>
<button class="b-1 bg-black rad-bl-2 rad-tl-2 tc-white">Send</button><button class="b-1 bg-black rad-l-2 tc-white">Send</button>
<button class="b-1 bg-black rad-br-2 rad-tr-2 tc-white">Send</button><button class="b-1 bg-black rad-r-2 tc-white">Send</button>
<button class="b-1 bg-black rad-tl-2 rad-tr-2 tc-white">Send</button><button class="b-1 bg-black rad-t-2 tc-white">Send</button>
Color improvements
In v3, both the light (l-
) and dark (d-
) specifiers are being removed across all color utilities. As a result, the range used to determine a color’s shade was also adjusted.
To make this easier to understand, let’s look at the background-color
utility.
<button class="bg-l-indigo-6 h:bg-d-indigo-1">Hello</button><button class="bg-indigo-1 h:bg-indigo-7">Hello</button>
v3.0 | v2.1 | Improvement |
---|---|---|
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.
Syntax changes
We’re making Yumma CSS even more concise with the utility classes to keep everything minimal. Here are some of the new changes we’ve got planned:
Columns
In v3, we’re making the columns
utilities even smaller than before.
<div class="cols-* ..."></div><div class="c-* ..."></div>
Dimension
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>
This also applies to the Max and Min Dimension utilities.
<div class="max-dim-* min-dim-* ..."></div><div class="max-d-* min-d-* ..."></div>
Spacing
In v3, we’ve shortened the syntax for the Spacing utilities.
<div class="s-x-* s-y-* ..."></div><div class="sx-* sy-* ..."></div>
Bottom / Left / Right / Top
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>
Removed utilities
It’s time to say goodbye to some of the old utilities in Yumma CSS. Here are some of the utilities we’ve removed:
.ins{}
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>
.cnt{}
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">Container</div>