Рассказываю о системе CSS-брейкпоинтов, которой пользуюсь уже много лет и с помощью которой строю красивые, гибкие интерфейсы. Подписывайтесь, если хотите научиться писать CSS и проектировать дизайн-системы лучше. Напишите в комментариях, как вам система? Пользуетесь чем-то подобным? Уже попробовали container queries? #css #breakpoints #container_queries #media_queries #frontend #вёрстка Таймлайн: 00:00 - Вступление 00:22 - Предыстория и накидывание на популярные системы брейкпоинтов 01:24 - Вводные к материалу 02:28 - Берём сперва укропу... 03:33 - Проблема #1: Недостаток мобильных брейкпоинтов 04:40 - Чел, ты динозавр 05:27 - Решаем проблему #1 06:53 - Проблема #2: Недостаток десктопных брейкпоинтов 09:40 - И где применить эту туеву хучу десктопных брейкпоинтов? 10:43 - Проблема #3: Непонятный нейминг 12:02 - Делаем красиво и стройно 13:32 - Финальный вариант системы брейкпоинтов, one true system 14:07 - Как это выглядит в коде? 17:50 - Про индивидуальную адаптацию компонентов 23:40 - Заключение Ссылки из видео / Материалы: Система брейкпоинтов Bootstrap:
Почему 32px это костыль:
Система брейкпоинтов Material Design:
Система брейкпоинтов Fluent:
Система брейкпоинтов Tailwind:
Custom Media Queriesв черновике W3C:
Плагин PostCSS Custom Media:
Плагин Stylelint для сортировки свойств и правил:
Хорошая статья Ahmad Shadeed про container queries:
Эксперимент Netflix, в котором создают проект исключительно на container queries:
Автор: Github:
Telegram-канал:
Личный telegram:
Оборудование:
--- Music by
Artist: Benjamin Tissot License code: HQNV64R2FGJNDFKT
