Core Package

What is Yumma CSS Core?

It's an open-source library written in TypeScript that gives you access to all the Yumma CSS class definitions through simple functions. It's the same library that powers Yumma CSS, this documentation, and our playground.

Installing the Core Package

Install the Yumma CSS Core package using your preferred package manager:

npm install @yummacss/core

Getting all definitions

Retrieve all available definitions at once.

import { coreUtilities } from "@yummacss/core";

const all = coreUtilities();

Getting category definitions

Retrieve all definitions for a specific category.

import { backgroundUtilities } from "@yummacss/core";

console.log(backgroundUtilities());

Getting specific definitions

Retrieve a specific definition from a category.

import { boxModelUtilities } from "@yummacss/core";

const boxModel = boxModelUtilities();
const margin = boxModel["margin"];

console.log(margin);

Available functions

These are the available functions:

Core Utilities

Returns all available Yumma CSS utilities as a single object.

type: Utilities

Background Utilities

Returns all utility related to backgrounds.

type: Utilities

Border Utilities

Returns all utility related to borders.

type: Utilities

Box Model Utilities

Returns all utility related to the box model.

type: Utilities

Color Utilities

Returns all utility related to colors.

type: Utilities

Effect Utilities

Returns all utility related to effects.

type: Utilities

Flexbox Utilities

Returns all utility related to flexbox.

type: Utilities

Font Utilities

Returns all utility related to fonts.

type: Utilities

Grid Utilities

Returns all utility related to CSS Grid.

type: Utilities

Interactivity Utilities

Returns all utility related to interactivity.

type: Utilities

Outline Utilities

Returns all utility related to outlines.

type: Utilities

Positioning Utilities

Returns all utility related to positioning.

type: Utilities

Svg Utilities

Returns all utility related to SVG.

type: Utilities

Table Utilities

Returns all utility related to tables.

type: Utilities

Text Utilities

Returns all utility related to text.

type: Utilities

Transform Utilities

Returns all utility related to transforms.

type: Utilities

Using Typescript

Using Typescript? You might need to import the following types:

import type { Utilities, Colors } from "@yummacss/core";
import type { Utility, Color } from "@yummacss/core";

Utility interface

Represents a Yumma CSS utility.

import type { Variants } from "./variants";

export interface Utility {
  prefix: string;
  properties: string[];
  slug: string;
  values: { [key: string]: string };
  variants?: Variants;
}

export interface Utilities {
  [key: string]: Utility;
}

Color interface

Represents a Yumma CSS utility color.

import type { Utility } from "./utility";

export interface Color extends Utility {}

export interface Colors {
  [key: string]: Color;
}

Variant interface

Represents a Yumma CSS utility variant.

export interface PseudoClass {
  prefix: string;
  value: string;
}

export interface PseudoElement {
  prefix: string;
  value: string;
}

export interface MediaQuery {
  prefix: string;
  value: string;
}

export interface Opacity {
  prefix: string;
  value: string;
}

export interface Variants {
  pseudoClasses?: PseudoClass[];
  pseudoElements?: PseudoElement[];
  mediaQueries?: MediaQuery[];
  opacity?: Opacity[];
}