Installation

What is 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.

Installation

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 HTML file

Just add the CDN to the <head> tag to your HTML file, and you’re good to go!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Minified version -->
    <link href="https://cdn.jsdelivr.net/gh/yumma-lib/yumma-css@latest/dist/yumma.min.css" rel="stylesheet" crossorigin="anonymous" />
  </head>
  <body>
    <div class="h-1/1 ins">
      <h1 class="fs-xxl fw-500 tc-pink">Try Yumma CSS CDN</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.

Color System Use predefined colors to keep designs consistent across Yumma CSS projects.

Responsive Design Use media queries to make interfaces responsive to any screen size.

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

Variants Use variants such as hover to create more engaging elements.