00:00 Интро 00:11 Флексы и гриды 01:52 Ошибочная картина 02:30 Постановка задачи 02:52 Вёрстка кнопок 04:50 Вставка иконок 05:52 Подгонка иконок 07:32 Выравнивание иконок 08:18 Добавление гридов 09:43 Отступ от иконки 11:25 Гэпы во флексах 12:27 Кроссбраузерность 13:41 Беда с кнопками 14:40 Обман 15:34 Вывод 16:25 Аутро

Вёрстка, гриды, флексы - я лично сюда хожу на футболки посмотреть. Вадим ещё ни разу не подводил с этим делом.

@pepelsbey

3 жыл бұрын

Футболки кончаются, пошли повторы (

@pronin-cc

3 жыл бұрын

@@pepelsbey Надо будет задонатить на футболку, а то Вадиму не в чем появляться на видео :)

@user-fe9yv8wm9w

Жыл бұрын

😂😂😂

Пролетающая фея - это просто топ 😂

@bbeggar

3 жыл бұрын

Тоже вскрикнул❤️

Вау. Актуальный контент. Поражаюсь тому как люди делятся своим опытом. И как мы раньше жили без ютуба =)

Вадим, какой же ты крутой, твой профессионализм служит для меня стандартом того, чему надо стремиться, а харизма и способ подачи материала - проводник на этом пути. Надеюсь, твой энтузиазм желание делиться своим опытом никогда не иссякнет, да хранит тебя Карло Акутис!

Отдельное спасибо за currentColor! не перестаю удивляться CSS

В сафари вечно всё не так, как раньше в ИЕ было, я один раз сделал градиант до tranparent и не заработало пришлось через альфаканал прозрачность делать, фф вроде всегда всё корректно понимал, а остальные браузеры на хром перешли, как вспомню времена когда под ие6 надо было готовить сайты вообще страшно. Но ваши видео очень интересны, я больше бэкендер, но приходится для личных проектов и веб-морды придумывать, минималистичные, без всяких бутстрапов и ваши видео реально заставляют переосмыслить подход, спасибо.

На самом деле это практически самая распространённая задача в вёрстке. В интернете куча примеров косых. Но наконец-то есть человек, который объясняет просто, как надо делать правильно. Вообще очень жаль, что нет кнопку, которая удаляет всю ту чушь, которая говорит о том, как делать неправильно. И это касается абсолютно всего.

Вадим, спасибо Вам за этот обзор! Все отлично объяснено!⚡

Боже, какой офигенный канал. Спасибо тебе, ты так приятно преподносишь контент, такое объяснение, атмосфера видео. Супер!

У меня тоже постоянно в голове мысль, а правильно ли я делаю что-то на CSS, хотя верстаю уже 10 лет. Надо быть очень увлеченным чтобы на всё ответы знать (искать), у тебя это получается отлично. Так держать, у тебя есть чему поучиться!

Я вроде бы завязал верстать, уже год работаю на стройке посмотрел это видео и понял, надо что сверстать

@pepelsbey

3 жыл бұрын

Возвращайтесь, у нас тут тоже интересно

Спасибо за объяснение где, что нужно использовать. Видео как и всегда на высоте: Быстро, четко, по теме, с юмором! Приятно смотреть - трудно оторваться. Пошел искать ссылку под видео как стать патроном, хочу первым смотреть такие видосики =))). Такие проекты нужно поддерживать 😍

@pepelsbey

3 жыл бұрын

Спасибо 🥰

спасибо, Вадим, очень интересно ! Задумался сразу, а ведь я тоже использую гриды только когда не нахожу других вариантов. После этого рассказа, возможно мне будет легче использовать гриды по умолчанию, без задания размеров сетки :) Однако задумался, а как бы я задавал отступ для иконки этой кнопки, не посмотрев видео, и не думая о свойстве gap ... И в том случае я бы чуть задумался и писал такое: .button__icon + .button__text { margin-left: 10px }. :) Однако, согласен полностью, с gap это стало выглядеть изящнее и проще )

