Stoer
@Stoer

Как бы вы сверстали такую страничку?

Как бы вы сверстали такую страничку?

Здравствуйте, друзья.

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

Сайт и адаптивный и резиновый. Количество столбцов меняется в зависимости от ширины экрана: 0-580: 1 столбец, 581-870: 2 столбца, 871-1160: 3 столбца, 1161-1450: 4 столбца, 1451+∞: 5 столбцов.

Конкретно этот макет выполнен для разрешения 1920, поэтому пять столбцов.

6040a1bb0baf4924849263.png

Состояния поиска максимально стандартные, вот так выгляди вызов поиска.

6040bdbc5216c922730084.jpeg

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

6040bddc66d3c728259167.jpeg

1 Что выбрать для верстки подобных страниц: гриды, флексбоксы, дивы или что-то другое?
2 Тут надо использовать БЭМ, Bootstrap или что-то другое?
3 Насколько сложно/долго сверстать такую страничку?
4 Какие рекомендации вы бы добавили лично от себя?
  • Вопрос задан
  • 310 просмотров
Решения вопроса 1
approximate_solution
@approximate_solution
JS Developer. Angular\React\Vue\Ember
флексбоксы

Как самое простое и быстро накидываемое, т.к у вас не сложная верстка.

Просто "ячейки" в процентах через width: calc() высчитываете и всё.

Тут надо использовать БЭМ, Bootstrap или что-то другое?

Советую для начала разобраться зачем нужен БЭМ и Бутстрап, именно в вашем случае - можете использовать БЭМ\Бутстрап, можете раскидывать руками, хозяин-барин.

Насколько сложно/долго сверстать такую страничку?

Для профессионала - сверстать сетку, и выделить основные блоки, которые будут дублироваться в шаблоне: т.е минут 30, если еще кофе налить.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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