Biblioteka wzorców
Wzorce do pracy na projektach
Zasady mówią, dlaczego. Wzorce pokazują, jak: gotowe do przeniesienia rozwiązania z żywym demo, regułami i kodem, które możesz podlinkować w review albo w rozmowie z zespołem.
Cztery stany widoku
Każdy widok danych ma cztery stany: ładowanie, treść, pustkę i błąd. Wszystkie dzielą jeden layout.
Formularz bez niespodzianek
Walidacja przy opuszczeniu pola, przycisk o stałej szerokości podczas wysyłki i potwierdzenie w zarezerwowanym slocie.
Siatka, która płynie
Kolumny wynikają z dostępnej przestrzeni, a karty przebudowują się według szerokości kontenera, nie ekranu.
Kafelki w równym rytmie
Nagłówki, opisy i stopki sąsiednich kart leżą na wspólnych liniach, bo wiersze kafelków pochodzą z jednej siatki.
Natywny dialog zamiast diva
Element dialog daje pułapkę fokusu, Escape i warstwę za darmo, a scrollbar-gutter pilnuje, żeby otwarcie nie przesunęło strony.
Powiadomienia w swojej warstwie
Toasty żyją w zarezerwowanej warstwie nad treścią, więc mogą przychodzić i znikać, nie ruszając niczego pod spodem.
Optymistyczna odpowiedź
Interfejs odpowiada natychmiast, zapisuje w tle i umie się wycofać, gdy serwer odmówi.
Wyszukiwanie bez szarpania
Debounce ogranicza zapytania, wskaźnik mieszka w polu, a wyniki wymieniają się w kontenerze o stałej wysokości.
Obrazy, które nie pchają
Wymiary zadeklarowane w znaczniku, aspect-ratio w CSS i placeholder w tle: obraz może się spóźnić, layout nie.
Zakładki bez windy
Panel zakładek rezerwuje wysokość najwyższej treści, więc przełączanie nie winduje strony w górę i w dół.
Akordeon bez mierzenia
Rozwijanie animuje grid-template-rows od 0fr do 1fr, bez JavaScript liczącego wysokości treści.
Liczby, które nie drgają
Cyfry tabelaryczne i sloty o stałej liczbie znaków sprawiają, że timer, cena i licznik nie telepią sąsiadów.
Karuzela na scroll-snap
Poziomy pas kart przewijany natywnie, z przyciąganiem scroll-snap, bez biblioteki i bez przejmowania gestów.
Walidacja bez JavaScript
Pseudoklasy :user-invalid i :has stylują błędy dopiero po interakcji, z komunikatem w zarezerwowanym slocie, zanim uruchomi się jakikolwiek skrypt.
Dymek przy swojej kotwicy
Popover API otwiera menu i podpowiedzi w top layer, a CSS anchor positioning trzyma je przy przycisku bez skryptu liczącego współrzędne.
Wejścia i wyjścia bez JS
@starting-style animuje pojawienie się elementu, a transition-behavior: allow-discrete pozwala mu zniknąć z animacją, mimo display none.
Długa lista bez długu
content-visibility: auto odracza rendering wierszy poza ekranem, a contain-intrinsic-size rezerwuje ich wymiary, więc scrollbar nie kłamie.
Scroll jako oś czasu
animation-timeline ze scroll() i view() wiąże animację z pozycją przewijania, bez nasłuchu zdarzeń i bez pracy na głównym wątku.
Przejście zamiast teleportacji
View Transitions API animuje przejście między dwoma stanami DOM: karty płyną na nowe miejsca, zamiast teleportować się przy każdym sortowaniu.