Introducing Yumma CSS API

Today, we are introducing @yummacss/api, a TypeScript/JavaScript library designed to meet a variety of development needs. It provides access to all base Yumma CSS class definitions in a programmatic manner, simplifying the integration process.

Why Yumma CSS API?

It fuels both all Yumma CSS documentation, playground, and now Yumma CSS CLI by providing the necessary data and utilities.

Instead of manually searching for utilities or maintaining your own lists, you can now access the entire Yumma CSS utility set through simple, type-safe functions. This makes it easy to:

• Generate documentation
• Build custom apps, plugins or extensions
• Integrate with frameworks
• Analyze or extend your design system

Getting started

Yumma CSS API is a powerful TypeScript/JavaScript utility library that provides programmatic access to Yumma CSS class definitions.

Installing

npm install @yummacss/api

Usage examples

Get all utilities at once:

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

const all = coreUtils();

Get only background utilities:

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

const backgrounds = backgroundUtils();

Access a specific utility from a category:

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

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

Available API

Import utility group functions individually:

import {
  coreUtils,
  backgroundUtils,
  borderUtils,
  boxModelUtils,
  colorUtils,
  effectUtils,
  flexboxUtils,
  fontUtils,
  gridUtils,
  interactivityUtils,
  outlineUtils,
  positioningUtils,
  svgUtils,
  tableUtils,
  textUtils,
  transformUtils,
} from "@yummacss/api";

Learn more in the developer API documentation.