Odstępy i układ

Spójnych odstępów nie widać, kiedy działają — i od razu widać, kiedy nie działają. prfct buduje każdy komponent i wzorzec na siatce 4 px i używa celowo krótkiej listy stopni, z których każdy ma swoje zadanie.

Skala#

Odstępy korzystają z numerycznej skali Tailwinda, w której jedna jednostka to 4 px (p-4 to 16 px). Dostępna jest cała skala, ale system opiera się na tych stopniach:

Zasady rytmu#

Bliskość to grupowanie. Powiązane elementy stoją bliżej siebie niż niepowiązane. Etykieta jest 8 px od swojego pola, pola dzieli 20 px, a sekcje — 48 px. Jeśli dwie rzeczy potrzebują separatora, żeby wyglądać na osobne, prawdopodobnie potrzebują raczej więcej miejsca.

W środku mniej niż na zewnątrz. Wypełnienie wewnątrz kontenera jest mniejsze niż przestrzeń wokół niego. Karta z wypełnieniem 20 px stoi w siatce z odstępami 24 px lub większymi.

Używaj gap, nie marginesów. Komponenty nigdy nie ustawiają zewnętrznych marginesów; to rodzic rozmieszcza dzieci za pomocą gap we flexboksie albo gridzie. Dzięki temu komponenty pasują do każdego układu, a zapadanie się marginesów przestaje zaskakiwać.

// Preferred
<div className="flex flex-col gap-5">…</div>

// Avoid — spacing that belongs to the parent leaks into children
<div className="space-y-5">…</div>

Gęstość#

Kontrolki mają pięć wysokości, więc wszystko, co ustawisz w jednym rzędzie, wyrównuje się bez wysiłku:

Gęstość wybieraj dla całej powierzchni, a nie dla pojedynczego komponentu: strona z rozbudowaną tabelą danych może wszędzie używać sm, a ścieżka onboardingu — lg.

Układ#

Breakpointy#

prfct używa breakpointów w podejściu mobile-first: klasy bez prefiksu działają wszędzie, a klasy z prefiksem — od danej szerokości w górę.

Kontenery i marginesy#

• Marginesy strony: 16 px na telefonach, 24 px od sm, 32–40 px na szerokich ekranach.
• Szerokość tekstu: długi tekst ma najwyżej 65–75 znaków w wierszu (max-w-prose, max-w-2xl).
• Układ aplikacji: stały pasek boczny (240–260 px) i płynny obszar treści; strony z treścią są wyśrodkowane w max-w-5xl, a strony z danymi zajmują całą szerokość.

Zapytania kontenerowe#

Komponenty, które zmieniają układ w zależności od własnego rozmiaru — a nie rozmiaru okna przeglądarki — korzystają z zapytań kontenerowych. FieldGroup jest kontenerem, więc pole responsive przechodzi z układu pionowego w poziomy, gdy jego kolumna jest wystarczająco szeroka — niezależnie od tego, czy tą kolumną jest cała strona, czy wąski panel.

<FieldGroup>
  <Field orientation="responsive">…</Field>
</FieldGroup>

Warstwy#

Kolejność nakładania to także token. Nakładki trafiają przez portal na koniec dokumentu i używają warstwy odpowiadającej ich roli, więc lista wyboru otwarta w oknie dialogowym zawsze pojawia się nad nim.