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="zi:10 …">A</div>
<div className="ml:-4 zi:20 …">B</div>
<div className="ml:-4 zi:30 …">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 |
Sign-toggle behavior applies to any utility where the defined CSS value already starts with a negative number.
<p className="ls:1 …">Standard (Tight)</p>
<p className="ls:-1 …">Negated (Wide)</p>