oqiipo / shri_adaptive Goto Github PK

DEMO

Для реализации проекта я воспользовался привычным для себя сборщиком TARS от 2гис. Причина - из коробки сборка, Pug/handlebars, препроцессоры на выбор, livereload, проксирование во вне, автоматизированное создание спрайтов и еще много чего. В общем, когда мне требуется что-то сверстать, я просто беру TARS и сосредотачиваюсь на задаче.

Верстка разбита по компонентам, стили и разметка для которых находятся в соответствующих директориях в markup/components

• tileSm - для маленьких карточек
• tileSmText - для маленьких карточек с текстом
• tileMd - для средних карточек
• tileLg - для больших карточек
• layout - компонент, в котором из предоставленных данных генерируются все карточки.

На что стоит обратить внимание:

Сетка построена на grid. При размерах экрана менее 600px (подбирал брейкпоинт на глаз) сетка перестраивается следующим образом - среднего и большого размера плитки становятся по одной в ряд, маленькие плитки становятся по две в ряд. Дескрипшн и кнопочки у изначально больших плиток перемещаются под картинку.

Видимая часть заголовка ограничена максимальной высотой соответствующего блока + overflow: hidden. Отступ после заголовка сделан из пустого блока фиксированной высоты (к аналогичному приему прибег и на остальных карточках).

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

Для карточек реализованы адаптивные изображения с помощью комбинирования srcset и sizes тега img.