Типичная ошибка сетки (Bootstrap Grid), или почему дизайнер и верстальщик не понимают друг друга

Сталкивались ли вы с ситуацией, когда текст и блоки, которые прекрасно вмещаются в макете фотошопа, почему-то упрямо не хотят слушаться в верстке – не вмещаются в заданную макетом ширину? При этом и дизайнер, и верстальщик используют одинаковую сетку, например, сетку Bootstrap 3.

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

Сетка бутстрапа, как распространенный пример сетки, устанавливает 12 колоночную схему, которая на экранах от 1200px и более шириной имеет размеры между колонками 30px и боковые отступы контента по 15px слева и справа. Учитывая, что ширина колонок дизайнером задается в пикселях, а верстальщиком – в процентах, описанная ниже ошибка не сразу заметна.

Как работает с сеткой дизайнер? Обычно эта сетка генерируется каким-либо сервисом, скачивается и устанавливается в фотошоп. Как работает с сеткой верстальщик? Сетка берется из фреймворка Bootstrap 3.

Тогда в чем же проблема, если размеры сетки (колонок и интервалов) одинаковые?

Суть проблемы кроется в удобном CSS-свойстве «box-sizing» со значением «border-box», что по умолчанию установлено в бутстрапе. Из-за этого дизайнер ширину боковых отступов считает добавочно к ширине контента (1170px плюс боковые отступы по 15px справа и слева), а верстальщик, сам не ведая того, включает их в ширину контента (1170px, включая боковые отступы по 15px, т.е. ширина контента равна 1140px). Таким образом получается, что в проекте на разных этапах используют две разные сетки причем у верстальщика она более узкая.

Встречается данная ошибка и при использовании других сеток, отличных от Bootstrap. По-видимому, она зародилась, с появлением «border-box».

Решение простое – скорректировать размер контейнера: «container {width: 1200px;}» (1170px – контент плюс 15px отступы справа и слева). Также необходимо провести соответствующую корректировку контейнера на величину боковых отступов для экранов других разрешений.

Как мне кажется, не имеет смысла спорить о том, кто ответственен за исправление ошибки. Хорошим тоном для дизайнера будут уточнить этот вопрос у верстальщика, а верстальщику – помнить о такой особенности применения «border-box» для сетки. Исправление ошибки в широко распространенном фреймворке также увеличит количество сайтов, строго соответствующих дизайну.

Similar posts

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 5

    +2
    Хм, инвайтов не было доступных, а приглашение отправилось. Не баг ли это хабра?
      0
      Опять некромантия из песочницы? Пост 2016 года, автора с тех пор не видно, а ему инвайт отдают…
        0
        habr.com/ru/company/tm/blog/439140 вон оно как оказывается.
          0
          Автор регулярно знакомится с публикациями хабра… Каким образом можно было его заметить без права полноценного доступа?
        0
        Дизайнеру стоит не отступы считать, а просто скачать уже готовый шаблон. Причём гораздо лучше брать шаблон не с ворохом направляющих, а с колонками. Тогда точно путаницы не будет: видишь колонки — вписывай них.
        Есть ещё другая проблема у дизайнеров: они часто не понимают, что вложенные колонки — это не тоже самое, что первичные. То есть, если взять колонку размером col-7 и вставить в неё две колонки размерами, например, col-5 и col-7, то они будут иметь меньшую ширину. У дизайнера всё будет выглядеть отлично, он ведь этого не учитывает и рисует всё по одной сетке, а вот что делать верстальщику не понятно.
        image

        Для таких ситуаций я написал простецкий генератор, чтобы можно было наглядно дизайнерам вопросы задавать: clackym.github.io/grid-image-generator

        Only users with full accounts can post comments. Log in, please.