(ВАЖНО!!!!!) - прежде чем откликаться на заявку
1) Проверка что ты не бот
При отклике на заявку начни сообщение с текста "JORDAN"
2) СВЕРСТАТЬ НЕОБХОДИМО 1к1 что бы дизайн смотрелся ровно в таком виде на любом разрешении.
С соблюдением всех параметров прописанных в исходниках.
Так же необходимо соблюдение сроков, верстальщик который набирает себе кучу проектов и ведет их параллельно не интересен. (фидбек простой, определяем срок сдачи главной страницы, если срок будет не выполнен, работу не принимаю, закрываю проект и отдаю другому)
Задача:
________________________________________________________________________
Необходимо сверстать сайт на wordpress в соответствии с готовым дизайном (все исходники Десктоп, и мобилка готовы)
1) Главная страница
2) 7 страниц лендингов (типовая страница одна, меняется только контент)
3) 1 страница - отдельного лендинга
4) 1 страница Новости, внутренняя информационная сама новость
5) Контакты
Итого: 5 уникальных страниц, 6 однотипных на базе 1 страницы
Имеется:
________________________________________________________________________
1) Дизайн десктопоной версии (исходники) - PSD, ВЕКТОР, SVG
2) Дизайн мобильной версии (исходники) - PSD, ВЕКТОР, SVG
3) Шрифты
4) Все параметры размеров, размещения блоков, отступы, интервалы, лайны, сетки
Ссылка на пробную верстку, от которой отказались: http://jordan.larioshin.site
Требования:
________________________________________________________________________
1) Верстка должна быть 1к1 в соответствии с дизайном (все размеры, и даные прописаны в исходниках)
2) CMS - Wordpress
3) Адапитвность (На всех разрешениях верстка должна соответствовать дизайну, соответственно все элементы,и слои, должны масштабироваться в соответствии с макетом дизайна.
ОБЩИЕ ПОЛОЖЕНИЯ
Верстка производится в соответствии со стандартами языка разметки HTML5 и CSS3.
Поддерживаемые браузеры:
- Internet Explorer – версия 9 и выше;
- Microsoft Edge – все версии;
- Google Chrome – версия 29 и выше;
- Yandex browser – версия 13 и выше;
- Opera – версия 15 и выше;
- Mozilla Firefox – версия 18 и выше;
- Safari – версия 7.1 и выше.
Поддерживаемые мобильные платформы (при условии использования по умолчанию предустановленных на устройствах браузеров):
- Apple iPhone 4;
- Apple iPad 2;
- мобильные устройства под управлением ОС Android версии 4.0 и выше;
- мобильные устройства под управлением ОС Windows Phone версии 8 и выше.
Общие базовые требования
- Единообразное написание и форматирование кода в HTML, CSS и JavaScript.
- Использование jQuery.
- Для резиновых макетов обязательно должна быть задана минимальная и максимальная ширина.
- Цвет фона для body задан всегда. Если конкретный цвет не указан в макете, используется белый (#fff).
- Если Javascript кода много — нужно его выносить в отдельный файл. Обработчики событий тоже лучше отделить и объявлять в отдельном файле.
- Недопустимы грубые ошибки в разметке (ссылки сделаны не тегом <a>, абзацы должны быть абзацами, а не <br><br>, формы должны быть только внутри тега <form>).
- Не рекомендуется использование !important без крайней необходимости.
- Нельзя использовать транслит в названиях классов, атрибутах и так далее.
- Нельзя строить сетку с помощью таблиц и позиционирования.
- Если фреймворк не используется, то использовать normalize.css или reset.css.
- Необходимо указать альтернативные варианты шрифта и тип семейства в конце перечисления.
Вёрстка проходит тест на переполнение контентом. Вёрстка не ломается:
- При добавлении в элементы большего количества текста.
- При использовании картинок с неподходящими размерами.
- Текст не должен выпадать из объектов.
- Переполнение контентными блоками не приводит к нарушению сетки.
ОБЩИЕ ТРЕБОВАНИЯ К ИМЕНОВАНИЮ КЛАССОВ
HTML разметка
Именование классов
Схема именования:
- .block
- .block-mod-value
- .block-element
- .block-element-mod-value
Использование префиксов
Для именования классов и идентификаторов используются следующие префиксы:
- применяемые в фреймворках;
- обозначающие разметку HTML;
- обозначающие визуальное оформление элементов.
Семантика именования блоков
Названия блоков и элементов определяются как их функциональному назначению так и визуальному отображению.
Блоки одинакового отображения, но различного функционала оформляются как один блок с нейтральным названием, отражающим их сходство.
Применение каскада
Каскад стилей должен быть сведен к минимуму. Он допускается, в частности, в случае, когда необходимо оформить контент, редактируемый в WYSIWYG-редакторе; этот контент по возможности должен не содержать классов.
ТРЕБОВАНИЯ К СТИЛЯМ
Базовый CSS
Нормализация стилей осуществляется встроенными средствами используемого фреймворка.
Форматирование стилей
- Каждое свойство — на отдельной строке.
- Каждый селектор — на отдельной строке.
- Используйте сокращённые CSS-свойства, где это только возможно.
- Используйте максимально короткие ID и class имена, но не в ущерб информативности.
- Избегайте совмещения элементов с ID и class именами.
- Свойство без префикса пишется последним.
- Использование символа точки c запятой (;) в конце описания всех CSS-свойств обязательно.
Расположение по файлам
Стили, принадлежащие одному блоку, должны следовать друг за другом: сначала блок, потом его модификаторы (также переопределения для конкретных браузеров, для отключенного JS и т.п.), затем элементы и их модификаторы.
Стили для конкретных браузеров задаются с помощью классов, правила которых должны следовать непосредственно за оригинальным правилом.
Использование CSS-препроцессоров
- Поощряется использование CSS-препроцессора LESS.
- Каждый класс или идентификатор должен являться отдельным определением за исключением состояний, псевдоэлементов, медиа-запросов и т.п.
- Следует использовать переменные, миксины, функции.
- При использовании less правила организации файлов такие же, как и для обычного css.
- Общие используемые переменные и миксины должны быть вынесены в отдельные файлы и подключаться по мере необходимости.
- Переменные для одного блока должны объявляться непосредственно перед ним.
- Переменные и миксины должны быть названы в формате @header-height: 80px; .inline-block() {}
- Подключение стилей на сайт должно осуществляться через один less-файл.
ТРЕБОВАНИЯ К ИЗОБРАЖЕНИЯМ
Форматы используемых изображений (перечислено в порядке уменьшения приоритета использования):
- для логотипов: SVG, PNG;
- для визуального оформления: SVG, PNG;
- контентные изображения: JPEG, PNG.
Для контентных изображений используется размер, не превышающий по своей по ширине ширину полосы основного контента веб-страницы.
Для галерей изображений используется препроцессор подготовки миниатюр изображений предустановленного размера, без потери качества относительно исходного изображения.
Для изображений в формате JPEG используется однородная степень сжатия, не менее 75%.
