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

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!

This version is still a work in progress, as are the changes to this page, so some features might be updated, removed, or never included in 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.

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.

Production-ready with 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 i 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 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
      • page.html
    • .gitignore
    • package-lock.json
    • package.json
    • yummacss.config.js // Add the config file

  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. Compile the SCSS

    To compile the SCSS from to CSS, just run npx yummacss build. This command will only compile the used CSS that’s been scanned in your project files each time you run the command. It’ll also tree shake any unusable utilities in your code.

    Terminal
    npx yummacss build

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.

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

Form elements now include padding and border-radius 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;
  border-radius: 0.25rem;
  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;
  }
}


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 {
  opacity: 0.5;
  cursor: not-allowed;
}

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

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.

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.

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
  • Margin Block Start
  • Margin Inline End
  • Margin Inline Start
  • Padding Block End
  • Padding Block Start
  • Padding Inline End
  • Padding Inline Start
Effect
  • Blur
  • Box Decoration Break
  • Grayscale
Flexbox
  • Order
  • Place Content
  • Place Items
  • Place Self
Interactivity
  • Scroll Behavior
  • Scroll Margin
  • Scroll Margin Bottom
  • Scroll Margin Inline End
  • Scroll Margin Inline Start
  • Scroll Margin Left
  • Scroll Margin Right
  • Scroll Margin Top
  • Scroll Margin X
  • Scroll Margin Y
  • Scroll Padding
  • Scroll Padding Bottom
  • Scroll Padding Inline End
  • Scroll Padding Inline Start
  • Scroll Padding Left
  • Scroll Padding Right
  • Scroll Padding Top
  • Scroll Padding X
  • Scroll Padding 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

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

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>

Direction

In v3, we’ve also made changes to the way the Direction 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>