The Twin Blades — min() & max()

⚔️ The Twin Blades of Constraint

Choosing the lesser or greater power on demand.

Sometimes a single value isn’t enough.
We want elements that:

• grow with the viewport… but not too huge
• shrink on small screens… but never too tiny
• keep a minimum touch target while still being responsive

Enter min() and max():

• min(a, b, c) => smallest of the values
• max(a, b, c) => largest of the values

They’re perfect for setting soft ceilings and floors on widths, paddings, fonts, and more.

---

✨ MiniMo — The Blade Chamber

Two forged blades sit in the chamber:

• the Blade of Restraint uses min() to cap its reach,
• the Blade of Dominion uses max() to hold a minimum presence.

Resize the frame or hover the controls to see which value wins.

---

🧩 Core Patterns

🗡 Blade of Restraint — min()

/* Grow with the container, but never exceed 320px */
.blade--restraint {
  width: min(60%, 320px);
}

• On wide screens: sticks near 320px
• On narrow screens: tracks 60% of the container

---

🗡 Blade of Dominion — max()

/* Shrink with the container, but never below 180px */
.blade--dominion {
  width: max(40%, 180px);
}

• On roomy layouts: sits near 40%
• On cramped layouts: refuses to go below 180px

---

🧮 Common Use Cases

• Constraining cards or content columns

  .card {
    width: min(100%, 420px);
  }

• Keeping controls tappable

  .spell-button {
    inline-size: max(10ch, 160px);
  }

• Combining with var() for tunable design tokens

  .pane {
    width: min(100%, var(--pane-max, 720px));
  }

min() and max() don’t replace clamp() —
they’re the simpler blades you reach for when you only need
one side of the constraint.

Next in the forge: combining both ends at once with clamp().