Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Introducing Yumma CSS API
Renildo Pereira
Renildo Pereira

Posted on • Originally published atyummacss.com

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

npminstall @yummacss/api
Enter fullscreen modeExit fullscreen mode

Usage examples

Get all utilities at once:

import{getAllUtils}from"@yummacss/api";constall=getAllUtils();
Enter fullscreen modeExit fullscreen mode

Get only background utilities:

import{getBackgroundUtils}from"@yummacss/api";constbackgrounds=getBackgroundUtils();
Enter fullscreen modeExit fullscreen mode

Access a specific utility from a category:

import{getBoxModelUtils}from"@yummacss/api";constboxModel=getBoxModelUtils();constmargin=boxModel["margin"];
Enter fullscreen modeExit fullscreen mode

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";
Enter fullscreen modeExit fullscreen mode

For advanced use cases, use these types:

importtype{UtilityMap,UtilityItem}from"@yummacss/api";
Enter fullscreen modeExit fullscreen mode

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Founder / CEO of Yumma CSS
  • Joined

More fromRenildo Pereira

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp