DOCSEARCHbyAlgolia
Submit Docs

Yumma CSS Documentation

website·Indexed 32 days ago

https://yummacss.com

A utility-first CSS framework featuring a CLI, bundler plugin, and CDN installation. It provides a comprehensive system of utility classes for colors, animations, layout, and borders, supporting responsive design via media queries, container queries, and nested variants.

Tokens
141.5K
Snippets
868
Records
1.1K
Agent score
61%

What's inside Yumma CSS

  1. Overview of Yumma UI architecture and workflow

    Yumma UI is a collection of production-ready components built using Base UI for accessibility (focus management, keyboard navigation, and screen reader semantics) and Yumma CSS for styling. Unlike traditional component libraries, Yumma UI is not installed as a dependency; instead, developers copy the component source code directly into their projects. This eliminates versioning conflicts and allows for direct modification of the markup and utility classes without fighting CSS specificity or theme objects.

  2. Overview of Yumma UI

    Yumma UI is a collection of ready-to-use UI components built on Base UI for accessibility and keyboard navigation. Components are styled using Yumma CSS utility classes. Unlike traditional libraries, Yumma UI components are copied directly into your project codebase via a CLI, allowing developers to fully own and edit the component code.

  3. Overview of Scroll Margin for snapping and alignment

    The scroll-margin property is used to set the margin for scroll snapping and alignment. This feature is widely available and supported across major browsers, including Chrome 69+, Edge 79+, Firefox 68+, and Safari 11+.

  4. Overview of Margin utilities in Yumma CSS

    Yumma CSS provides utility classes to set the margin for elements. These utilities are widely available and compatible with all major browsers, including Chrome 1+, Edge 12+, Firefox 1+, and Safari 1+.

  5. Overview of Inset utility for positioned elements

    The Inset utility is used to set the placement of positioned elements. This feature is widely available and supported across major browsers, including Chrome 89+, Edge 89+, Firefox 66+, and Safari 15+.

  6. Set text color for an element

    Use color utility classes to set the text color for an element. This feature is widely available and supported across all major browsers (Chrome 1+, Edge 12+, Firefox 1+, Safari 1+).

  7. Set the right placement of positioned elements using r utility classes

    Use the r utility classes to define the right placement of positioned elements. This feature is widely supported across all major browsers (Chrome 1+, Edge 12+, Firefox 1+, Safari 1+).

  8. Use the Popover component

    The Popover component displays floating content anchored to a trigger. It can be triggered by a click or hover and supports a title, description, and custom children content. It is built on Base UI and includes features like automatic flip positioning when space is limited.
    import Popover from './components/ui/popover';

function Example() {
  return (
    <Popover 
      trigger={<span className="icon-user" />} 
      triggerLabel="User Profile"
      title="User Settings"
      description="Manage your account preferences here."
    >
      <div>Custom content like a swatch grid or form goes here.</div>
    </Popover>
  );
}

  9. Implement a paged product tour with the Onboarding component

    The Onboarding component creates a multi-step guided tour within an AlertDialog. It supports sequential navigation through a set of steps, each containing an icon, title, and description. Users can be guided through a simple sequence or a checklist of tasks per step.
    import Onboarding from './components/ui/onboarding';

const steps = [
  {
    icon: <InfoIcon />,
    title: "Welcome",
    description: "Let's get you started with the platform.",
  },
  {
    icon: <SettingsIcon />,
    title: "Configuration",
    description: "Set up your preferences.",
    tasks: [
      { id: 'email', label: 'Verify email' },
      { id: 'profile', label: 'Complete profile' },
    ],
  },
];

export default function App() {
  return (
    <Onboarding 
      trigger="Get Started" 
      steps={steps} 
      indicator="dots" 
    />
  );
}

  10. Set element border colors with YummaCSS

    YummaCSS provides utility classes to set the color of element borders. This feature is widely supported across all major browsers, including Chrome 1+, Edge 12+, Firefox 1+, and Safari 1+.

  11. Use the Textarea component

    The Textarea component is a multi-line text field built on Base UI. It supports labels, descriptions, validation states (error/success), and a character counter. It provides several visual options for corner shapes and depth shadows.
    import Textarea from './components/ui/textarea';

function App() {
  return (
    <Textarea 
      label="Comments"
      description="Please provide detailed feedback"
      placeholder="Enter your text here..."
    />
  );
}

  12. Set element rotation with YummaCSS

    Use the rotate utility to set the rotation of an element. This feature is widely supported across modern browsers, including Chrome 104+, Edge 104+, Firefox 72+, and Safari 14.1+.