Get started with Yumma CSS
Yumma CSS works by scanning your project files to generate and clean up any unused styles, keeping your code as small as possible β no bloat at all!
Installation
Install Yumma CSS and integrate it with your favorite frameworks, such as React, Vue or Astro, in a matter of seconds.
-
Install Yumma CSS
Add
yummacss
to your project.Installing dependencies... npm i yummacss -- --save-devInstalling dependencies... pnpm add yummacss --save-devInstalling dependencies... yarn add yummacss --save-dev -
Configure your source paths
Include the paths to all source files in
yumma.config.js
file.yumma.config.js module.exports = {source: ["./src/**/*.html"],output: "./src/styles.css",}; -
Writing styles
Run the
watch
command to generate styles in your CSS file.Building styles... npx yummacss watchBuilding styles... pnpm yummacss watchBuilding styles... yarn yummacss watch -
Done!
Youβre all set to start using Yumma CSS utility classes in your project.
src/index.html <html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="/src/styles.css" /></head><body><h1 class="fs-sm fw-700 ta-c tc-indigo">Yumma CSS π€ Node.js</h1></body></html>
Angular A scalable web app framework.
Astro Modern static site builder.
Next.js An advanced React framework.
Nuxt.js Powerful framework for Vue.js apps.
Qwik Instantly-interactive web apps.
Preact Lightweight React alternative.
React Library for interactive UIs.
Solid.js High-performance reactive UI.
Svelte Compiles to optimized JavaScript.
Vue Progressive UI framework.
-
Add the CDN to your main CSS file
src/styles.css @import url("https://cdn.jsdelivr.net/gh/yumma-lib/yumma-css@latest/dist/yumma.min.css";) -
Done!
Youβre all set to start using Yumma CSS utility classes in your project.
src/index.html <html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="/src/styles.css" /></head><body><h1 class="fs-sm fw-700 ta-c tc-indigo">Yumma CSS π€ HTML</h1></body></html>
What next?
Learn about Yumma CSS, and see how it works differently from other CSS frameworks.
Writing styles Learn how to build styles using Yumma CSS.
Building themes Learn how customize your design system.
Conditional styles Learn how to use and apply conditional styles.
Optimizing CSS Learn how to optimize your Yumma project.