Адаптивная верстка по BEM

HTML-версткаЗавершен5 заявок335 просмотров
Найдите исполнителя для вашего проекта прямо сейчас!
Разместите заказ на фриланс-бирже и предложения поступят уже через несколько минут.

Здравствуйте!

Требуется сверстать шаблон, 7 страниц. На JS нужно сделать только декоративные элементы (меню, попапы, прокрутки и т.д). Шапка должна прилипать к экрану сверху, только при прокрутке страницы наверх: http://alexeybychkov.com/blog/answers/fix-header/ (см. самый последний пример).

Технические требования:

1.    Именование классов по БЭМ (в качестве разделителя элементов "__",в качестве разделителя модификаторов "--").

2.    Принцип вёрстки – MobileFirst. Если вкратце –сначала верстаем для телефонов, затем, для устройств с большим размером экрана,

используя mediaqueryв одном и том же файле логического блока(см. пример)

3.    При адаптивной верстке запрещается дублирование html-кода. К примеру, вы создали плашку для телефонов и создали плашку для ПК ив зависимости от экрана телефона или ПК скрываете или показываете нужную

плашку. Так делать категорически нельзя – получается дублирование контента.

Нужно сделать одну плашку, которая будет правильно отображается на телефонах и

на ПК.

4.    Все логические блоки разложены по отдельным SASS-файлам (на продакшене собираются в один CSS-файл).

5.    JS-файлы разложены по отдельным файлам (на продакшене собираются в один).

6.    PageInsights должен быть в "зелёной зоне".https://developers.google.com/speed/pagespeed/insights/?hl=ru

7.    Правильное использование HTML5-тегов там, где они уместны.

8.    Код должен быть валиден по валидатору: https://validator.w3.org/

9.    Без использования Bootstrapи пр. внешних библиотек – чем меньше объём CSS -кода, тем лучше. Но если очень уж хочется – пишите, обсудим.Исключение – JS, тут можно использовать jQueryи пр.

10. Для подключения внешних библиотек используйте Bower.

11.  Для кнопок, ссылок и пр. используйте миксины,чтобы в будущем можно было легко и просто поменять цвет или добавить новый (см.

пример).

12. Обязательно используйте глобальные переменные, которые задают цвета, размеры и прочие вещи,

которые повторяются в коде.

13. В качестве сборщика использоватьGulp.

14. Структура файлов должна быть похожа на ту, что на скриншоте.

 

Превью файлов можно посмотреть здесь:  https://yadi.sk/d/ydIsXdTQrhFBzw

PSD-исходники имеются.

В заявках указывайте цену, сроки и примеры вашего кода.

JavascriptHTMLCSSSASS
6 лет назад
pendalf89
Борис 
34 годаРоссия
10 лет в сервисе
Был
2 года назад
Выбранный исполнитель
Kind-Of-Heaven
Кирилл 
24 годаРоссия
8 лет в сервисе
Был
4 года назад
6 лет назад
$380
14 дней
WMZ
Великолепное качество работы, оперативное внесение правок и скорость исполнения! Очень доволен Андреем, во время исполнения заказа он был постоянно на связи и оперативно реагировал на правки. Однозначно рекомендую к сотрудничеству!
Замечательный заказчик! Полностью доволен сотрудничеством, однозначно рекомендую и надеюсь еще поработаем! Спасибо большое за проект