Specification.md

Техническое задание на вёрстку

• Название сайта: Мишка
• Домен: пока нет

---

1. Общие технические требования

1.1. Сетка: определена в макете.
1.2. Адаптивность сетки: мобильная, планшетная, десктопная версии («фикс» или «резина»).
1.3. Адаптивность графики: ретинизация, векторные изображения.
1.4. Используемые методологии: БЭМ.
1.5. Используемые препроцессоры: LESS, Sass, PreCSS (набор плагинов для PostCSS).
1.6. Используемые инструменты автоматизации: Grunt или Gulp.
1.7. Используемые фреймворки: нет.
1.8. Кроссбраузерность: Chrome, Firefox, Opera, Safari, Edge и IE11.
1.9. Типографика: частично определена в макете (прочее — на усмотрение разработчика).
1.10. Используемые шрифты: Open Sans.

2. Пояснения для учащихся

2.1. Обязательными к вёрстке являются все 3 страницы (главная страница, страница с формой, страница каталога).
2.2. Макеты верстаются постепенно: сначала мобильная версия, далее от мобильной версии к планшетной, а затем и к десктопной.
2.3. Готовить растровую и векторную графику для проекта не нужно, она будет добавлена в проект после вебинара «Препроцессоры CSS».
2.4. Графика повышенной плотности и адаптивная графика для страницы с графикой будет добавлена в проект после вебинара «Адаптивная и векторная графика»

Пожелания к поведению блоков

3. Все макеты

3.1. Между версиями (мобильная, планшетная, десктопная) сетка может быть как резиновой, так и фиксированной.
3.2. При фиксированной сетке контентная область центрируется и не может быть уже макетной ширины.
3.3. Логотип на внутренних страницах — это ссылка на главную страницу.
3.4. Графика в виде волнистых линий должна тянуться на всю ширину экрана.
3.5. Блок с главным меню в мобильной версии открывается при нажатии на инонку «гамбургера», появляясь над шапкой сайта (в блоке слоёв фотошопа выделены красным цветом). При этом иконка «гамбургера» заменяется на иконку «креста». Реализация по желанию.
3.6. При нажатии на иконку «креста» меню должно закрываться. Реализация по желанию.
3.7. Реализация открытия/закрытия должна быть выполнена на JS и может быть сделана на любом этапе интенсива. Реализация по желанию.
3.8. Все состояния элементов при наведении и нажатии указаны в макете mishka-styleguide.psd
3.9. Логотип Академии и ссылка `HTML Academy` в футере ведут на [лендинг интенсива «Продвинутый HTML и CSS»](https://htmlacademy.ru/intensive/adaptive).

4. Главная

Мобильная версия (mishka-index-mobile.psd):

4.1. Логотип состоит только из названия магазина «Мишка».
4.2. В блоках «Предметы интерьера» и «Детские игрушки» ссылкой должен быть не текст, а весь блок. При нажатии должен осуществляться переход на соответствующие разделы каталога (страницы разделов реализовывать не нужно).
4.3. Кнопка заказа товара недели должна вызывать появление модального окна.
4.4. Блок «Отзывы»: пролистывание отзывов реализовывать не обязательно. Достаточной реализацией будут свёрстанный 1 отзыв и кнопки переключения отзывов.
4.5. Кнопка в блоке «Отзывы» должна вести на страницу добавления отзыва (страницу добавления отзыва реализовывать не нужно).
4.6. Блок карты: необходимая реализация — интерактивная карта (карты Google или Яндекса), ширина подстраивается под ширину вьюпорта (но не уже контентной ширины макета), на карте размещён маркер (может быть как кастомным, так и дефолтным), центр карты соответствует центру блока в макете.
4.7. Кнопка «Напишите нам» должна вести на страницу с формой обратной связи (страницу с формой обратной реализовывать не нужно).

Планшетная версия (mishka-index-tablet.psd):

4.8. Блоки меняют размеры и расположение согласно макету.
4.9. В составе логотипа добавляются новые элементы.
4.10. Главное меню всегда открыто вне зависимости от его состояния на мобильной версии.

Десктопная версия (mishka-index-desktop.psd):

4.11. Блоки меняют размеры и расположение согласно макету.
4.12. В составе логотипа добавляются новые элементы.

5. Форма

5.1. На странице `mishka-form-*.psd` не должно быть модального окна.

Мобильная версия (mishka-form-mobile.psd):

5.2. Должны быть реализованы кастомные элементы форм.
5.3. Поля для ввода телефона и почты должны быть сделаны с верным типом для удобного заполнения с телефона.

Планшетная версия (mishka-form-tablet.psd):

5.4. Блоки меняют размеры и расположение согласно макету.

Десктопная версия (mishka-form-desktop.psd):

5.5. Блоки меняют размеры и расположение согласно макету.

6. Страница каталога

Мобильная версия (mishka-catalog-mobile.psd):

6.1. Изображение и название товара являются ссылками на страницу с подробным описанием товара (страницу с подробным описанием товара реализовывать не нужно).
6.2. Иконка корзины должна вызывать появление модального окна.
6.3. В блоке видеоплеера «Процесс производства» необходимо реализовать контейнер для плеера с видеозаписью (скрипт видеоплеера на страницу добавлять не нужно, достаточно добавить только изображение из макета).

Планшетная версия (mishka-catalog-tablet.psd):

6.4. Блоки меняют размеры и расположение согласно макету.

Десктопная версия (mishka-catalog-desktop.psd):

6.5. Блоки меняют размеры и расположение согласно макету.