Верстка десктоп и мобил (5 страниц) из FIGMA
Макеты расположены по ссылке
https://www.figma.com/file/BKhcVLp0jpoZ3bbRC5scVS/...
просьба указывать сроки и стоимость за всю работу (5страниц!!!!). Если вы не увидели 5 страниц макетов в фигме- ПРОСЬБА не подавать заявку и не задавать глупых вопросов!!!
Шапку и подвал делать не нужно!!!!!! - они уже реализованы
Неадекватные автоматические ответы и ответы не по существу уходят в корзину!!!!
ВНИМАНИЕ!!!!
Дабы избежать лишней и никому не нужной траты времени на дополнительную переписку - ПРОСИМ ВСЕХ:
НЕОБХОДИМО ознакомиться не только с макетами (5 страниц,если что, для особо внимательных) , но и с вложенным файлом ТЗ!!!!
Обязательные требования:
- Git, доступ пришлем на почту после утверждения исполнителя
- БЭМ
category-card - блок
category-card__title – элемент
category-card__title--red – модификатор
Нужно строго соблюдать такой стиль именования классов.
Примерная структура классов для некоторых блоков будет описано ниже, отдельно для каждой страницы. Именование классов нужно обдумывать очень тщательно. Рекламный блок не должен называется news-cadr, даже если эти блоки абсолютно одинаковые, создаете новый уникальный компонент. Придумывать универсальные компоненты также не нужно, каждый компонент выполняет только свое прямое предназначение.
- Верстку нужно делать на существующий сборке проекта
Все работает через gulp, используется компонентный подход, в большинство случаев один компонент - это один бэм блок, но могут быть исключения
Пример структуры - http://joxi.ru/Q2Knw3wsL7W1Jm, менять настройки gulpпросто так нельзя, но можем обсудит, какой-то принципиальный позиции нет, кроме разметки, пишем на чистом html(без pug). Для стилей при необходимости можем добавить css препроцессоры.
- Поддержка браузеров, все современные, под IE не нужно делать
- JS
По jsработы будет мало, только подключение некоторых плагинов, плагины обсуждаем, более сложный функционал писать не нужно. Из текущих owl.carouselи fancybox. Пишем по возможности в es6
-Pixel perfect
Верстка должна соответствовать дизайн макетам, где-то на 95%, на каждый пикесль придираться естественно не будем, все в рамках разумного, и макетах также могут неточности, все обсуждаемо
1. Новости
Структура страницы:
.row
.col-2
.col-7
.col-3
Такая структура для всех подобных страниц, это именно база, а вообще использовать для внутренних блоков сетку не обязательно, если только идеально подходит.
Сайдбар меню:
.left-menu
.left-menu li
.left-menua
Опять про БЭМ, не обязательно использовать его в полную, для не которых моментов можно не писать классы для элементов
Карточка новостей:
.news-card
.news-card__img
.news-card__body
.news-card__section
.news-card__title
.news-card__props
.news-card__date
. news-card__comment-cnt – внутри отдельный мелкий компонент, которые можно потом использовать в других блоках
Пагинация:
.pagination
.pagination__item
2. Мнение эксперта
. expert-card
. expert-card__img
. expert-card__body
.expert-card__fio
.expert-card__post
.expert-card__title
.expert-card__desc
.expert-card__props
Детальная страница – это универсальная страница, там не нужно завязывать на эксперте, в сайдбаре только небольшой блок с данными эксперта.
Принцип думаю понятен, нужно так каждый блок и реализовать, чтобы все было четко.