Більшість UI-компонентів у реальних проєктах зламані на певних розмірах екрана. Не тому що розробник не знав про адаптивність, а тому що компонент від початку проєктувався під конкретний контекст. Цей майстер-клас про те, як будувати компоненти інакше.
Принцип intrinsic design
Ми розглядаємо підхід, при якому компонент сам визначає свою поведінку залежно від доступного простору — без жорстких breakpoints. Це стає можливим завдяки CSS Grid із auto-fill, min(), max(), clamp() і контейнерним запитам.
Компоненти, які розбираємо
Картка товару з адаптивною сіткою, горизонтальна навігація з колапсом у мобільне меню через CSS :has(), форма з динамічним розташуванням полів, модальне вікно з правильним скролом на iOS. Кожен компонент — окремий CodePen із коментарями.
Що залишається після заняття
Бібліотека з чотирма готовими компонентами, які можна одразу використовувати в проєктах. Усі рішення задокументовані — не просто код, а пояснення, чому саме так і що станеться, якщо змінити певний параметр.