Creating Apps

Learn how to build custom apps with Yumma CSS Core.

The Foundation Of Yumma CSS

The @yummacss/core package is the base structure that holds every possible utility definition, prefix, and variant used in Yumma CSS.

Installation

Install the package using your preferred package manager:

pnpm add @yummacss/core

Quick Start

The Core package exports functions to retrieve utility definitions by category or as a whole.

Getting All Utilities

Retrieve every single utility definition available in Yumma CSS.

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

const all = coreUtils();

Scoped Utilities

If you only need a specific category, you can import scoped functions.

import { backgroundUtils, fontUtils } from "@yummacss/core";

console.log(backgroundUtils()); // Returns background-related utilities
console.log(fontUtils());       // Returns font-related utilities

Understanding The Data Structure

Each utility in Yumma CSS is represented by a Utility object. Understanding this structure is key to building tools on top of the Core.

The Utility Interface

interface Utility {
  readonly prefix: string;          // The class name prefix (e.g., "ba")
  readonly properties: readonly string[];    // The CSS properties controlled (e.g., ["background-attachment"])
  readonly slug: string;            // The unique identifier for the utility
  readonly values: {                // A map of keys to their CSS values
    readonly [key: string]: string;
  };
  readonly variants?: Variants;     // Supported variants like hover or media queries
}

Concrete Example

Here is how the background-attachment utility looks like under the hood:

{
  "background-attachment": {
    "prefix": "ba",
    "properties": ["background-attachment"],
    "slug": "background-attachment",
    "values": {
      "f": "fixed",
      "l": "local",
      "s": "scroll"
    },
    "variants": {
      "mediaQueries": [...],
      "pseudoClasses": [...]
    }
  }
}

Available Functions

The Core package provides the following functions to access utility definitions:

Function	Description
`coreUtils()`	Returns all available Yumma CSS utilities.
`backgroundUtils()`	Utilities for background properties.
`borderUtils()`	Utilities for borders and radius.
`boxModelUtils()`	Spacing, dimensions, and box model properties.
`colorUtils()`	The entire Yumma CSS color palette.
`effectUtils()`	Shadows, opacity, and filters.
`flexboxUtils()`	Flexbox layout definitions.
`fontUtils()`	Typography and font-related properties.
`gridUtils()`	CSS Grid layout definitions.
`interactivityUtils()`	Cursors, accents, and user interaction.
`outlineUtils()`	Outline styling and offsets.
`positioningUtils()`	Positioning, z-index, and layout flow.
`svgUtils()`	SVG-specific properties like fill and stroke.
`tableUtils()`	Table layouts and border collapse.
`textUtils()`	Text alignment, decoration, and overflow.
`transformUtils()`	Transforms, rotations, and scales.
`transitionsUtils()`	Transitions and timing functions.

Variants

The Core package exports all of the available Yumma CSS utility variants raw data:

Accessing Variants

You can import the variant arrays directly from the package.

import { mediaQueries, opacity, pseudoClasses, pseudoElements } from "@yummacss/core";

console.log(mediaQueries);

Variant Structure

Each variant follows a consistent prefix and value structure.

[
  { "prefix": "sm", "value": "min-width: 40rem" },
  { "prefix": "50", "value": "80" },
  { "prefix": "h", "value": ":hover" },
  { "prefix": "b", "value": "::before" }
]

Type	Description
`mediaQueries`	Responsive breakpoints and media conditions.
`opacity`	Modifiers for color transparency from 0 to 100.
`pseudoClasses`	Interactive states like `:hover` or `:focus`.
`pseudoElements`	Structural elements like `::before` or `::after`.

Typescript Support

The Core package is written in TypeScript and exports all internal interfaces and literal types for a better developer experience.

Utility Types

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

const customTool = (data: Utilities) => {
  // your logic here
};

Variant Literal Types

For even better type safety, we export literal types for every variant prefix. This is particularly useful for IDE extensions and plugins.

import type {
    MediaQueryPrefix,
    OpacityPrefix,
    PseudoClassPrefix,
    PseudoElementPrefix,
    VariantPrefix
} from "@yummacss/core";

// VariantPrefix is a union of all available prefixes
const prefix: VariantPrefix = "sm"; // Typed as a literal