ra73 по новому дизайну
Вёрстка и разработка переосмысленного дизайна сайта ra73.ru
Не знаю в чём заключалась проблема, однако, на заре своей работы в MSC я сверстал и натянул на Wordpress новый дизайн сайта для рекламного агентства Мозаика. Из–за того, что в контексте MSC у меня и других сотрудников совершенно не было времени на этот сайт, была достигнута договорённость, по которой я разрабатывал сайт в свободное от основной работы время, как ИП.
Вообще, это был чертовски геморройный проект. Чертовски.
Основная проблема этого сайта заключалась в том, что мне дали несколько psd'шек и jpg и сказали приступай. Никаких брифов, объяснений и прочего, просто набор макетов.
Таким образом, я был совершенно не в курсе, как задумывались те или иные компоненты, дизайна мобильной версии не было совсем, поэтому, работая над этим сайтом, приходилось часто импровизировать.
В плане организации рабочего процесса, я решил провести небольшой эксперимент, и попытался максимально изолировать компоненты друг от друга, даже на уровне ФС:
component/
component.njk # основной шаблон компонента
scss/
component_styles.scss # scss который будет добавлен в общий style.css
view/
component_view.njk # доп. шаблоны используемые в компоненте
К сожалению, на примере этого проекта, мне пришлось отказаться от такой структуры — слишком быстро это начинало тормозить с увеличением количества компонентов.
За исключением этой особенности, это вполне обычные таски — пережать картинки, скомпилировать scss, пройтись postcss, собрать njk шаблоны, ну и webpack+babel прогнать на js файлах.
Из библиотек, я заюзал, привычный уже, susy и некоторые компоненты бутстрапа. Свёрстан сайт целиком по БЭМу.
Геморрой №1
Полноэкранное видео на фоне.
Изначально, вёрстка подразумевала использование <video>. И проблем с полноэкранностью у него нет — задали контейнеру 100vh, а дальше дело техники. Уже в процессе сдачи, выяснилось, что хотят они видео с Youtube туда вставлять, и вот тут меня ждало разочарование.
Уж не знаю почему, но видео с Youtube отчаянно не желало вставать в полный экран — появлялись чёрные полоски по бокам. Ни один метод, найденный в сети, не помог мне побороть эту проблему, поэтому всё же оставили <video>.
Геморрой №2
Скачущие контейнеры.
Оооо, это была довольно неприятная проблема. Дизайн подразумевал, что сайт не целиком находится в контейнере, а «местечково». Т.е. какие–то компоненты должны жить в контейнере, а какие–то должны растягиваться на всю ширину.
Как–бы, это не проблема, если это не элементы типографики, добавляемые через wysiwyg редактор.
Эту проблему я решил путём добавления миксина @container в селекторы элементов типографики. Решение конечно так себе, но работает без нареканий.
Геморрой №3
Странная шапка
По задумке дизайна, сам логотип должен отображаться так, будто он лежит в контейнере (чтобы идти в одну линию с текстом), но у логотипа ещё должна быть подложка, которая тянется с левого края до этого контейнера:
Я довольно долго бился с этим, но в итоге пришёл к выводу, что тут либо JS, либо нужно забить и сделать, чтобы он просто не выбивался из дизайна. И т.к. я не считаю целесообразным использование православного javascript для таких целей, реализовал вторую схему.
Что внутри?
Сайт сделан на Wordpress, поэтому ничего сверхъестественного в нём нет. Для кастомных материалов и таксономии я всегда использую Pods Framework, для форм – Contact Form 7. В Customizer добавлено несколько настроек для загрузки видеофайлов фона.
В целом, это самый обычный Wordpress сайт, без каких–то собственных наработок.