Главная / Каталог / UI-компоненты
«Адаптивные паттерны» — Шесть приёмов с живым ползунком
Цена: 2 890 ₽
Набор не про то, как блок выглядит, а про то, как он себя ведёт, когда места меньше. Шесть приёмов адаптива, каждый вживую — двигаете ползунок, блоки перестраиваются.
Обычный набор компонентов устроен так: вот двадцать кнопок, вот двенадцать карточек, выбирайте. Этот собран по другой оси — он про поведение. Шесть приёмов закрывают почти весь адаптив обычного сайта: сетка без единого медиазапроса, таблица, становящаяся карточками, меню в бургер, действия, прилипающие к низу блока, перемена порядка колонок и, главное, переполнение — как оно ломается и чем чинится.
Всё показано вживую. Наверху ползунок ширины с пресетами 320, 375, 560, 768 и 1024 — и все шесть блоков перестраиваются одновременно, не трогая окно браузера. Работает это на контейнерных запросах: блок реагирует на свою ширину, а не на ширину экрана. Разница принципиальна — компонент в узкой колонке на широком мониторе медиазапрос не видит, а контейнерный видит. Под каждой демонстрацией лежит ровно тот CSS, который это делает, с кнопкой копирования.
Пятый паттерн стоит отдельно: там переполнение можно потрогать. Нажимаете «Сломать», сужаете ползунок — и блок уезжает за край, а счётчик показывает, на сколько именно пикселей содержимое шире контейнера. Разница между `1fr` и `minmax(0, 1fr)` перестаёт быть теорией. Там же написано, как искать такую поломку у себя и почему `overflow-x: hidden` её прячет, но не чинит.
Что умеет
- Живой ползунок ширины с пресетами — окно трогать не нужно
- Контейнерные запросы: блок смотрит на себя, а не на экран
- Сетка без медиазапросов на auto-fit и minmax
- Таблица в карточки с подписями из data-атрибута
- Переполнение, которое можно включить и измерить в пикселях
- Липкая панель действий и перемена порядка колонок
- CSS каждого приёма рядом, с копированием в один клик
- Префикс .prw-, ни одной внешней картинки
Разделы
- Пульт ширины
- Сетка без медиазапросов
- Таблица в карточки
- Меню в бургер
- Липкие действия
- Переполнение
- Перемена порядка