За gap в Flex большое спасибо. Не знал. Grid усердно учил, но ради правильного подвала на странице не использовал в связи с одной неадекватной проблемой, которую не мог решить - блок внутри грида не принимал 100% от рассчитанной ширины, где внутри были флексы. Но! Применения и уникальность Гриду я нашел и он незаменим! Мы пишем блоки в любом порядке, а отображаем по указанной схеме как нам нужно. В одном проекте я заменил таблицу на грид, поскольку таблица при сжатии может только сжиматься, а текст внутри переносится, но если столбцов 5-6, то на маленьком экране выглядит очень некрасиво и тогда нам нужно перерисовать таблицу целиком так, чтоб некоторые значения ставали рядом не по вертикали, а делили горизонталь и тоже самое в шапке таблицы. Как такое сделать в таблице? Никак. Можно только две таблицы делать и одну прятать, а другую показывать. Но получается, что нам наплевать на СЕО и роботов поисковика. Спам. А с Гридом мы можем сделать таблицу широкую или компактную. Пример сдесь chistota.kiev.ua/city-kiev/6-generalnaya_uborka.html (таблица с ценами)

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

Нужно текст обернуть в span и ему задать margin-left. И через first-child указать что у первого элемента margin: 0. И когда иконка исчезнет, то margin обнулится :) а у иконки его и так нет:) шах и мат скептики:)

@pepelsbey

3 жыл бұрын

Действительно, звучит гораздо проще!

Как раз недавно столкнулся с этим и вот вышел видос. Зашёл я такой узнать что и где использовать, а мне говорят используй что хочешь и где хочешь))) Круто! Спасибо за видео! (феечка CSS топ. Должна быть на следующий футболке)

Вадим, благодарю! Как всегда все четко и понятно

Спасибо, очень удобно и доступно

Огромное Вам, Вадим, спасибо. Я - в восторге! Просто чудесно! Успехов!

Спасибо огромное за отличное объяснение, благодарен, что увидел Ваш канал. Надеюсь когда-нибудь вы продолжите выпускать новые видео!

Вадим, спасибо за ваш труд! Зачастую, ограничиваюсь гридами только из-за поддержки старых браузеров) Хотелось бы услышать про все нюансы браузера Сафари от вас.

Использую в основном гриды для более сложных конструкций (типа галлереи), а также там, где нужна чёткая структура, всё по линиям. Был очень рад, когда узнал, что gap с флексами работает ... до того момента пока не открыл сафари, в итоге пришлось во всём проекте эмулировать gap с помощью двухстороннего margin и отрицательного у контейнера. Колхоз, не красиво, но работает и в сафари в том числе ) Вообще тема очень интересная, лайк от меня )

Вадим, спасибо за видео! Также был убеждён что гриды должны быть в только в основе страницы. Переубедили) Буду пробовать использовать их и на других элементах!

Как вовремя я вас нашла.)

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

@pepelsbey

3 жыл бұрын

Надпись на футболке как бы говорит :)

супер ! все просто и понятно

Полезный видос, Вадим! Спасибо! Обертка внутри кнопок спасет мир.

Спасибо, за информацию, было интересно!!

Спасибо, очень полезный контент!

Хороший контент, красавчик. Отличная подача.

Сразу влюбился в канал🙏 Спасибо за ваши труды!!!

Оч крутой контент, спасибо за старания))

Вадим, здравсвуйте. Очень актуальная тема. Спасибо большое за объяснение)

Ваууу, align-items в гридах!!! Здорово!!! … Ниче, что и у флексов он есть и иконки ровняются тоже не плохо, коть в bg, хоть так

@pepelsbey

2 жыл бұрын

Вы кажется не поймали самую главую идею этого видео: используйте что хотите, где хотите. Разрешаю!

Было полезно и интересно, спасибо!

Очень здорово, спасибо!)

Отличная работа, Вадим! Спасибо!) На счёт поддержки display: grid/flex у тега button: тоже столкнулся с такой проблемой, конкретно с поддержкой flex у кнопки в safari, года эдак 3-4 назад. Не знаю, побороли ли они эту проблему в своем браузере, но теперь мне страшно использовать flex напрямую для тега button в принципе. Вместо этого, оборачиваю внутреннее содержимое кнопки в блок и уже ему задаю display: flex/grid. Да это некрасиво, но это работает в safari)

Вадим, спасибо за урок. Теперь стало понятнее, почему гриды лучше использовать...

Посмотрю после работы, но за название (особенно последние 3 слова) уже лайк)

