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

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

5f32fc1a8ba76990471474.png

Конечно лучший совет это оторвать руки дизайнеру, но как-то надо выкручиваться, с блоками более менее понятно, можно и абсолютным позиционированием, можно и падингами, маргинами, а вот черточки, чтобы при адаптивности не рушилась система.
  • Вопрос задан
  • 1560 просмотров
Пригласить эксперта
Ответы на вопрос 6
PavelUstyugov
@PavelUstyugov
php
нихрена не выйдет) для мобильной версии дизер должен сделать отдельный макет.
Ответ написан
Aetae
@Aetae
Тлен
Ну пускай дизайнер рисует как он видит адаптацию этого дела хотяб для трёх основных размеров и от туда уже плясать.
Иначе влепи картинкой с width: 100% и вёрстка готова.)
Ответ написан
@maximrabotaet
Абсолютное позиционирование, задать конкретную высоту контейнера, top left width и height указывать в процентах (height только для тех элементов которые не должны рушатся - стрелки линии и т.п.), тогда стрелки и линии будут на своих местах, + 3 телеги медиа-запросов. И как подметили выше, для мобилки отдельный дизайн нужен.
Ответ написан
Eridani
@Eridani
Мимо проходил
а вот черточки, чтобы при адаптивности не рушилась система.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы