Основы и эволюция адаптивной вёрстки

Основы создания адаптивной вёрстки.
Media-запросы и тег viewport.
Размеры в % и max-width.
Проблемы классической адаптивки.
Эволюция вариантов адаптивной вёрстки.
Идея классов из bootstrap.
Свойство flex-basis во flexbox.
Препроцессорная сетка smartgrid.

[rzxvztn]

Дмитрий, вы просто отличный преподаватель. Вроде все это знаю, но посмотрел не отрываясь. Открыл для себя отрицательные маргины

[sfx]

я верю город будет
я знаю саду цвесть
когда такие люди
как Дмитрий Лаврик есть !
Удачи тебе Дмитрий Лаврик .

[GriNAME]

Эх не был в курсе что вебинар был, знал бы присоединился, отдохнул в хорошей атмосфере))
Конечно же лайк))

[pokanet]

тот неловкий момент, когда про флекс-боксы узнал раньше, чем про флоаты. Аве, Дима. под корку мало что отложилось, но вебинар очень интересный.

[zlangobelz]

Лучший контент на ютубе про верстку.5+

[vvuergh]

Спасибо тебе Дмитрий, ты лучший препод.
После твоих уроков и адаптивной верстки не боишься, всё так просто кажется.
Побольше бы таких видео и видео вашей верстки :)

[maksreb]

интересный вебинар, все просто и понятно, спасибо Дмитрий!

[swan-bird]

Дмитрий, спасибо! Собрал все самое главное и горяченькое! Все с чем мучился, благодаря тебе забыл)

[desmoondweiss]

Редко ставлю лайки и пишу комментарии. Но лайк и подписку оформил.
Я не могу сказать, что информация была очень полной, но она была понятной, познавательной и наглядной. Это многого стоит, скажу я.

[yuliyamassett]

06:24-07:26 - адаптивная верстка зависит от того, как изначально сверстан макет.
08:36 - ширина обертки (max-width в px).
[ 09:50 ] - 1 шаг адаптивной верстки (max-width для контейнера-центровщика).

[PacoOfficial]

мне самое что нравится что ты указываешь частые ошибки) это реально круто, особенно с height в header )) сам так делал, потом приходилось менять на min-height, ибо в адаптивке блок header не расширялся по высоте ибо она была фиксированная и ппц ))

[Absolutnaja_Istina]

Фундаментальный принцип вселенной — любая конструкция должна иметь конструктора!
Птичье гнездо.
Деревянный колышек.
Компьютер.
Космический корабль.
Жизнь на земле.
Всё это конструкции, у которых есть конструктор.
Абсолютная логика!
Второй фундаментальный принцип вселенной — чем сложнее конструкция, тем мудрее должен быть её конструктор!
Птичье гнездо — деревянный колышек — компьютер — космический корабль — жизнь на земле, это уровни сложности конструкций, по возрастанию.
Поскольку одна клетка человеческого организма в миллионы раз сложнее космического корабля, то жизнь на земле должна быть создана — Высшим Интеллектом!
Абсолютная логика.

Учёные, великие умы человечества, изо всех сил пытались создать, в лабораториях простейший живой организм — безрезультатно.
Учёные владеют:
Огромным коллективным интеллектом.
Тысячелетним опытом.
Современнейшим оборудованием.
Прекрасными биологическими, земными условиями.
Эксперимент потерпел полный крах.
Как же тогда мог зародиться, четыре миллиарда лет назад, в ядовитых, анти биологических условиях, живой организм, случайно, сам по себе, без участия интеллекта?
Это невозможно! Жизнь на земле спроектирована и создана.
Почему у эволюционистов логика работает — назад, в обратную сторону?
«У меня больше нет вопросов, Ваша Честь».

[realyhead]

Страница остаётся адаптивной (на данном этапе) и без max-width, если у блока не задана определённая ширина. С max-width, .wrapper просто не будет дальше растягиваться на мониторах, ширина которых больше значения max-width.

[travelscult]

Осмелюсь немного поправить в моменте с отрицательным марджином у родителя,
при таком приеме, получается что не родитель пропускает марджины детей сквозь свою границу, а сам родитель проваливается в соседний элемент, либо за границы своего родителя на эту величину вместе со своими потомками, отсюда и такой эффект. Причем работает этот подход только если не задавать ширину этому контейнеру, т.е. width: auto. Если же захочется задать ему ширину и центрировать, то увы, такое не прокатит.

[lnzhnty]

Пытаюсь верстать мобайл ферст с использованием bootstrap 4, но все время когда дохожу до больших расширений появляется горизонтальный скрол. Как решить эту проблему ?

[PacoOfficial]

правильно я понимаю, что на флексах такое сделать невозможно?
т.е идет section, дальше row (что бы ему -margin сделать) а дальше уже item? т.е как в бутстрапе, получается флексы приеняются не к айтемам а к row, т.е он становится ребенком флекс контейнера.. как нибудь можно это обойти?

[TheKlaxonio]

Сетка супер!
Дмитрий, хотелось бы услышать ваше мнение по поводу сетки Bourbon Neat.
Что скажете?

[aleksaleks]

Эх, зря вы так Дмитрий про графический интерфейс. Верстальщики не пропадут. Всегда есть возможность углубится в front-end или ux/ui дизайн.

[Veremey]

@Дмитрий Лаврик
С нетерпением жду поддержки SugarSS (postCss) - как не крути, за ним будущее и он дает возможность, да и с SugarSS можно линтить CSS.

[nika]

А если фоном картинка? Вот Главная страница - только фоновая картинка и меню, привязанное к ней, адаптировать не получится?