Стыковка линеек и плашек
Линейки и плашки - сильный инструмент верстки, а с любым сильным инструментом нужно уметь обращаться. Попытки организовать макет с помощью линеек и плашек нередко заканчиваются провалом: верстка превращается в кирпичную стену. В этой статье разберемся, как аккуратно стыковать элементы друг с другом.
Линейка + линейка
Если встретились две линейки, они должны превратиться в одну, это понятно:
У «Победы» плохо:
У «Озон-тревела» лучше. На самом деле здесь можно обойтись совсем без линеек, потому что элементы стоят компактно и выбранная дата подсвечена.
Даже если линейки - это часть стиля, стоит подумать о том, как сократить их число. Тарифы разделены двойной границей:
Одинарная будет меньше рябить:
В прошлых версиях «Хрома» каждый документ на панели загрузок был обведен отдельной рамочкой:
Сейчас остался только разделитель между документами:
Очень запущенный случай:
Линейка + плашка
Если встретились линейка и плашка, линейка должна исчезнуть, ведь у плашки есть своя граница:
Грязные стыковки часто встречаются в макетах, собранных из готовых блоков, например, в почтовых рассылках. Серая линейка не нужна, достаточно увеличенного отступа перед фотографией:
Последняя линейка лишняя, потому что под ней ничего нет:
Красивый ховер на «Гуглдоке». Плашка появляется - линейки исчезают:
Некрасивый ховер на «Пинтересте»:
Плашка + плашка
Стыковать плашки можно по-разному. Выбирайте способ, который больше подходит для вашей ситуации.
1. Плашки превращаются в линейку. Этот вариант самый чистый: линейка занимает намного меньше пикселей, чем плашка.
Так делают, когда плашки нужны только для разделения блоков, а не для их выделения. На следующем примере желтая плашка работает на выделение, она подсвечивает требования к загружаемым документам. Серые - разделяют документы между собой:
Раз серые плашки выглядят одинаково, их функцию можно перенести на линейки:
Великий переход от шестой к седьмой АйОС состоял в замене массивных плашек тоненькими линейками. Было и стало:
2. Плашки разного цвета или фактуры стыкуются вплотную. Дополнительный отступ необязателен:
Вариант неуниверсальный, но иногда подходит:
3. Плашки ставятся максимально близко друг к другу. Близко, конечно, понятие растяжимое. Конкретного значения нет, ориентируйтесь на отступы, принятые в вашей дизайн-системе.
Проблема больших отступов в том, что они создают эффект чересполосицы. Когда размер отступа сопоставим с размером элемента, макет превращается в зебру:
С меньшими отступами верстка будет спокойнее:
И конечно, плашки здесь можно заменить линейками:
Пара красивых примеров с плотной стыковкой:
Прослойка
Бывает, что блоки должны выглядеть самостоятельными и не хочется ставить их слишком близко, но тогда появляется пустой этаж. У меня такая ситуация сложилась при проектировании сайта «Веб-стандартов». Анонсы статей, разделенные линейками, встретились с подвалом на серой плашке:
Возможное решение - добавить между этажами дополнительный элемент, так называемую прослойку. Это может быть полноценный блок или заголовок нижнего этажа над плашкой. Я добавил строчку с анонсом ближайшего мероприятия:
Ограничение ответственности
Это не золотые правила. Я рассказал о том, как делать аккуратно и не плодить лишних элементов. Иногда чистыми стыковками приходится жертвовать ради гайдлайнов или автоматизации верстки. К тому же, чисто не всегда значит хорошо (хотя обычно всё-таки значит). Если макет должен попасть в определенную стилистику, то и действовать нужно по правилам этой стилистики.
Подробнее о линейках в таблицах читайте в главе «Линейки и чересполосица» курса «Таблицы и прочие радости»
Линейка + линейка
Если встретились две линейки, они должны превратиться в одну, это понятно:
У «Победы» плохо:
У «Озон-тревела» лучше. На самом деле здесь можно обойтись совсем без линеек, потому что элементы стоят компактно и выбранная дата подсвечена.
Даже если линейки - это часть стиля, стоит подумать о том, как сократить их число. Тарифы разделены двойной границей:
Одинарная будет меньше рябить:
В прошлых версиях «Хрома» каждый документ на панели загрузок был обведен отдельной рамочкой:
Сейчас остался только разделитель между документами:
Очень запущенный случай:
Линейка + плашка
Если встретились линейка и плашка, линейка должна исчезнуть, ведь у плашки есть своя граница:
Грязные стыковки часто встречаются в макетах, собранных из готовых блоков, например, в почтовых рассылках. Серая линейка не нужна, достаточно увеличенного отступа перед фотографией:
Последняя линейка лишняя, потому что под ней ничего нет:
Красивый ховер на «Гуглдоке». Плашка появляется - линейки исчезают:
Некрасивый ховер на «Пинтересте»:
Плашка + плашка
Стыковать плашки можно по-разному. Выбирайте способ, который больше подходит для вашей ситуации.
1. Плашки превращаются в линейку. Этот вариант самый чистый: линейка занимает намного меньше пикселей, чем плашка.
Так делают, когда плашки нужны только для разделения блоков, а не для их выделения. На следующем примере желтая плашка работает на выделение, она подсвечивает требования к загружаемым документам. Серые - разделяют документы между собой:
Раз серые плашки выглядят одинаково, их функцию можно перенести на линейки:
Великий переход от шестой к седьмой АйОС состоял в замене массивных плашек тоненькими линейками. Было и стало:
2. Плашки разного цвета или фактуры стыкуются вплотную. Дополнительный отступ необязателен:
Вариант неуниверсальный, но иногда подходит:
3. Плашки ставятся максимально близко друг к другу. Близко, конечно, понятие растяжимое. Конкретного значения нет, ориентируйтесь на отступы, принятые в вашей дизайн-системе.
Проблема больших отступов в том, что они создают эффект чересполосицы. Когда размер отступа сопоставим с размером элемента, макет превращается в зебру:
С меньшими отступами верстка будет спокойнее:
И конечно, плашки здесь можно заменить линейками:
Пара красивых примеров с плотной стыковкой:
Прослойка
Бывает, что блоки должны выглядеть самостоятельными и не хочется ставить их слишком близко, но тогда появляется пустой этаж. У меня такая ситуация сложилась при проектировании сайта «Веб-стандартов». Анонсы статей, разделенные линейками, встретились с подвалом на серой плашке:
Возможное решение - добавить между этажами дополнительный элемент, так называемую прослойку. Это может быть полноценный блок или заголовок нижнего этажа над плашкой. Я добавил строчку с анонсом ближайшего мероприятия:
Ограничение ответственности
Это не золотые правила. Я рассказал о том, как делать аккуратно и не плодить лишних элементов. Иногда чистыми стыковками приходится жертвовать ради гайдлайнов или автоматизации верстки. К тому же, чисто не всегда значит хорошо (хотя обычно всё-таки значит). Если макет должен попасть в определенную стилистику, то и действовать нужно по правилам этой стилистики.
Подробнее о линейках в таблицах читайте в главе «Линейки и чересполосица» курса «Таблицы и прочие радости»