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.

Install Yumma CSS:

Install the Yumma CSS Library using a package manager.
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="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.