375(33)640-98-68
375(29)935-83-38

ОБЩИЕ ТРЕБОВАНИЯ

1.   Общие требования

  • Адаптивная верстка типовых страниц интернет-ресурса в формате языка гипертекстовой разметки (HTML), включая каскадные таблицы стилей (CSS) и базовый функционал манипуляций объектной модели документа (DOM) средствами JavaScript (JS).
  • Все текстовые элементы макетов должны верстаться текстом, за исключением случаев, где подобная реализация невозможна технически
  • Все изменения :hover состояний, и :focus эффекты полей вида input сопровождаются микро анимациями и transition эффектами

2.   Поддержка браузеров

  • HTML-шаблон должен корректно отображаться в следующих версиях браузеров
  • Internet Explorer версии 10 и выше, платформа — операционные системы семейства Windows; 
  • Mozilla Firefox версии 28 и выше — Windows версии XP и выше и Mac OS X версии 10.8 и выше;  
  • Safari версии 6.1 и выше — Mac OS X версии 10.8 и выше; 
  • Google Chrome версии 21 и выше — Windows версии XP и выше и Mac OS X версии 10.8 и выше; 
  • Opera версии 15 и выше — Windows версии XP и выше и Mac OS X версии 10.8 и выше;  
  • Браузеры мобильных устройств iOS 7 и выше
  • Браузеры мобильных устройств Android 5 и выше, за исключением UC Browser 

3.   Стиль программирования

  • Табуляция кода через двойной пробел. Можно использовать плагины в котором tab превращается в двойной пробел (так, например, делает редактор atom по умолчанию). Требование связано с единостью стиля чтобы компиляция не падала на ошибках вложенности.
  • Желательно комментирование крупных смысловых блоков в целях читаемости
  • Верстка может быть невалидной по валидатору W3C
  • Осмысленное наименование классов по BEM методологии (классический стиль block__element--modifier). 

4.   Адаптивность 

  • Под адаптивной версткой подразумевается отзывчивая (англ. - “responsive”) верстка, при которой содержимое страницы подстраивается под фактические размеры окна браузера, без рывков по ширине глобальных контейнеров на ключевых точках (“брейкпойнтах”). Другими словами, глобальные контейнеры всегда должны быть 100% ширины.
  • При размерах более 320px не должно возникать горизонтальной прокрутки страницы (за исключением отдельных блоков верстки, где подобная реализация предусмотрена дизайн-макетами). 
  • Допускается использование desktop first методов в подходе
  • Ключевыми “брейкпойнтами” принято считать - 1920(hd+), 1440 (hd), 1200px (wide), 992px (desktop), 768px (tablet), 568px(mobile), 414px(mobile-s). Применяются для адекватного, пропорционального изменение отступов и размеров шрифтов. Либо, при наличии макетов мобильной версии, соответствии таковым
  • Допускается использование других брейкпойнтов при необходимости с произвольным интервалом @media выражений

5.   Каскадные стили таблиц (CSS)

  • Для создания CSS должны использоваться пре/пост процессоры. В порядке приоритетности, исполнитель в праве выбрать: sass, postcss, less, stylus
  • Крайне желательно использование  “сахарного” синтаксиса, без ; и {} (прим. sass против scss). Либо исполнитель может разрабатывать промежуточные версии в scss синтаксисе и конвертировать в sass при готовности компонента
  • Обязательное использование autoprefixer и flexbugs. При желании любые другие postcss плагины
  • Недопустимо использование миксинов (@include) и экстендов(@extend) в целях общего понимания происходящего, пожалуйста без головоломок. Разработчики которые будут поддерживать проект не поймут что вы имеете ввиду под +cr, +bf, +padb, +flexjcsb
  • Нельзя использовать вендорные префиксы в препроцессорах которые могут быть добавлены автопрефиксером. Исключениями могут быть -webkit-appearance, -webkit-overflow-scrolling и прочие подобные
  • Предпочтительно использование собственной сетки на базе flexbox. В отдельных случаях допускается bootstrap 4 (обсуждается отдельно)
  • Не рекомендуется использование !important без крайней необходимости. Исключениями могут быть перебивание стилей от вендорных библиотек (например, .slick-slide - display: flex !important }

