Как верстать такие «чудо» макеты?

Question

[WebforSelf]

Попадаются иногда такие макеты, что фантазии не хватает как всё это интерактивно выверстать. Кто что посоветует? Верстаю на бустрапе, но есть пара блоков такого формата, точно не колоночного.



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

Comments

[Ankhena]

Наверное, самый простой вариант:
Текст абсолютами с координатами в %, при необходимости calc.
Текст - нумерованный список.
Цифры - counter-reset, counter-increment.
Остальное одним фоном. Хорошо бы, если бы этот фон оказался SVG, чтобы не делать 100500 экземпляров картинки.
Если хочется, можно прямоугольники выковырять из фона и поставить как ::after к элементам списка.

Можно и гридами замутить, если правильную кратность сетке задать. Только смысл...

На мелких экранах перестраивать во что-нибудь по-проще. Типа в столбик, но со смещениями.

Отрывать руки дизайнеру не стоит.
Сложные макеты это повышение вашей квалификации.
"Верстать" одинаковые сайты по одинаковой сетке под копирку могут и школьники.

[Антон]

оторвать руки дизайнеру,

Скорее заказчик так захотел

[Philipp]

Антон, да, дизайн потненький, работать будет плохо.

[Ян Александров]

Дааа, с дизайном такая же сложность как с Enlish-ем :)

[vada]

Ян Александров, клуб энлишей? Страшные, видимо, люди...

Answer 1

[Aetae]

Ну пускай дизайнер рисует как он видит адаптацию этого дела хотяб для трёх основных размеров и от туда уже плясать.
Иначе влепи картинкой с width: 100% и вёрстка готова.)

Comments

[WebforSelf]

ахаха) влепить картинкой) это прям дикое желание)

[yarnstart]

WebforSelf, еще лучше инлайн свг

[Антон]

WebforSelf, Ха-ха)...
у меня так было на работе, года три висело и никто не понял, пока не спросили: "А как текст поменять?".

Answer 2

[Макс]

Абсолютное позиционирование, задать конкретную высоту контейнера, top left width и height указывать в процентах (height только для тех элементов которые не должны рушатся - стрелки линии и т.п.), тогда стрелки и линии будут на своих местах, + 3 телеги медиа-запросов. И как подметили выше, для мобилки отдельный дизайн нужен.

Comments

[WebforSelf]

ну я думаю calc использовать

[Макс]

WebforSelf, как именно?

[WebforSelf]

Макс, для абсолютного позиционирования, чтоб все при смене разрешения складывалось пропорционально. Или лучше просто media запросы?

[Макс]

WebforSelf, За это проценты буду отвечать и все будет пропорционально складываться, а медиа-запросы нужны чтобы просто подрихтовать если что-то в друг съедет.

[Макс]

WebforSelf, кстати, вместо указания конкретной высоты можно картинку в контейнер кинуть, как зайдний фон, тогда при изменении ширины она будет пропорционально менять высоту, типа:

<div class="some-wrapper">
    <img src="..." class="some-bg"/>
    <div class="some-content">тут весь контент</div>
</div>

.some-wrapper{position: relative;}
.some-bg{display:block; max-wdth: 100%; position: static;}
.some-content{position: absolute; top: 0; bottom: 0; left: 0; right: 0;}

одну картинку, примерно из этих элементов:

[WebforSelf]

Макс, Кстати да! Спасибо! Запилю из этого бекграуд и уже будет попроще

Answer 3

[Антон]

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

Leaderline JS
Набросок

Comments

[WebforSelf]

Крутая вещь, спасибо!

Answer 4

[Арсений Матыцин]

1. Enlish club это, бесспорно, круто.
2. Бутстрап не панацея и не надо пытаться под него все подогнать.
3. Применяй mobile-first подход + бэм (номер и позиция «листка» более чем легко описываются модификаторами).
4. На десктопе делай либо абсолютное, либо гриды.
5. Декоративные рисульки можно как фоновой картинкой (которой на мобилке быть не должно, ну или должна быть другая), но лучше спозиционировать их относительно блоков-пунктов.
6. Со стрелками и пунктирными линиями да, придется заморочиться, но так как это все же секция, которую врядли будут по контенту дергать каждый день, то рассчетами можно пренебречь и задать проценты и соотношения. Ну и SVG для упрощения жизни.

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

Answer 5

[Programmir]

Надо объяснить, что это не концепция веб. А то дизайнеру-то легко наляпать под одно разрешение, он же не учитывает, что полно разрешений.