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:

/* 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.

<!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>

Add the CDN to your main CSS file

/* 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.

    <!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.