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.
SVG, które zna swoje miejsce
viewBox daje proporcje, wymiary rezerwują miejsce, ikony mierzą się w em i dziedziczą currentColor, a non-scaling-stroke pilnuje kreski przy każdej skali.
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.
Rozwijanie bez skryptu
Element details z ::details-content i interpolate-size animuje rozwijanie w czystym CSS, a atrybut name składa sekcje w ekskluzywny akordeon.
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.
Font, który wchodzi po cichu
font-display: swap pokazuje tekst od razu, a fallback z size-adjust dziedziczy metryki webfontu, więc podmiana nie rusza ani jednej linii.
Nagłówek bez sieroty
text-wrap: balance wyrównuje linie nagłówka, a pretty pilnuje akapitów, więc żadna szerokość ekranu nie zostawia samotnego słowa.
Pole, które rośnie z treścią
field-sizing: content pozwala textarea rosnąć razem z tekstem, a min-block-size i max-block-size trzymają granice, bez skryptu mierzącego wysokość.
Motyw bez błysku
color-scheme i light-dark() oddają motyw przeglądarce, a wybór użytkownika trafia do dokumentu przed pierwszym renderem, więc nic nie mruga bielą.
Scroll, który zna granice
overscroll-behavior: contain zatrzymuje przewijanie na krawędzi panelu, więc koniec listy w dialogu nie przewija strony pod spodem.
Sticky, który wie, że przywarł
Container query scroll-state(stuck) styluje przyklejony nagłówek w czystym CSS, bez IntersectionObserver i klas dokładanych skryptem.