liquiddesign

Wzorzec 14

Liczby, które nie drgają

W większości fontów cyfra 1 jest węższa niż 8, więc tykający zegar faluje, a razem z nim wszystko obok. Wariant tabular-nums daje cyfrom wspólną szerokość, a slot o szerokości najdłuższego zapisu domyka sprawę.

Timer i cena na żywo

Te same wartości po obu stronach. Po lewej cyfry proporcjonalne falują i telepią sąsiadów, po prawej tabular-nums i slot w jednostkach ch trzymają wszystko w miejscu.

✕ Cyfry proporcjonalne

Czas pracy0:00,0w tym sprincie

Budżet dnia111,11zł netto

✓ tabular-nums w slocie

Czas pracy0:00,0w tym sprincie

Budżet dnia111,11zł netto

Reguły

  • Zmienne liczby renderują się z font-variant-numeric: tabular-nums.
  • Slot liczby ma szerokość najdłuższego możliwego zapisu, na przykład w jednostkach ch.
  • Jednostki i etykiety stoją poza slotem, więc nie wędrują za cyframi.
  • Animowana wartość zmienia tekst, nigdy szerokość kontenera.

Wzorzec w kodzie

Slot w ch mieści najdłuższy zapis, etykiety stoją obok
<p className="flex items-baseline gap-2">
  Budżet dnia
  <span className="inline-block min-w-[6ch] tabular-nums">
    {price}
  </span>
  zł netto
</p>
To samo czystym CSS
.counter {
  font-variant-numeric: tabular-nums;
  min-width: 7ch;
}

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia
Zaimplementuj w moim projekcie wzorzec „Liczby, które nie drgają" z metodologii Liquid Design.

Cyfry tabelaryczne i sloty o stałej liczbie znaków sprawiają, że timer, cena i licznik nie telepią sąsiadów.

Wymagania:
- Zmienne liczby renderują się z font-variant-numeric: tabular-nums.
- Slot liczby ma szerokość najdłuższego możliwego zapisu, na przykład w jednostkach ch.
- Jednostki i etykiety stoją poza slotem, więc nie wędrują za cyframi.
- Animowana wartość zmienia tekst, nigdy szerokość kontenera.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy – zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/wzorce/liczniki