6.   Плагины

  • Предпочтительно, но не обязательно, использование следующих js/css плагинов (в случае необходимости использования их функционала)
  • Карусели - slick, swiper (поддержка flex и очень гибкая настройка), owl.carousel
  • Модальные окна - magnific popup, fancybox
  • Валидация форм - jQuery Validate Plugin.
  • Валидация “маской” (прим. - поля ввода телефон) - jQuery Mask Plugin
  • svg4everybody (поддережка svg для IE10), viewport-units-buggyfill (фикс для вьюпорта мобильных устройств с учетом адрес-бара. особенно актуально для iOS)
  • scrollMonitor.js - в сборке настроено для эмуляции wow.js, только с гибкой настройкой и задержкой выполнения события. либо AOS
  • rellax.js - для parallax анимаций (плавность за счет использования requestAnimationFrame)
  • Lazy загрузка изображений, тоже опционально


7.  Javascript

  • Функции должны группироваться смысловыми блоками (прим. сначала - общие функции, затем все карусели, затем все модальные окна и так далее). Простое дописывание кода в конец файла в ходе верстки крайне не рекомендуется
  • При использовании ES6 синтаксиса, обязательна компиляция через babel в пределах /src
  • Хорошей практикой считается использование в JS байдингах атрибутов либо классов с префиксом js- . В наименовании использовать синтаксис camelCase. Необходимо для разграничения разметки, чтобы при интеграции разработчику было понятно в каких элементов привязан функционал. Например _document.on (‘click’, ‘[js-openTab]’, func.. ).
  • Классы на изменения состояния должны быть с префиксами .is-. Например, .is-opened, .is-active, .is-hovered и т.д. Но не модификаторами --active
  • Кеширование jQuery объектов если используется более 2х раз внутри функции
  • Округление рассчитываемых css значений через Math.floor() или Math.round (трансформы, размеры, марджины и т.д)

8.   Иконки и маленькие изображения

  • Первый приоритет - использование svg спрайтов. 
  • Второй приоритет - png спрайты через элемент <i>, <span>
  • Третий приоритет - html теги img 

9.   Изображения

  • Все изображения должны быть оптимизированы в целях уменьшения суммарного веса картинок. 
  • При использовании inline png в css, картинка должна быть оптимизирована до перевода в base64
  • Обязательно использование srcset параметров в случае если макеты позволяют экспортировать изображения в большем размере для 2x экранов с высокой плотностью пикселей src=’img/name.png srcset=’img/name@2x.png 2x
  • Непрозрачные картинки необходимо экспортировать в .jpg в целях экономии размера файла

10. Шрифты

  • Шрифты, доступные через сервис google fonts должны подключаться с CDN google.fonts
  • В случае, если шрифты не находятся в бесплатном публичном доступе, исполнитель имеет право:
  • Запросить шрифт у заказчика
  • Использовать любой другой шрифт на свое усмотрение
  • Используются колбеки типа шрифтов sans-serif, serif, monospace и т.д.
  • Шрифты необходимо подключать в форматах  eot, svg, ttf, woff, woff2. Используйте https://transfonter.org 
  • При подключении шрифтов одного семейства, перепишите font-weight в @font-face правиле чтобы в css можно было управлять жирностью и стилем через font-weight: 300 вместо font-family: ‘SuperFont-Light’, sans-serif

11.  Верстка элементов

  • Верстка должна проходить тесты на переполнения и незаполнения. То есть также быть отзывчивой по высоте элементов. В большинстве случаев недопустимы фиксированные значения height. Используйте min-height вместо него, чтобы при наличии больших текстовых блоков текст не вылезал из блоков или обрезался
  • Приоритетом динамичного изменения DOM являются css методы реализации. Например добавление класса .is-active с opacity: 0 -> opacity: 1 вместо .hide() и .show()
  • Используйте pointer-events: none для объектов скрытых подобным образом чтобы не было ghost кликов по невидимкам

   
12. Базовый функционал

  • Под базовым функционал манипуляций объектной модели документа (DOM) средствами JavaScript (JS) принять следующий перечень функций:
  • Тогглеры состояний. 
  • Открытие панелей мобильного меню по иконке-гамбургеру
  • Показ/скрытие любых элементов, предусмотренных и отрисованных в макете
  • Поля вида input могут иметь маски ввода, например телефон может иметь маску +375 00 000-00-00
  • Валидация форм на базовые параметры (email, телефон, заполненность имя)
  • Интеграция API решений заказчика и реальный функционал готового сайта не входит в понятие базового функционала верстки и обсуждается отдельно.


 


Мы не пытаемся кричать что мы лучшие, просто делаем работу которая нравится.

X

КОНТАКТЫ:

+375(33)640-98-68

+375(29)935-83-38