Developer API

Type definitions for Yumma CSS projects.

Yumma CSS API provides programmatic access to Yumma CSS class definitions, for creating anything from apps, plugins, extensions, scripts and more.

Installation

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

pnpm add @yummacss/api

npm i @yummacss/api

yarn add @yummacss/api

Getting All Definitions

Retrieve all available definitions at once.

import { coreUtils } from "@yummacss/api";

const all = coreUtils();

Getting Category Definitions

Retrieve all definitions for a specific category.

import { backgroundUtils } from "@yummacss/api";

console.log(backgroundUtils());

Getting Specific Definitions

Retrieve a specific definition from a category.

import { boxModelUtils } from "@yummacss/api";

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

console.log(margin);

Available Functions

These are the available functions:

`coreUtils()`

Returns all available Yumma CSS utilities as a single object.

type: Utilities

`backgroundUtils()`

Returns all utility related to backgrounds.

type: Utilities

`borderUtils()`

Returns all utility related to borders.

type: Utilities

`boxModelUtils()`

Returns all utility related to the box model.

type: Utilities

`colorUtils()`

Returns all utility related to colors.

type: Utilities

`effectUtils()`

Returns all utility related to effects.

type: Utilities

`flexboxUtils()`

Returns all utility related to flexbox.

type: Utilities

`fontUtils()`

Returns all utility related to fonts.

type: Utilities

`gridUtils()`

Returns all utility related to CSS Grid.

type: Utilities

`interactivityUtils()`

Returns all utility related to interactivity.

type: Utilities

`outlineUtils()`

Returns all utility related to outlines.

type: Utilities

`positioningUtils()`

Returns all utility related to positioning.

type: Utilities

`svgUtils()`

Returns all utility related to SVG.

type: Utilities

`tableUtils()`

Returns all utility related to tables.

type: Utilities

`textUtils()`

Returns all utility related to text.

type: Utilities

`transformUtils()`

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/api";
import type { Color, Utility } from "@yummacss/api";

Utility interface

Represents a Yumma CSS utility.

import { Variants } from "./variant";

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 color.

import { Utility } from "./utility";

export interface Color extends Utility {}

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

Variant interface

Represents a Yumma CSS variant.

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

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

export interface Variants {
  pseudoClasses?: PseudoClass[];
  mediaQueries?: MediaQuery[];
}