Skip to content

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!

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.

Yumma CSS MarkYumma CSS Mark

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.

Terminal window
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.

  1. 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
    /* Minified Version */
    @import "/node_modules/yummacss/dist/yumma.min.css";
  2. 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
  3. 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",
    };
  4. 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>
  5. 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 build

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

yummacss.config.js
export const config = {
content: ["src/**/*.{html}"],
output: "src/globals.css",
capabilities: {
core: false, // Disable base styles
minify: true, // Minifies 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.

Metricv2.1v3.0Improvement
Complete build13.88 s??????
File size (standard)3.21 MB??????
File size (minified)2.48 MB??????
Utilities coverage108176+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.

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
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-black;
outline-offset: 2px;
}
}

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

Default link styles are reset, with underline styling applied on hover for accessibility.

base/stylecent.scss
a {
color: inherit;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

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

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;

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;

Border Bottom / Left/ Right/ Top Radius

In v3, we’re adding individual tools for Border Radius. This helps avoid duplication while maintaining design consistency.

app.html
<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>
app.html
<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>
app.html
<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>
app.html
<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.

app.html
<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.0v2.1Improvement
bg-indigo-1bg-l-indigo-6-2 characters
bg-indigo-2bg-l-indigo-5-2 characters
bg-indigo-3bg-l-indigo-4-2 characters
bg-indigo-4bg-l-indigo-3-2 characters
bg-indigo-5bg-l-indigo-2-2 characters
bg-indigo-6bg-l-indigo-1-2 characters
bg-indigobg-indigo-0 characters
bg-indigo-7bg-d-indigo-1-2 character
bg-indigo-8bg-d-indigo-2-2 character
bg-indigo-9bg-d-indigo-3-2 character
bg-indigo-10bg-d-indigo-4-1 character
bg-indigo-11bg-d-indigo-5-1 character
bg-indigo-12bg-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.

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

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.

app.html
<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.

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

This also applies to the Max and Min Dimension utilities.

app.html
<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.

app.html
<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.

app.html
<div class="dir-b-* ..."></div>
<div class="bo-* ..."></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.

app.html
<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.

app.html
<div class="cnt">Container</div>