Спасибо тебе Дмитрий, ты лучший препод. После твоих уроков и адаптивной верстки не боишься, всё так просто кажется. Побольше бы таких видео и видео вашей верстки :)
мне самое что нравится что ты указываешь частые ошибки) это реально круто, особенно с height в header )) сам так делал, потом приходилось менять на min-height, ибо в адаптивке блок header не расширялся по высоте ибо она была фиксированная и ппц ))
Редко ставлю лайки и пишу комментарии. Но лайк и подписку оформил. Я не могу сказать, что информация была очень полной, но она была понятной, познавательной и наглядной. Это многого стоит, скажу я.
06:24-07:26 - адаптивная верстка зависит от того, как изначально сверстан макет. 08:36 - ширина обертки (max-width в px). [ 09:50 ] - 1 шаг адаптивной верстки (max-width для контейнера-центровщика).
Фундаментальный принцип вселенной - любая конструкция должна иметь конструктора! Птичье гнездо. Деревянный колышек. Компьютер. Космический корабль. Жизнь на земле. Всё это конструкции, у которых есть конструктор. Абсолютная логика! Второй фундаментальный принцип вселенной - чем сложнее конструкция, тем мудрее должен быть её конструктор! Птичье гнездо - деревянный колышек - компьютер - космический корабль - жизнь на земле, это уровни сложности конструкций, по возрастанию. Поскольку одна клетка человеческого организма в миллионы раз сложнее космического корабля, то жизнь на земле должна быть создана - Высшим Интеллектом! Абсолютная логика. Учёные, великие умы человечества, изо всех сил пытались создать, в лабораториях простейший живой организм - безрезультатно. Учёные владеют: Огромным коллективным интеллектом. Тысячелетним опытом. Современнейшим оборудованием. Прекрасными биологическими, земными условиями. Эксперимент потерпел полный крах. Как же тогда мог зародиться, четыре миллиарда лет назад, в ядовитых, анти биологических условиях, живой организм, случайно, сам по себе, без участия интеллекта? Это невозможно! Жизнь на земле спроектирована и создана. Почему у эволюционистов логика работает - назад, в обратную сторону? «У меня больше нет вопросов, Ваша Честь».
Страница остаётся адаптивной (на данном этапе) и без max-width, если у блока не задана определённая ширина. С max-width, .wrapper просто не будет дальше растягиваться на мониторах, ширина которых больше значения max-width.
Осмелюсь немного поправить в моменте с отрицательным марджином у родителя, при таком приеме, получается что не родитель пропускает марджины детей сквозь свою границу, а сам родитель проваливается в соседний элемент, либо за границы своего родителя на эту величину вместе со своими потомками, отсюда и такой эффект. Причем работает этот подход только если не задавать ширину этому контейнеру, т.е. width: auto. Если же захочется задать ему ширину и центрировать, то увы, такое не прокатит.
Пытаюсь верстать мобайл ферст с использованием bootstrap 4, но все время когда дохожу до больших расширений появляется горизонтальный скрол. Как решить эту проблему ?
правильно я понимаю, что на флексах такое сделать невозможно? т.е идет section, дальше row (что бы ему -margin сделать) а дальше уже item? т.е как в бутстрапе, получается флексы приеняются не к айтемам а к row, т.е он становится ребенком флекс контейнера.. как нибудь можно это обойти?
@Дмитрий Лаврик С нетерпением жду поддержки SugarSS (postCss) - как не крути, за ним будущее и он дает возможность, да и с SugarSS можно линтить CSS. Настройка очень похожа (/gulp/node_modules/smart-grid/system/replaces.js) на SASS, там отличие '{{before_mixin}}': '=', ---- __ --- '{{before_mixin}}': '@define-mixin' да и все отличие, которое я использую на своих проектах.
Дмитрий, спасибо за интересный материал и доступную подачу. Меня интересовал viewport, с вашей помощью поправил. Вот только не могу понять, я новичок, почему сайт stiralka63.ru/ не отображает в мобильной версии весь header? А именно полностью имя сайта и номер телефона... Если кто может, доступно объяснить, буду признателен.
Да, но смысл нагружать браузер лишней операцией. calc выручает там, где разные единицы измерения. А что касается удобства, то тут препроцессоры выручают, где создаётся примесь, которая сама умножение делает.
После рекламы smartgrid другую адаптивку даже смотреть не охота. Пока не могу туда попасть но такое впечатление что смартгрид единственно правильное решение
Я понял что зря учу это всё. Скоро вся верстка будет в графическом интерфейсе. И сделать любой сайт сможет даже ребенок. Печаль, депрессия, безысходность(((
я верю город будет
я знаю саду цвесть
когда такие люди
как Дмитрий Лаврик есть !
Удачи тебе Дмитрий Лаврик .
Дмитрий, вы просто отличный преподаватель. Вроде все это знаю, но посмотрел не отрываясь. Открыл для себя отрицательные маргины
Всё знаешь, но не знал про отриц., маргины? :)
+realyhead ну не правильно выразился) не все конечно
согласен, лаврик сейчас один из топовых сэнсеев на ютубе, рекомендую его всем, притом уроки полезны как новичкам так и более менее опытным
Эх не был в курсе что вебинар был, знал бы присоединился, отдохнул в хорошей атмосфере))
Конечно же лайк))
интересный вебинар, все просто и понятно, спасибо Дмитрий!
Спасибо тебе Дмитрий, ты лучший препод.
После твоих уроков и адаптивной верстки не боишься, всё так просто кажется.
Побольше бы таких видео и видео вашей верстки :)
тот неловкий момент, когда про флекс-боксы узнал раньше, чем про флоаты. Аве, Дима. под корку мало что отложилось, но вебинар очень интересный.
Лучший контент на ютубе про верстку.5+
Дмитрий, спасибо! Собрал все самое главное и горяченькое! Все с чем мучился, благодаря тебе забыл)
мне самое что нравится что ты указываешь частые ошибки) это реально круто, особенно с height в header )) сам так делал, потом приходилось менять на min-height, ибо в адаптивке блок header не расширялся по высоте ибо она была фиксированная и ппц ))
Редко ставлю лайки и пишу комментарии. Но лайк и подписку оформил.
Я не могу сказать, что информация была очень полной, но она была понятной, познавательной и наглядной. Это многого стоит, скажу я.
Супер! Супер преподаватель!
06:24-07:26 - адаптивная верстка зависит от того, как изначально сверстан макет.
08:36 - ширина обертки (max-width в px).
[ 09:50 ] - 1 шаг адаптивной верстки (max-width для контейнера-центровщика).
Фундаментальный принцип вселенной - любая конструкция должна иметь конструктора!
Птичье гнездо.
Деревянный колышек.
Компьютер.
Космический корабль.
Жизнь на земле.
Всё это конструкции, у которых есть конструктор.
Абсолютная логика!
Второй фундаментальный принцип вселенной - чем сложнее конструкция, тем мудрее должен быть её конструктор!
Птичье гнездо - деревянный колышек - компьютер - космический корабль - жизнь на земле, это уровни сложности конструкций, по возрастанию.
Поскольку одна клетка человеческого организма в миллионы раз сложнее космического корабля, то жизнь на земле должна быть создана - Высшим Интеллектом!
Абсолютная логика.
Учёные, великие умы человечества, изо всех сил пытались создать, в лабораториях простейший живой организм - безрезультатно.
Учёные владеют:
Огромным коллективным интеллектом.
Тысячелетним опытом.
Современнейшим оборудованием.
Прекрасными биологическими, земными условиями.
Эксперимент потерпел полный крах.
Как же тогда мог зародиться, четыре миллиарда лет назад, в ядовитых, анти биологических условиях, живой организм, случайно, сам по себе, без участия интеллекта?
Это невозможно! Жизнь на земле спроектирована и создана.
Почему у эволюционистов логика работает - назад, в обратную сторону?
«У меня больше нет вопросов, Ваша Честь».
Сетка супер!
Дмитрий, хотелось бы услышать ваше мнение по поводу сетки Bourbon Neat.
Что скажете?
Страница остаётся адаптивной (на данном этапе) и без max-width, если у блока не задана определённая ширина. С max-width, .wrapper просто не будет дальше растягиваться на мониторах, ширина которых больше значения max-width.
Осмелюсь немного поправить в моменте с отрицательным марджином у родителя,
при таком приеме, получается что не родитель пропускает марджины детей сквозь свою границу, а сам родитель проваливается в соседний элемент, либо за границы своего родителя на эту величину вместе со своими потомками, отсюда и такой эффект. Причем работает этот подход только если не задавать ширину этому контейнеру, т.е. width: auto. Если же захочется задать ему ширину и центрировать, то увы, такое не прокатит.
лайк глядя
Пытаюсь верстать мобайл ферст с использованием bootstrap 4, но все время когда дохожу до больших расширений появляется горизонтальный скрол. Как решить эту проблему ?
Дмитрий, скиньте пожалуйста исходники с семинара.
Сделал бета-версию портала, там все исходники по всем видео - beta.dmitrylavrik.ru/html-css/osnovy-i-ehvolyuciya-adaptivnoj-verstki
Уважаемый скажи пожалуйста background можно сделать адаптивным
Фантастика !
Эх, зря вы так Дмитрий про графический интерфейс. Верстальщики не пропадут. Всегда есть возможность углубится в front-end или ux/ui дизайн.
правильно я понимаю, что на флексах такое сделать невозможно?
т.е идет section, дальше row (что бы ему -margin сделать) а дальше уже item? т.е как в бутстрапе, получается флексы приеняются не к айтемам а к row, т.е он становится ребенком флекс контейнера.. как нибудь можно это обойти?
на 1:12 проблема с float потому, что 1 уго элемента в первой строке большой height, если они по высоте одинаковые то такого не будет
все круто, спасибо)
А если фоном картинка? Вот Главная страница - только фоновая картинка и меню, привязанное к ней, адаптировать не получится?
крутой мужик, спасибо)
Спасибо!
Красаучег!
@Дмитрий Лаврик
С нетерпением жду поддержки SugarSS (postCss) - как не крути, за ним будущее и он дает возможность, да и с SugarSS можно линтить CSS.
Настройка очень похожа (/gulp/node_modules/smart-grid/system/replaces.js) на SASS, там отличие '{{before_mixin}}': '=', ---- __ --- '{{before_mixin}}': '@define-mixin' да и все отличие, которое я использую на своих проектах.
Ок, гляну! Смартгриду чем больше поддержка разных синтаксисов, тем лучше!
Bootstrap наше все!
(С) Нищеброд
Дмитрий, спасибо за интересный материал и доступную подачу. Меня интересовал viewport, с вашей помощью поправил. Вот только не могу понять, я новичок, почему сайт stiralka63.ru/ не отображает в мобильной версии весь header? А именно полностью имя сайта и номер телефона... Если кто может, доступно объяснить, буду признателен.
Лучший
Как блоки анимировано перемещаются?
transition: width 1s; Прописать блокам
чтото нет
А нельзя делать разные версии сайта для разных экранов вместо адаптивки?
можно, но зачем?
А если мы бы писали на 1:20:18
col-2{width: calc(2*8.3333% - 30px);} ... col-12{width: calc(12*8.3333% - 30px);}
calc бы у нас не сработал ?
Да, но смысл нагружать браузер лишней операцией. calc выручает там, где разные единицы измерения.
А что касается удобства, то тут препроцессоры выручают, где создаётся примесь, которая сама умножение делает.
После рекламы smartgrid другую адаптивку даже смотреть не охота. Пока не могу туда попасть но такое впечатление что смартгрид единственно правильное решение
Такая же фигня. Был бы доступнее - можно было бы отбивать числом человек в группе.
fensterteam да для начинающих дорого
Я понял что зря учу это всё. Скоро вся верстка будет в графическом интерфейсе. И сделать любой сайт сможет даже ребенок. Печаль, депрессия, безысходность(((
+
пасябпасябпасяб
Лучший контент на ютубе про верстку.5+