CSS Grids and Flexbox in Responsive Web Design
Мы начнем с быстрого обзора текущего стандарта отрасли: сеток построеной на флоатах . Мы рассмотрим как быстро создать такую сетку плюс преимущества и недостатки такого подхода. Мы также рассмотрим медиа-запросы и отзывчивые изображения, включая новый тег и Picturefill. Мы быстро перейдем к Flexbox, сначала исследуем как работает Flexbox, так как он сильно отличается от float. Мы будем верстать простую сетчатую систему с помощью Flexbox, и рассмотрим сходства и различия с сеткой построенной на флоатах.
Затем мы воспользуемся превосходным выравниванием Flexbox и функциями позицинирования, чтобы увидеть преимущества над сетками, которые мы делали флоатами. Наконец, мы завершим наш первый день рассмотрев общую проблему. У вас есть несколько элементов, которые вы должны выкладывать в столбцах и / или строках на веб-странице, но вы не представляете, сколько там эелементов. (Элементом может быть изображение, карта, медиа-объект или что-то еще, что будет считаться единицей контента.)
Во второй день мы погрузимся в CSS Grid, совершенно новую спецификацию, доступную в последних браузерах. Мы рассмотрим базовый синтаксис Grid, работая над макетом картины Мондриана в качестве примера, который мы создадим с помощью Grid. Затем мы перейдем к некоторым альтернативным синтаксисам Grid, рассмотрим вложенные и смещенные макеты сетки. Конечно, мы также рассмотрим проблемы совместимости - как мы можем сделать работу Grid в разных браузерах.
Наконец, при понимании и освоении Flexbox и Grid мы попытаемся объединить эти элементы для лучшего решения проблемы макета веб-страницы. К концу этого курса вы сможете сформулировать сильные и слабые стороны макета на основе float, Flexbox и Grid, и вы сможете создавать адаптивные макеты на каждой из этих технологий.
Ваш инструктор - Джен Крамер, уже более семнадцати лет Джен Крамер воспитывает клиентов, коллег, друзей и аспирантов о значении «качественного сайта». С 2000 года она создала веб-сайты, которые поддерживают бизнес и маркетинговые цели в независимом качестве, а также часть агентства. Джен является преподавателем в Гарвардской школе в области магистра искусств в области цифрового медиа-дизайна, преподавая не менее пяти курсов в год, консультируя студентов и помогая в разработке учебных программ.
Она также доступна для индивидуального частного обучения, индивидуального обучения в классе и случайных внештатных работ по веб-дизайну.
https://github.com/jen4web/fem-layout/
Видео в формате .webm - Работает в Google Chrome
codeschool
Следуй подсказкaм через каждое свойство Flexbox и узнай, как сделать современные макеты, которые являются гибкими для различных размеров экрана.
CSS Grid (Сетки) - это новая система компоновки элементов в CSS! Это не фреймворк или библиотека - это дополнение к языку, которое позволяет нам быстро создавать гибкие двухмерные макеты.Мы можем использовать ее для размещения, выравнивания и дизайна верстки так, как ранее было просто невозможно с помощью флоатов или flexbox.CSS-сетка может показаться немного сложной с новыми идеями синтаксиса и макета, но она довольно проста и может быть разбита
leveluptutorials
В этой серии уроков «Современные CSS Сетки» мы покроем тему современных CSS Layouts. Мы будем строить сетки таких сайтов как Facebook, Instagram и моего персонального сайта (leveluptutorials.com) используя разные техники - от flexbox до CSS-Grid. Мы рассмотрим все самое свежое и самое лучшее что есть сейчас в CSS.
Самый продвинутый и современный курс CSS в Интернете: анимация, flexbox, отзывчивый дизайн и многое другое. Вы какое-то время писали CSS, но хотите перенести свою игру на следующий уровень? Чувствуете ли вы путаницу с CSS-жаргоном, как наследование, специфика или каскад? Что если бы был один ресурс, одно место, где вы могли бы изучить все современные методы и свойства CSS, о которых вы читали? Хорошая новость: вот он! Добро пожаловать в &la
