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:

In this case, we’re importing the minified version of Yumma CSS.
src/globals.css
```
@import "/node_modules/yummacss/dist/yumma.min.css";
```

Done!

You’re all set to start using Yumma CSS utility classes in your project.

<html>
  <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>
    <h1 class="fs-sm fw-700 ta-c tc-indigo">Yumma CSS 🤝 Node.js</h1>
  </body>
</html>

Add the CDN to your main CSS file

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

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

Building styles Learn how to build styles using Yumma CSS.

Styling using colors 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.