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.
In v3 we're planning to address some major performance issues and add and improve existing utilities in the framework among other things.
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.
-
Install Yumma CSS
Add
yummacssto your project as dev dependency.npm install yummacss@latest --save-dev
-
Add the configuration file
Next add the
yummacss.config.jsto the root level of your project or runnpx yummacss initto 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
-
Set up the config file
To generate styles using the CLI just set up the
sourcearray with the path to your template files and set theoutputstring with the path to the CSS file you want to generate.module.exports = { source: ["./src/**/*.html"] // 👈 output: "./src/globals.css" // 👈 buildOptions: { reset: true, minify: false, }, };
-
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 you can run the following command:
npx yummacss build
When you run the
buildcommand the CLI will create a new CSS file and scan project paths based on theyummacss.config.jsto 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 */
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
- Interactivity
- Positioning
- Transforms
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.1
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.
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.
