По сетке это или не по сетке?

Question

[gopello]

Взываю Вас, о Боги и Гуру верстки.

Проблема в том, что верстальщики говорят «данный макет выстроен не по сетке и верстать они так не могут на Bootstrap, так как блок полностью не закрывает все столбцы сетки и справа есть пустое место» (Синим цветом — блоки, красным цветом — сетка, дизайн — адаптивный, bootstrap. Размер блока = 4 колонки - 20px. ).

В связи с этим есть вопросы:
1. Макет выстроен по сетке или нет?
2. Возможна ли такая реализация как на прикрепленном изображении?
3. Если да, то насколько сильно это усложняет задачу?

Спасибо

Answer 1

[ArturArturov]

вообще это ерунда, но дизайнеру следовало быть аккуратнее.
усложняет на 10 минут

Comments

[gopello]

Это делалось специально(по просьбе заказчика), чтобы блоки не слипались и было больше воздуха между ними.

[ArturArturov]

по умолчанию в бутстрапе padding-left и -right = 15px, но ничего не мешает добавить косметический класс, который это изменяет

[ArturArturov]

я так понимаю он хочет 30px

[gopello]

ArturArturov: Размеры между колонками (20px) А размер блока(синий) 4 колонки - 20px (тоесть расстояния между блоками становится 40px)

Answer 2

[Сергей delphinpro]

Налицо ошибка дизайнера. Ему следует перестроить сетку. Именно сетку, а не блоки с контентом. Хотя их немного тоже затронуть придется.

В сетке следует увеличить гуттеры (расстояния между колонками). И соответственно уменьшить ширину колонок.
Третий столбик чуть изменится в ширине. Не стоит выпендриваться и отдать ему получившиеся четыре колонки.

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

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

Answer 3

[mletov]

Поднимал этот вопрос, пусть и немного с другой стороны
Насколько совместим bootstrap и pixel perfect?

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

Answer 4

[HamSter]

1. Макет выстроен не по сетке как со стороны дизайнера так и со стороны верстальщика.
Читайте хотя бы статьи: Памятка дизайнеру сайтов
модульная сетка

*А вообще есть уйма книг для дизайнеров!!!

Bootstrap grid

2. Реализация возможна.
3. На сколько? - Часа на 2, что бы подогнать все разрешения к нормальному виду.

Comments

[gopello]

А можете подсказать, что сделать чтоб был по сетке? И по каким параметрам вы решили что не по сетке?

[gopello]

И еще забыл сказать, что дизайн уже утвержден по такой сетке.

[HamSter]

gopello: поправила ответ! Почитайте что такое модульная сетка и как сделать, чтобы было по сетке!

[gopello]

Все это знаю, и даже в той статье показаны элементы, которые не полностью занимают столбец (тут именно в этом проблема у верстальщиков что они не знают как это реализовать) По поводу сетки: их тут 12 столбцов (последнии 4 сразу соединил, так как там будет доп инфа, которая будет прятаться)

[HamSter]

gopello: Пусть будет так! Я, лично, не вижу проблемы в верстке и в верстке с помощью bootstrap grid. Видимо верстальщик, просто, не хочет связываться с таким дизайнером (макетом), либо не компетентен.

[gopello]

Не вставляются сюда картинки. Вот ссылка https://invis.io/5Y7TYVWXH — Вы хотите сказать, что можно верстать как синие блоки только, и расположение зеленых блоков не по сетке? Вы же понимаете что это совсем не гибко, загоняют в рамки.

[Алексей Струков]

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

[gopello]

И какие же классические правила дизайна?

[HamSter]

gopello: читайте книги и статьи о дизайне, чтобы не задавать подобных вопросов!

Answer 5

[Андрей Хохлов]

1. Нет
2. Да
3. Совсем чуть-чуть

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

И пользуясь случаем https://github.com/andrey-hohlov/psd-templates-req...