Адаптивная вёрстка сайта агентства недвижимости по макету из Figma: каталог объектов с фильтрами, карточка квартиры и страницы новостроек. Сверстал Евгений Росляков, который делает сайты с 2016 года. Он самозанятый, работает по договору, юрлицам даёт закрывающие документы и берёт заказы в Москве и удалённо.
Агентство заказало редизайн у дизайнера. На руках был аккуратный макет в Figma на сорок с лишним экранов. Старый сайт жил на Bootstrap, и программист агентства не хотел переписывать логику каталога. А новые страницы должны были выглядеть как в макете, а не «примерно похоже».
Нужна была точная вёрстка, которая встанет на существующий движок и не развалится, когда менеджеры загрузят объявление с длинным названием.
Сначала разобрал макет на компоненты: карточка объекта, фильтр, галерея, блок ипотеки, форма заявки. Цвета, отступы и шрифты из Figma вынес в переменные Sass. Они лежат в одном файле и превращаются в CSS-переменные, так что новая и старая части сайта берут значения из одного места.
Каталог и карточку квартиры сверстал на Tailwind CSS: страницы новые, для них так быстрее и чище. Старые разделы остались на Bootstrap. Фреймворки я не смешивал: у каждой страницы один собранный файл стилей, поэтому они не спорят друг с другом. Стили старых разделов были на LESS. Я перевёл их на SCSS, чтобы вся сборка шла через Sass.
Для стилей на LESS/Sass/SCSS договорились о простых правилах: вложенность не глубже трёх уровней, переменные только из общего файла, чужие классы не перезаписываем. Программисту агентства проще читать такой код, чем кашу из переопределений.
Сборку настроил на Gulp.js. Он собирает Sass и Tailwind, сжимает стили и картинки и выдаёт отдельный лёгкий файл для каждой страницы. Программист запускает одну команду и забирает готовые файлы.
Отдельно проверил «живые» случаи: объявления без фото, очень длинные адреса, цены с пробелами, три фотографии в галерее и тридцать. Прогнал вёрстку в разных браузерах и на телефонах. На мобильном фильтр открывается снизу, а кнопка «Записаться на просмотр» всегда под рукой.
Новые страницы совпадают с макетом, а сайт не пришлось переписывать с нуля. Менеджеры загружают объявления как раньше, вёрстка не ломается на реальных данных. Программист получил понятные компоненты и сборку, с которыми удобно работать дальше.
Если у вас есть макет в Figma и нужна аккуратная вёрстка или создание сайта по готовому дизайну, напишите мне здесь, на freelance.ru.
