Negative Values

Reference for applying negative offsets & margins.

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.

Background Layer

<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`

Sign-toggle behavior applies to any utility where the defined CSS value already starts with a negative number.

Standard (Tight)

The quick brown fox

Negated (Wide)

The quick brown fox

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