Negative Values

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 class="d-f jc-c c-white fs-sm">
  <div class="d-f ai-c jc-c w-14 h-14 bg-indigo br-pill bw-2 z-1">A</div>
  <div class="d-f ai-c jc-c ml--4 w-14 h-14 bg-indigo br-pill bw-2 z-2">B</div>
  <div class="d-f ai-c jc-c ml--4 w-14 h-14 bg-indigo br-pill bw-2 z-3">C</div>
</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 class="p-r w-40 h-40 bg-silver-2 br-2">
  <div class="p-a t--4 l--4 w-12 h-12 bg-indigo br-1"></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 class="d-f p-r ai-c jc-c w-full h-32 bg-silver-1 br-2">
  <div class="p-a zi--10 w-24 h-24 bg-indigo/20 br-pill"></div>
  <span>Background Layer</span>
</div>

Letter Spacing

Utilities like ls-1 (which is -0.05 em) already represent negative values. Using the negative syntax ls--1 will toggle the sign, resulting in a positive value.

<p class="ls-2 c-slate">Tight spacing (-0.025em)</p>
<p class="ls--2 c-slate">Wide spacing (0.025em)</p>