# Yumma CSS

This project styles with Yumma CSS (https://yummacss.com). Write its classes, not another library's, and check them before you finish.

## Syntax

- A class is property initials, a colon, value initials: `d:f` is `display: flex`, `jc:sb` is `justify-content: space-between`.
- Numbers and scales keep their position: `p:4` is `padding: 1rem` (one step is 0.25rem), `fs:lg`, `fw:600`. `none` and `auto` stay whole: `d:none`.
- Variants go first, each followed by a colon: `h:bg:indigo-7` on hover, `@md:d:f` from the md breakpoint, `b::c:indigo` on `::before`. They stack: `@sm:h:bg:red`.
- Opacity follows a slash: `bg:red-5/50`. A negative value takes a minus after the colon: `ml:-4`.
- There are no arbitrary values: `w:37px` is not a class. A value off the scale is a CSS function with no spaces: `max-h:calc(100dvh-5rem)`, `w:var(--width)`.
- Yumma is a name, not a theme. There is no `yum-` prefix and no dash between property and value.

## Values

- Spacing and sizing run from `0` to `384`, in steps of 0.25rem: `w:96` is `24rem`. Percentages and viewport units are values too: `w:100%`, `h:dvh`.
- Colors: red, orange, yellow, lime, mint, green, cyan, sky, blue, indigo, violet, lavender, magenta, pink, coral, zinc, gray, slate, silver, plus `white`, `black` and `transparent`. Each has a base and twelve shades: `1` to `6` lighter, `7` to `12` darker, as in `bg:indigo`, `bg:indigo-2`, `c:slate-10`.
- Breakpoints, from that width up: `@xs:` @media (min-width: 32rem), `@sm:` @media (min-width: 40rem), `@md:` @media (min-width: 48rem), `@lg:` @media (min-width: 64rem), `@xl:` @media (min-width: 80rem), `@xxl:` @media (min-width: 96rem).
- Container queries, on a child of an element with `ct:is`: `@c:xs:` @container (min-width: 32rem), `@c:sm:` @container (min-width: 40rem), `@c:md:` @container (min-width: 48rem), `@c:lg:` @container (min-width: 64rem), `@c:xl:` @container (min-width: 80rem), `@c:xxl:` @container (min-width: 96rem).
- Other at-rules: `@pc:` @media (pointer: coarse), `@prm:` @media (prefers-reduced-motion: reduce), `@st:` @starting-style.
- States: `a:` :active, `c:` :checked, `d:` :disabled, `e:` :empty, `f:` :focus, `fc:` :first-child, `fv:` :focus-visible, `fw:` :focus-within, `h:` :hover, `i:` :invalid, `in:` :indeterminate, `lc:` :last-child, `nc:` :nth-child, `r:` :required, `ro:` :read-only, `v:` :valid.
- Pseudo-elements: `a::` :after, `b::` :before, `p::` ::placeholder, `s::` ::selection.
- Colors, breakpoints and states the project adds live in `yumma.config.mjs` under `theme`. Read it before using a name that is not listed here.

## Check

- After editing classes, run `pnpm dlx yummacss lint`. It lists every class Yumma CSS does not generate, with the closest one that exists. Use the suggestion; do not keep a class it reports.
- In a project that uses Oxlint, the `@yummacss/lint` rules report the same in the editor, and `no-inline-styles` names the class for a property set in `style`.
- Every utility has a page named after its CSS property, as plain text: https://yummacss.com/docs/justify-content.md. The index is https://yummacss.com/llms.txt.