Skip to content
Support Yumma CSS by starring us on GitHub!

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.

  1. Install Yumma CSS:

    Add yummacss to your project.

    Installing dependencies...
    npm install yummacss@latest
  2. Include yummacss in your main CSS file:

    src/globals.css
    /* Minified Version */
    @import "/node_modules/yummacss/dist/yumma.min.css";
  3. 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>

First steps

Learn about Yumma CSS, and see how it works differently from other CSS frameworks.