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. Макеты верстаются постепенно: сначала мобильная версия, далее от мобильной версии к планшетной, а затем и к десктопной.
2.4. Готовить растровую и векторную графику для проекта не нужно, она будет добавлена в проект после вебинара «Препроцессоры CSS».
2.5. Графика повышенной плотности и адаптивная графика для страницы с графикой будет добавлена в проект после вебинара «Адаптивная и векторная графика»

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

3. Все макеты

3.1. Между версиями (мобильная, планшетная, десктопная) сетка может быть как резиновой, так и фиксированной.
3.2. При фиксированной сетке контентная область центрируется и не может быть уже макетной ширины.
3.3. Логотип на внутренних страницах — это ссылка на главную страницу.
3.4. Блок с главным меню в мобильной и планшетной версии открывается при нажатии на инонку «гамбургера», появляясь над шапкой сайта (в блоке слоёв фотошопа выделены красным цветом). При этом иконка «гамбургера» заменяется на иконку «креста».
3.5. При нажатии на иконку «креста» меню должно закрываться.
3.6. Реализация открытия/закрытия должна быть выполнена на JS и может быть сделана на любом этапе интенсива.
3.7. Все состояния элементов при наведении и нажатии указаны в макете pink-styleguide.psd

4. Главная

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

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

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

4.8. Блоки меняют размеры и расположение согласно макету.
4.9. В составе логотипа добавляются новые элементы.
4.10. Блок «Тарифы» располагается по центру страницы и не имеет элементов управления для переключения.
4.11. После карты добавляется блок подвал.

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

4.12. Блоки меняют размеры и расположение согласно макету.
4.13. В составе логотипа добавляются новые элементы.
4.14. Главное меню всегда открыто вне зависимости от его состояния на мобильной и планшетной версии.
4.15. В блоке «Отзывы» меняются элементы управления для переключения.

5. Форма

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

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

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

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

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

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

6. Страница с фотографиями пользователей

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

6.1. Все изображения являются ссылками на полноразмерный вариант (открытие полноразмерного изображения реализовывать не нужно).
6.2. Инструмент обработки изображений в блоке перед подвалом реализовывать не нужно, достаточно только вёрстки.
6.3. У каждого элемента обработки изображений есть свой «ползунок» для настройки, но в мобильной версии показывается только активный.
6.4. Кнопка «Запостить» отправляет форму с обработанным изображением на сайт (реализовывать не нужно).
6.5. Кнопка «Отмена» сбрасывает все настройки фильтров с исходное состояние (реализовывать не нужно).

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

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

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

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