Get started with Yumma CSS
Yumma CSS provides a set of utility classes and components to help you ship and build applications faster, whether you're designing static pages or dynamic components.
Installation
Install Yumma CSS and integrate it with your favorite frameworks, such as React, Next.js or Astro, in a matter of seconds.
-
Install Yumma CSS:
Add
yummacss
to your project.Installing dependencies... npm install yummacss@latest -
Include
yummacss
in your main CSS file:src/globals.css /* Minified Version */@import "/node_modules/yummacss/dist/yumma.min.css"; -
Done!
You’re all set to start using Yumma CSS utility classes in your project.
src/index.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="app.css" /></head><body><div class="ai-c d-f h-1/1 jc-c"><h1 class="fs-xxl fw-500 tc-pink">Yumma CSS + Node.js</h1></div></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.
Preact Lightweight React alternative.
React Library for interactive UIs.
Solid.js High-performance reactive UI.
Svelte Compiles to optimized JavaScript.
Vue Progressive UI framework.
.NET Dynamic server-side web apps.
-
Add the CDN to your main CSS file
src/globals.css /* Minified Version */@import "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 <!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="app.css" /></head><body><div class="h-1/1 ins"><h1 class="fs-xxl fw-500 tc-pink">Yumma CSS + Static</h1></div></body></html>
First steps
Learn about Yumma CSS, and see how it works differently from other CSS frameworks.
Styling using colors Use predefined colors for an amazing Yumma CSS project!
Building styles Make the most of limited utilities for complex components!
Conditional styles Modifiers conditionally override other utility classes.
Optimizing CSS Optimize your bundle: Purge unused utilities for better performance.