Skip to content
Get ready for the next version of Yumma CSS, which is going to be amazing!

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.

  1. Install Yumma CSS:

    Choose a package manager to start installing yummacss.

    Terminal window
    npm i yummacss
  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.