Skip to content
We launched Yumma CSS v2.0 with Starlight! Check it out

Installation

What is Yumma CSS?

Yumma CSS is a utility-first library that uses abbreviated naming conventions that follow regular CSS syntax to help you debug, scale, and maintain your markup better and get your application out the door faster.

No need to set anything up, just install and off you go!

Installation

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

  1. Install Yumma CSS:

    Install the Yumma CSS Library using a package manager.

    Installing dependencies...
    npm i yummacss@latest
  2. Add yummacss to your main CSS file:

    src/style.css
    /* Minified Version */
    @import "/node_modules/yummacss/dist/yumma.min.css";
  3. Use Yumma CSS in your project:

    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="h-1/1 ins">
    <h1 class="fs-xxl fw-500 tc-pink">Yumma CSS + Node.js</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.