Заказчик

По срокам – демократично, укажите ваши
Макет – сейчас превью, заинтересовавшему вышлю оригинал для оценки

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

Необходимо выполнить адаптивную верстку макета главной страницы сайта. Psd макеты прилагаются – в 3 вариантах:
• основной,
• для планшетов,
• мобильный.

Общее
Необходима верстка безотносительно к CMS или к фреймворку, натяжка на фремворк будет выполнена программистом, поэтому только HTML + CSS + JS (CSS и JS в отдельных файлах)
Кодировка файлов utf-8 без BOM

Приемлемое отображение и доступность всех функциональных элементов при отключении пользователем JavaScript и/или картинок, а также при увеличении/уменьшении шрифта (в том числе не блокировать изменение шрифта).
Вёрстка должна проходить тест на переполнение контентом. Вёрстка не должна ломаться:
• При добавлении в элементы большего количества текста.
• При использовании картинок с неподходящими размерами.
Текст не должен выпадать из объектов.
Переполнение контентными блоками не приводит к нарушению сетки.

Из повторяющихся однообразных участков кода в блокe достаточно сверстать только первый и размножить его для проверки корректного заполнения контейнера.

Все текстовые элементы макетов должны верстаться текстом, за исключением случаев, где подобная реализация невозможна технически.

Кроссбраузерность
Одинаковое отображение дизайна в наиболее распространенных браузерах, вёрстка должна корректно отображаться. Горизонтальная прокрутка не должна быть ни в одной из версий сайта, ни в одном браузере. Сайт должен нормально работать в IE11. FF, Opera, Safari, Chrome – 2 последние версии этих браузеров на текущий момент (в том числе мобильных).


Соответствие макету
Верстка должна соответствовать макетам. При этом верстка не выполняется методом Pixel Perfect. При накладке допустимы незначительные различия.


Требования к коду вообще
Использовать новые стандарты HTML5/CSS3.
Чистый, валидный код HTML5 и CSS3.
Код должен быть семантически корректным.
При выборе между средствами javascript и чистыми HTML5/CSS3 предпочтение должно отдаваться последним.
Использование хаков крайне нежелательно, но допустимо.
Все файлы кодируются в кодировке UTF-8 без BOM.


HTML
Для разметки используются теги HTML5.
Форматирование HTML иерархическое. Иерархию кода нужно выделять табуляцией.
Используется блочная верстка.
Структурный, комментируемый код (обозначается начало/конец крупных блоков).
Отбивка табами.
Семантическая разметка на уровне грамотного использования тегов.
Имена классов и идентификаторов – осмысленные.
Нельзя использовать транслит в названиях классов, атрибутах и так далее.
Нельзя строить сетку с помощью таблиц и позиционирования.

CSS
Все стили должны быть прописаны во внешних файлах.
Адаптивность на фрейморке bootstrap.
Используется именование классов по БЭМ.
Комментирование css необязательно.
Иерархию кода нужно выделять табуляцией и пустыми строками.
Не использовать !important без крайней необходимости.
Допускается использование вендорных префиксов.
Стили для IE7-8 вынесены в отдельные CSS.
IE7-8 для реализации не поддерживаемых CSS свойство допустимо использование Javascript и expression.

JS
Скрипт в отдельном файле.
Использовать jQuery последней на данный момент версии.

Разьяснения по макету

Там, где текст на макете – должно быть текстом (не рисунок).

Шрифт должен быть соблюден

"Сейчас слушают на сайте" (карусель популярное) – должна быть каруселью (легковесный jQuery плагин на выбор верстальщика).

Элементы в блоке "Популярное" (слое) – кликабельны как сами большие элементы ("записи") – 1) квадраты, так и отдельно – 2) аватары пользователей на них, вместе с именем пользователя – 1) и 2) это разные ссылки. Кнопка "показать все" – открывает полный список скрытых элементов (добавить пару линий элементов).

Элементы "Записи" (квадраты в блоке "Популярное") со своим содержимым должны быть сверстаны таким образом, чтобы их можно было повторно использовать на других страницах сайта, подключив данный CSS и поместив данную разметку в другие контейнеры.

Плейер внизу (он ничего не должен проигрывать, это разметка) – должно работать изменение позиции воспроизведения при нажатии на полосу в любом месте или при перетаскивании бегунка (т.е. надо визуально передвинуть бегунок). Плейер должно быть легко скрывать и отображать программисту, просто установив нужную видимость блока плейера (т.е. на остальную разметку это не должно влиять).

Плейер всегда прикреплен к нижней части окна браузера (при прокрутке).