Use Negative Values

Yumma CSS supports negative values for specific utilities like margins, positioning & letter spacing. Use the (prefix)--(value) syntax to apply a negative value.

Margin

Use negative margins to overlap elements or create unique layouts. Negative margins are available for all margin utilities (m-, mt-, mr-, mb-, ml-, mx- & my-).

<div className="z-1 …">A</div>
<div className="ml--4 z-2 …">B</div>
<div className="ml--4 z-3 …">C</div>

Positioning

Apply negative offsets to position elements outside their parents or create overlapping effects. This works with t-, r-, b-, l- & i- utilities.

<div className="p-r …">
  <div className="p-a t--4 l--4 …"></div>
</div>

Z-Index

Negative z-index values allow you to place elements behind their siblings or parents. Use zi--(value) to target negative stack levels.

<div className="p-r …">
  <div className="p-a zi--10 …"></div>
  <span>Background Layer</span>
</div>

Sign Toggle

Specific utilities in Yumma CSS use a sign-toggle behavior. Instead of simply prepending a negative sign, the double-dash -- syntax flips the current sign of the utility's value. This is particularly useful for utilities where the default value is already negative.

Letter Spacing

Utilities like ls-1 & ls-2 are defined with negative CSS values. Using the sign-toggle syntax ls--1 or ls--2 flips these to positive values, resulting in wider spacing instead of tighter spacing.

| Class | Standard Value | Negated Class | Negated Value | | ------ | -------------- | ------------- | ------------- | | ls-0 | 0 | ls--0 | 0 | | ls-1 | -0.05 em | ls--1 | 0.05 em | | ls-2 | -0.025 em | ls--2 | 0.025 em | | ls-3 | 0.025 em | ls--3 | -0.025 em | | ls-4 | 0.05 em | ls--4 | -0.05 em | | ls-5 | 0.1 em | ls--5 | -0.1 em |

<p className="ls-1 …">Standard (Tight)</p>
<p className="ls--1 …">Negated (Wide)</p>