Как всегда круто! Лайк. Хотелось бы увидеть видео с Сафари что там все плохо или что-то работает(Только канул ie теперь Сафари даже шрифты там работают по-своему уже сталкивался везде нормальной шрифт работал в сафари же он становился жирным.)

Спасибо. Очень интересно.

Мне подача материала понравилась. благодарю

Вадим, как всегда, спасибо за полезный контент! К флексам привык, а гриды всегда привлекают своими возможностями) как только гриды и в сафари будут работать отлично, то думаю большинство на гриды перейдёт) не без Вашего участия)

@almazmusic

3 жыл бұрын

navi davi!

Лайк и подписка! Ставлю Вас пример в нашей онлайн-школе IT-технологий)

Вадим, не перестану говорить Вам спасибо! За Вашу работу, разборы, интерес к своему делу. да и в целом, умеете Вы заинтересовать и заставить подумать. Мало того, теперь еще и о механической клавиатуре постоянно думаю) подскажите, пожалуйста, что можно взять новичку в этом деле? Чтобы Вы посоветовали?

@pepelsbey

3 жыл бұрын

Вам спасибо, что смотрите :) Начать можно с SK64, она недорогая, сравнительно свежая и есть варианты с разными переключателями и блютусом.

@papan41k

3 жыл бұрын

@@pepelsbey Спасибо! Думаю, на НГ можно себе подарок сделать )

Вадим, как обычно, на высоте!! так держать

Спасибо Вам, рад что вас нашел

Калассссно рассказывает 👍👍👍👍👍

Спасибо! еще один кирпичик в мой фундамент знаний)

Балдеж! Спасибо!

прям как у нас на работе) гриды и флексы для разных целей. Перепутаешь- атата!

@pepelsbey

3 жыл бұрын

И какие у вас там правила?

@user-gg9ec2nm6i

3 жыл бұрын

@@pepelsbey скелет сайта на гридах, внутренние блоки с помощью флексов

@pepelsbey

3 жыл бұрын

А если гриды в кнопке, то публичная порка? Ну что за религиозные глупости.

Вадим ты красавчик, жаль что нет новых выпусков.

Хорошо рассказал)

Спасибо, открыл глаза на этот стереотип

Эх, надо проработать гриды. Чет всё на флексах делаю :(

@dsogs9961

3 жыл бұрын

Жиза...

@user-bo7mb9cf4d

3 жыл бұрын

Но так не хочется с флексов уходить, тут всё так просто

@antysm1

3 жыл бұрын

Такая же фигня))

@alenache1

3 жыл бұрын

у гридов поддержка хуже

@detro1821

3 жыл бұрын

@@alenache1 уже не)

Круто, очень круто )

Спасибо! использую и гриды и флексы, но для разных задач. Есть блок с флексами и есть блок с гридами, гриды в основном для фото...

Большое Спасибо!

Как всегда на высоте.

Очень круто

Спасибо)

Очень полезно! Хорошо обобщил

Гриды в кнопках - фантастика и подумать и могу что можно это свойство к ним применять! А еще все чаще убеждаюсь в том, что только за счет оверпрайснутой стоимости техники яблочной компании, большинство людей считают интернет эксплорер плохим браузером!)))

@pepelsbey

3 жыл бұрын

Нет, цены на технику тут совсем не причём. Просто есть браузеры, которые тормозят. Таким был IE, похоже ведёт себя Safari.

Спасибо Вадим.

Спасибо большое! Не так давно в вертске и все удивляюсь, как люди не пользуются гридами, ведь это такой на самом деле мощный инструмент.

@awenn2015

2 жыл бұрын

Привычка, я вот года два на флексах верстаю

На фразе рельсы в начале, в голове возникла мысль сразу про Ruby on Rails

Спасибо!

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

Лайк

Сафари - это современный IE. Все возможные баги можно найти именно в этом браузере.

@pepelsbey

2 жыл бұрын

Вы неправы, Safari - это современный Safari. Положение и ситуации браузеров несравнимы.

@mirgorods

2 жыл бұрын

@@pepelsbey если что, это не буквально. Имеется в виду, что в Сафари настолько много багов, что его можно сранить с IE 10 лет назад. И это не только мое субьективное мнение. Я использую Хром во время работы и во время работы уверен, что FF и Edge будут работать также хорошо, но не Safari. Там всегда есть проблемы. Хоть минимальные, но есть. И это я не говорю еще о мобильном Сафари.

