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 the Yumma CSS documentation and playground by providing the necessary data and utilities in a 300 KB package.
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 { getAllUtils } from "@yummacss/api";
const all = getAllUtils();
Get only background utilities:
import { getBackgroundUtils } from "@yummacss/api";
const backgrounds = getBackgroundUtils();
Access a specific utility from a category:
import { getBoxModelUtils } from "@yummacss/api";
const boxModel = getBoxModelUtils();
const margin = boxModel["margin"];
Available API
Import utility group functions individually:
import {
getAllUtils,
getBackgroundUtils,
getBorderUtils,
getBoxModelUtils,
getColorUtils,
getEffectUtils,
getFlexboxUtils,
getFontUtils,
getGridUtils,
getInteractivityUtils,
getOutlineUtils,
getPositioningUtils,
getSvgUtils,
getTableUtils,
getTextUtils,
getTransformUtils,
} from "@yummacss/api";
For advanced use cases, use these types:
import type { UtilityMap, UtilityItem } from "@yummacss/api";
Subscribe to my newsletter
Read articles from Renildo Pereira directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by

Renildo Pereira
Renildo Pereira
Founder / CEO of Yumma CSS