After almost six months of hard work, we're super excited to share all 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. Try Yumma CSS v3.0 straight in your browser on Yumma Play. 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. What's new in Yumma CSS 3.0? — On YouTube What's new in Yumma CSS 3.0? — On YouTube 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 yummacss to your project as dev dependency. npm install yummacss@latest --save-dev 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 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. module.exports = { source: ["./src/**/*.html"] // 👈 output: "./src/globals.css" // 👈 buildOptions: { reset: true, minify: false, }, }; Write CSS Start using Yumma CSS utilities 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 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 */ Install Yumma CSS Add yummacss to your project as dev dependency. npm install yummacss@latest --save-dev Install Yumma CSS Install Yumma CSS Add yummacss to your project as dev dependency. yummacss npm install yummacss@latest --save-dev npm install yummacss@latest --save-dev 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 Add the configuration file 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. yummacss.config.js npx yummacss init node_modules/ ├── public/ │ └── favicon.ico ├── src/ │ ├── globals.css │ └── index.html ├── .gitignore ├── package-lock.json ├── package.json └── yummacss.config.js <- add this file 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 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. module.exports = { source: ["./src/**/*.html"] // 👈 output: "./src/globals.css" // 👈 buildOptions: { reset: true, minify: false, }, }; Set up the config file 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. source output module.exports = { source: ["./src/**/*.html"] // 👈 output: "./src/globals.css" // 👈 buildOptions: { reset: true, minify: false, }, }; module.exports = { source: ["./src/**/*.html"] // 👈 output: "./src/globals.css" // 👈 buildOptions: { reset: true, minify: false, }, }; Write CSS Start using Yumma CSS utilities 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> Write CSS Write CSS Start using Yumma CSS utilities 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> <!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 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 */ Compile the SCSS Compile the SCSS To compile the source into CSS, you can run the following command: npx yummacss build npx yummacss build 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. build yummacss.config.js .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 */ .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 Margin LTR/RTL Padding LTR/RTL Interactivity Field Sizing Positioning Isolation Visibility Transforms Rotate Scale Skew Transform Origin Box Shadow Margin LTR/RTL Padding LTR/RTL Box Shadow Margin LTR/RTL Padding LTR/RTL Margin LTR/RTL Margin LTR/RTL Margin LTR/RTL Padding LTR/RTL Padding LTR/RTL Padding LTR/RTL Interactivity Field Sizing Interactivity Field Sizing Field Sizing Field Sizing Field Sizing Positioning Isolation Visibility Positioning Isolation Visibility Isolation Isolation Isolation Visibility Visibility Visibility Transforms Rotate Scale Skew Transform Origin Transforms Rotate Scale Skew Transform Origin Rotate Rotate Rotate Scale Scale Scale Skew Skew Skew Transform Origin Transform Origin Transform Origin And a lot more! Check out the blog for more details. blog Build performance We completely overhauled the entire codebase to get better performance in build times and overall file size. We're changing the way utilities and modifiers are generated, to eliminate any potential for duplicated or unnecessary data in the /dist folder. /dist 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. l- d- See what the bg-* background utility looks like compared to v2.1 bg-* 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. 10% 14% 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. LOT MORE documentation If you're planning on migrating your project to yummacss@3.0 you can follow our migration guide in the documentation. yummacss@3.0 migration guide 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. Twitter GitHub