Доброго времени Вадим. Очень отличные ролики, смотрю с большим удовольствием. После просмотра данного видео не могу ответить себе на вопрос, может быть вы раскроете мне глаза. Вопрос следующий - почему после того как мы задали элементам "а" и "button" объявление display: grid или flex, то ссылка ведёт себя предсказуемо, а именно растягивается на всю ширину родителя, в то время как элемент button этого не делает, а пляшет исключительно от своего содержимого. Вот так задачка. Всю голову уже сломал, никак не могу найти ответа. Есть конечно предположения что это связано с их изначальным значением display, но с другой стороны мы же его переопределяем. Буду рад если вернете моё психическое состояние в изначальное положение, а то уже не могу больше ни о чём думать. Заранее спасибо.

Спасибо за видео Вадим! У меня только один вопрос, не загружает ли такой подход CSS парсер внутри браузера? То есть возможно ли для CSS парсера удобнее и быстрее будет рассчитывать и парсит и создавать CSSOM с margin-right вместо grid gap?

@pepelsbey

3 жыл бұрын

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

Блин, спасибо за спойлер) Потому что я такой: "Хм... А что, есть какие-то правила? Разве я не могу их использовать как хочу?" А вон тут все в заголовке написано)

Спасибо.

Как обычно-safari умножает на ноль прогресс в css и это видео тоже

👍

Борюсь с убеждением, что использовать grid не стоит нигде, кроме сетки. В этом же убеждено и большинство моих коллег, которые крутят пальчиком у виска, когда я пытаюсь убедить их в обратном. Спасибо большое за полезное видео! )

zdorovo

Читал книгу "CSS in Depth", так вот там был ответ на данный вопрос такой. Grid лучше использовать для разметки больших блоков, flex для элементов внутри этих блоков

@pepelsbey

3 жыл бұрын

Читал книку «Depth in CSS», там был ответ на данный вопрос: флексы лучше использовать для больших блоков, гриды внутри для элементов. Видите, оба наши мнения имеют один и тот же вес, пока в них не добавить аргументацию. Но даже тогда это будет личным выбором каждого. В этом видео я постарался показать, как гриды могут быть где угодно и нет никаких ограничений, только ваше удобство.

А как же старый добрый селектор * + * внутри кнопки с margin left ?) А вообще крутая идея видео, теперь дождаться бы Сафари и можно праздновать😎

@pepelsbey

3 жыл бұрын

Да, сова * + * тоже сработает :) Но с гэпами гораздо лучше. Что интересно, в Safari 14.0.1 (только что вышло обновление) гриды уже заработали.

Для себя решил так. Начал использовать гриды на проекте для вёрстки сетки элементов с плиточным/карточным интерфейсом. В остальном пока только флексы. И у меня нет поддержки старых браузеров :)

@pepelsbey

3 жыл бұрын

Надеюсь, что я всё же зародил зерно сомнения и когда вам нужно будет сделать сложную раскладку в кнопке, вы вспомните про гриды

Дошел до конпки лайка табом и нажал пробел. И понял что это удобно

Подписался

Гриды тоже в основном для структурных элементов использовал

В сафари кажется grid-column-gap сработает. Раньше тоже маялся с вопросом а использовать ли где то в кнопках гриды. А потом плюнул и начал использовать везде, где они хорошо выполняли свою роль)

@pepelsbey

3 жыл бұрын

Там, к сожалению, в принципе display: grid не срабатывает на кнопке. Точнее, не срабатывал - только что приехал апдейт 14.0.1, где это починили. Вот же хитрецы.

👍🏻

@pepelsbey

3 жыл бұрын

🤘

Вадим добрый день.Хочу спросить не по теме.Есть ли у тебя видео про то, как правильно использовать в верстке margin и padding.Не могу найти хорошее виде, где будет объяснено какое и как свойство правильно применять чтобы верстка не ломалась.

@pepelsbey

3 жыл бұрын

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

@asgard1428

3 жыл бұрын

Понял.Спасибо.Я не прошу Вас обьяснять, думал что есть ресурс или может видео хорошее, где это подробно рассказано.

Мне бы такую фею, которая за меня верстать будет)

