Вёрстка в 2022. Часть 2: Практика

[notiv-nt]

Конечно прекрасно, но такой контент лучше в видео формате воспринимать

[Xeldos]

Нет.

[FFF]

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

[IgosYee]

Ох, все отступы кратные 10ке. Тут недавно клиент пришел со своим дизайном, вроде ок. Но все отступы плавают 17рх, 9рх и тд, логики в них никакой нет. "Дизайнер" ставил их на глаз. На просьбу подправить или что мы будем использовать одинаковые в похожих элементах, клиент сказал "нетЪ, хочу перфект пиксель"...

[mikita_du]

Тут дело такое.

У меня в одном дизайне были разные отступы в дизайне вокруг одного элемента.

Сверху 9px, справа 7px, снизу 8px.

Я на своё усмотрение сделал единое. На дизайн было похоже - все были рады)

[stainlouder]

Согласен, довольно небольшой процент дизайнеров, которые относятся к своей работе с пониманием. Как раз используют ритмику, палитры, иногда даже золотое сечение, причем со знанием дела. Многие, к сожалению, считают, что достаточно просто "природного" чутья и понимания "что с чем слепить чтобы было круто". А еще находятся заказчики, которые до абсурда отставают каждый пиксель подобных дизайн кодов.

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

[beDenz]

Это же классика. Даже крупные заказчики этим грешат. Я обычно так и говорю: либо отдаёте дизайнеру на доработку, либо я делаю на своё усмотрение, где я привожу все отступы к какой то системе. Обычно второй вариант всех устраивает.

[mikita_du]

Очень рад, что не я один так думаю. А-то прямо чувство одиночества появилось какое-то)

[pkashtanov]

Искал гайды по сабжу, похоже нашел. Спасибо вам.

[skeevy]

В первой части переизобрели бутстрап 4, во второй части в css уже видны проблемы отсутствия следования методологии какой либо

Для новичков материал суперский, но автору посоветовал бы пересмотреть подход к организации css, начиная с нейминга и раз вы используете scss - использовать миксины чаще и placeholder-классы. Даже "улучшенный" код можно ещё сократить, используя все выше, а спагетти из card-* упаковать в 3-5 строчек, используя map

[n1ck_dev]

Зачем же так все усложнять ..

[langrafik]

насколько стьатья могла быть прекрасной, если бы не отвратительного качества скриншоты
https://habrastorage.org/r/w1560/getpro/habr/upload_files/079/2c8/e82/0792c8e8265b4a2d0a7c02b0d15bf91f.png

[mikita_du]

Прошу прощения. Заменил.

[SuhushinAS]

Я оформил чеклист приёмки макетов, перед взятием их в работу.
https://github.com/SuhushinAS/design-checklist
Может кому-нибудь будет полезно.