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!

Try Yumma CSS v3.0 straight in your browser on Yumma Play.

Get to know 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.

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.

npm install yummacss@latest --save-dev
  1. Add the configuration file

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

node_modules/
    ├── public/
    │   └── favicon.ico
    ├── src/
    │   ├── globals.css
    │   └── index.html
    ├── .gitignore
    ├── package-lock.json
    ├── package.json
    └── yummacss.config.js <- add this file
  1. 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.

```js
module.exports = {
source: ["./src/**/*.html"] // 👈
output: "./src/globals.css" // 👈
  buildOptions: {
    reset: true,
    minify: false,
  },
};
```
  1. Write CSS

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

```html


  
    
    
    
  

  
    
      Hello 👋 - name's Renildo.
      I'm the creator of Yumma CSS! 🖌️

      
        GitHub
      
    
  

```



    Enter fullscreen mode
    


    Exit fullscreen mode
    





Compile the SCSS
To compile the source into CSS you can run the following command:

   npx yummacss build



    Enter fullscreen mode
    


    Exit fullscreen mode
    




When you run the build command 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: .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-top: .25rem;
     padding-bottom: .25rem;
   }

   /* etc */



    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  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.

Box Shadow


Margin LTR/RTL
Padding LTR/RTL







Interactivity


Field Sizing







Positioning


Isolation
Visibility







Transforms


Rotate
Scale
Skew
Transform Origin





And a lot more! Check out the blog for more details.
  
  
  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.
  
  
  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.See what the bg-* background utility looks like compared to v2.1Also, 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.
  
  
  Conclusion
There is a LOT MORE going on with Yumma CSS v3 than what you see above. You can find out more about it in the documentation.If you're planning on migrating your project to [email protected] you can follow our migration guide in the documentation.
  
  
  Thanks for reading
If you enjoyed this post, you can follow Yumma CSS on Twitter and GitHub to get the latest updates on Yumma CSS.