CSS-сетки и Flexbox в адаптивном веб-дизайне

Мы начнем с быстрого обзора текущего стандарта отрасли: сеток построеной на флоатах . Мы рассмотрим как быстро создать такую сетку плюс преимущества и недостатки такого подхода. Мы также рассмотрим медиа-запросы и отзывчивые изображения, включая новый тег и Picturefill. Мы быстро перейдем к Flexbox, сначала исследуем как работает Flexbox, так как он сильно отличается от float. Мы будем верстать простую сетчатую систему с помощью Flexbox, и рассмотрим сходства и различия с сеткой построенной на флоатах.

Затем мы воспользуемся превосходным выравниванием Flexbox и функциями позицинирования, чтобы увидеть преимущества над сетками, которые мы делали флоатами. Наконец, мы завершим наш первый день рассмотрев общую проблему. У вас есть несколько элементов, которые вы должны выкладывать в столбцах и / или строках на веб-странице, но вы не представляете, сколько там эелементов. (Элементом может быть изображение, карта, медиа-объект или что-то еще, что будет считаться единицей контента.)

Во второй день мы погрузимся в CSS Grid, совершенно новую спецификацию, доступную в последних браузерах. Мы рассмотрим базовый синтаксис Grid, работая над макетом картины Мондриана в качестве примера, который мы создадим с помощью Grid. Затем мы перейдем к некоторым альтернативным синтаксисам Grid, рассмотрим вложенные и смещенные макеты сетки. Конечно, мы также рассмотрим проблемы совместимости - как мы можем сделать работу Grid в разных браузерах.

Наконец, при понимании и освоении Flexbox и Grid мы попытаемся объединить эти элементы для лучшего решения проблемы макета веб-страницы. К концу этого курса вы сможете сформулировать сильные и слабые стороны макета на основе float, Flexbox и Grid, и вы сможете создавать адаптивные макеты на каждой из этих технологий.

• Исследуйте Flexbox, одномерный инструмент компоновки, который наконец готов к использованию в современных браузерах
• Изучите хаки, чтобы заставить Flexbox работать с полными макетами страниц, аналогично тому, как это делается в адаптивных средах проектирования, таких как Bootstrap 4, Foundation 6 и UIkit 3
• Откройте CSS Grid, правильный способ прокладки двухмерного дизайна
• Узнайте о совместимости CSS Grid, чтобы сделать этот новый инструмент полезным сегодня
• Внедрите медиа-запросы, отзывчивые изображения и другие передовые методы реагирования в гридах и Flexbox
• Объедините Flexbox и Grid для создания современных и перспективных макетов

Ваш инструктор - Джен Крамер, уже более семнадцати лет Джен Крамер воспитывает клиентов, коллег, друзей и аспирантов о значении «качественного сайта». С 2000 года она создала веб-сайты, которые поддерживают бизнес и маркетинговые цели в независимом качестве, а также часть агентства. Джен является преподавателем в Гарвардской школе в области магистра искусств в области цифрового медиа-дизайна, преподавая не менее пяти курсов в год, консультируя студентов и помогая в разработке учебных программ.

Она также доступна для индивидуального частного обучения, индивидуального обучения в классе и случайных внештатных работ по веб-дизайну.

https://github.com/jen4web/fem-layout/

Видео в формате .webm - Работает в Google Chrome