Универсальная система CSS-брейкпоинтов. 3xl - это сколько?

📏 Рассказываю о системе 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: https://getbootstrap.com/docs/5.3/layout/breakpoints/ 〰️ Почему 32px это костыль: https://github.com/twbs/bootstrap/issues/21333 〰️ Система брейкпоинтов Material Design: https://m3.material.io/foundations/layout/applying-layout/window-size-classes 〰️ Система брейкпоинтов Fluent: https://fluent2.microsoft.design/layout 〰️ Система брейкпоинтов Tailwind: https://tailwindcss.com/docs/responsive-design 〰️ Custom Media Queriesв черновике W3C: https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-media 〰️ Плагин PostCSS Custom Media: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media 〰️ Плагин Stylelint для сортировки свойств и правил: https://github.com/hudochenkov/stylelint-order 〰️ Хорошая статья Ahmad Shadeed про container queries: https://ishadeed.com/article/css-container-query-guide/ 〰️ Эксперимент Netflix, в котором создают проект исключительно на container queries: https://web.dev/case-studies/netflix-cq 👨💻Автор: 〰️ Github: https://github.com/MorevM 〰️ Telegram-канал: https://t.me/morev_online 〰️ Личный telegram: https://t.me/max_seainside 〰️ Оборудование: https://github.com/MorevM/use/ --- Music by https://www.bensound.com/free-music-for-videos Artist: Benjamin Tissot License code: HQNV64R2FGJNDFKT