Люди, о которых речь в первую минуту: вчера были большие, но по пять, а сегодня маленькие, но по три.

Используйте CSS Grid только в крайних случаях: 1) вы не можете обойтись без изменения позиционирования элементов в CSS 2) вы не можете флексами сделать так, чтобы некоторые границы пересекались крестиком Иначе рискуете напороться на проблемы с гридами, и придется переделывать все на flex. CSS Grid не является заменой flex, и не нужно все верстать на гридах.

@pepelsbey

2 жыл бұрын

Используйте флексы только в крайних случаях: 1. Вы не можете обойтись без изменения позиционирования в CSS 2. Вы не можете гридами сделать так, чтобы некоторые границы пересекались крестиком Иначе вы рискуете напороться на проблемы с флексами и придётся всё переделывать на гридах. Флексы не являются заменой гридам, и не нужно всё верстать на флексах.

@pepelsbey

2 жыл бұрын

Я подумал, что будет интересно перевернуть вашу фразу. Она звучит так же «аргументированно», но утверждает обратное. Мне кажется, что в вас говорит привычка и подспудные страхи перед новым.

Учусь верстать недавно, не успел нахвататься ограничений, "верстаю как хочу". Видимо еще не прошел школу бутстрапа.

@user-mc4ft1hz8i

3 жыл бұрын

Да в страпе ничего такого, вы сами можете продумать и сотворить свой. Просто заранее определите классы для поведения элементов, я лично использую класс который определяет флекс и флекс колумн. Просто запарился как то печатать постоянно. Мне правда проще я фул стек. Удачи в освоении, начинайте учить бекенд, это поможет в понимании вёрстки, как бы странно это не звучало. Если будут вопросы не стесняйтесь gleb.sharapov@yahoo.com .

А есть ли плюсы использования em вместо px ? Шрифт то фиксированной величины. Или это исключительно ваше предпочтение ?

@pepelsbey

2 жыл бұрын

Емы удобно использовать только локально, если нужна зависимость размеров от текста. А вот ремы - другое дело, из них можно сделать удобную сквозную систему масштабирования размеров шрифта.

Сейчас гэпы на флексах в сафари работают

Пожалуйста подскажите: Как заменить бутстраповский col-lg-4 col-md-6 col-sm-12 на CSS FLEX (GRID)? и почему не использовать Bootstrap вместо CSS FLEX (GRID)?

@pepelsbey

2 жыл бұрын

Мне кажется вы первым вопросом ответили на второй. Если вы знаете как работают флексы и гриды, вам не нужно конвертировать классы в стили. Вы тогда просто знаете, как это сделать. Учите CSS, а не Bootstrap.

А как обстоят дела с точки зрения трудозатрат на работу с гридами? Например: я сделаю огромный лэндинг исключительно на гридах, буду использовать без разбора для отступов и всего чего смогу. Насколько это будет менее эффективно, с точки зрения выполнения, нежели, если использую отступы, флексы и гриды там, "где надо"?

@pepelsbey

3 жыл бұрын

В том и дело, что «где надо» не существует. Существует ваш личный уровень владения технологиями. Если кто-то не умеете верстать - трудозатраты будут огромные. Если другой человек отлично владеет гридами и флексами - низкие. Знайте всё, пользуйтесь где вам удобно.

@danila-korotkov

3 жыл бұрын

Я не верно выразил мысль. Про трудозатраты я имел ввиду затраты процессора, памяти и прочего..

@pepelsbey

3 жыл бұрын

Обычно перфоманс рендеринга раскладки - это третья или пятая вещь, которую нужно сделать типичному сайту. Важнее оптимизировать JS, шрифты, картинки, доставку про сети, а потом, когда уже всё идеально и 100 в Лайтхаусе - можно подумать про скорость раскладки.

Можно реализовать все это дело через @supports и никаких оберток не нужно будет делать.

А где взять эту фею в свой проект, чтобы она писала css так же быстро? :D

@pepelsbey

3 жыл бұрын

Пробовали npm install fairy?

так как кнопки то делать в наше время, беря во внимание текущий сафари?

@pepelsbey

3 жыл бұрын

Да как хотите :) По задаче и по поддержке: если в кнопках только текст, то можно и не усложнять. Если есть иконки и нужно удобно, то смотрите на совместимость.