Система отступов
Одно из самых заметных несоответствий макета и верстки — отступы между блоками. Даже небольшие различия, такие как пять пикселей, чуть больший интерлиньяж или неточные скругления в элементах, могут быть критичными для нас.
Различие в отступах на верстке и в дизайн макетах
Более того, и нам самим иногда сложно поддерживать нужные расстояния: где-то случайно смещается блок, где-то в уже сверстанную страницу вносятся правки, которые не документируются. В результате, макет совсем не похож на то, каким он задумывался изначально.
Как с этим бороться? Создаем систему вертикальных отступов под каждый проект. Если разобрать макет или страницу сайта по элементам и посмотреть на вертикальные отступы между ними, вырисовываются закономерности.
Так у нас появляется некий набор размеров отступов и вырисовывается система.
Важно: на странице отступы проставляются между блоками, а внутри атомов, молекул и организмов они уже определены в UI kit. Иначе макет будет сложно восприниматься с таким множеством отступов сразу.
Как устроена система
Мы разделяем вертикальные отступы по уровням (VR0, VR1, VR2 и т д)
Первые несколько уровней отступов обычно используются внутри атомов и молекул. Более крупные отступы предназначены для организмов и пространств между ними.
Так взаимосвязи между блоками становятся наглядными: фронтендер смотрит на макет и сразу видит закономерности, которые продумал дизайнер.
Как работать с системой
Проставляем отступы, когда уже полностью готов макет десктопа, и мы хотим сразу выстроить систему, либо когда почти завершены все адаптивы, и система строится параллельно.
Важно: отступ одного цвета, находясь в конкретном месте, может менять свой размер в зависимости от адаптива, но не должен менять цвет или высоту в зависимости от расположения. Это упрощает создание адаптивных сайтов и делает отступы предсказуемыми на каждом брейкпоинте.
Как проставлять отступы
Важно: бывают ситуации, когда приходится отходить от системы — это нормально. Главное, не злоупотреблять и стараться минимизировать такие случаи.
Особенности и плюсы использования
Система отступов позволяет программистам легко увидеть структуру. Один цвет — это ряд в таблице с определённым набором отступов, а другой цвет — другой ряд с другим набором отступов. Это делает макеты аккуратными, а верстку предсказуемой.
Так выглядит система отступов в коде
Система вертикальных отступов особенно полезна на крупных проектах с большим количеством макетов и адаптивной версткой, а также при работе в команде.
На маленьких проектах или лендингах система может оказаться избыточной, так как её поддержание требует дополнительного времени и усилий.