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:

Choose a package manager to start installing yummacss.
- npm
- yarn
- pnpm
Terminal window
npm i yummacss
Terminal window
yarn add yummacss
Terminal window
pnpm add yummacss

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="h-1/1 ins">
      <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>

CSS options

Once Yumma CSS has been installed via Package Manager or CDN, you will be able to access different compiled CSS files.

/dist/yumma.css — Standard
/dist/yumma.min.css — Minified
/dist/yumma-core.css — Standard (without Stylecent)
/dist/yumma-core.min.css — Minified (without Stylecent)

Next steps

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

Colors Use predefined colors for consistency in Yumma CSS projects.

Utility Classes Use a constrained set of primitive utilities for complex components.

Utility Modifiers Use modifiers to override other utility classes.

Optimizing CSS Make your code more efficient for production.