Installation

Get started with Yumma CSS

Yumma CSS is a utility-first library that uses abbreviated naming conventions that follow regular CSS syntax — it’s a great way to scale and maintain your project with less code.

Here’s how you can add yummacss into your project or framework.

Install Yumma CSS:

Select your preferred package manager to install yummacss.
Installing dependencies...
```
npm i yummacss@latest
```

Add yummacss to your main CSS file:

/* Minified Version */
@import "/node_modules/yummacss/dist/yumma.min.css";

Use Yumma CSS in your project:

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";

Use Yumma CSS in your project:

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>

Next steps

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

Colors Use predefined colors for an amazing Yumma CSS project!

Utility Classes Make the most of limited utilities for complex components!

Utility Modifiers Modifiers conditionally override other utility classes.

Optimizing CSS Optimize your bundle: Purge unused utilities for better performance.