responsive-design
Responsywne interfejsy dla każdego ekranu — container queries, fluid typography i CSS Grid
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Opanuj nowoczesne techniki responsive design, aby tworzyć interfejsy dostosowujące się płynnie do wszystkich rozmiarów ekranów. Skill obejmuje container queries do responsywności na poziomie komponentów, fluid typography ze skalowaniem CSS clamp(), zaawansowane layouty z CSS Grid i Flexbox, oraz strategie breakpointów mobile-first. Idealne do budowania adaptacyjnych nawigacji, responsywnych tabel danych, obrazów i systemów designu opartych na tokenach.
Jak używać
Zainstaluj skill responsive-design w swoim projekcie agenta, dodając go do konfiguracji pluginów UI design.
Zdefiniuj bazową strategię breakpointów mobile-first — zacznij od stylów dla urządzeń mobilnych (poniżej 640px), a następnie dodaj media queries dla większych ekranów (640px, 768px, 1024px, 1280px, 1536px).
Implementuj container queries dla responsywności na poziomie komponentów, używając jednostek cqi, cqw i cqh, aby komponenty dostosowywały się niezależnie od viewportu.
Zastosuj fluid typography i spacing za pomocą CSS clamp() — ustaw minimalną wartość, preferowaną skalę (vw/vh) i maksymalną wartość, aby tekst i odstępy skalowały się płynnie.
Buduj layouty 2D za pomocą CSS Grid i Flexbox dla dystrybucji 1D, korzystając z intrinsic sizing opartego na zawartości i subgrid dla zagnieżdżonego wyrównania.
Integruj design tokeny z breakpointami i używaj feature queries (@supports) do obsługi przeglądarek, które nie wspierają container queries, zapewniając fallbacki dla starszych urządzeń.