Шаблоны и инструкции

Стандарт вёрстки сайтов

  1. Все проекты верстаются на основе шаблона прототипов, лежащего в git boilerplate/wireframe, ветка master. Инструкция по работе с шаблоном лежит в файле README.md в корне проекта или по ссылке Инструкция по работе с прототипами сайтов в Cetera Labs.
  2. Все проекты верстаются с помощью Sass http://sass-lang.com/
  3. Все проекты верстаются с помощью Pug (ex-Jade): https://pugjs.org/.
  4. Все проекты верстаются с помощью фреймворка Foundation последней версии. Используем Sass-версию, она уже подключена в шаблон из boilerplate_wireframe. То есть подразумевается использование HTML-шаблонов Foundation: сетка, верхнее меню, формы, хлебные крошки и т.д.
  5. Ваш HTML-код должен быть буквально точной копией того, что изложено в документации Foundation. Отступления, разумеется, возможны, когда это продиктовано исключительной необходимостью, но у вас должна быть чёткая аргументация, почему вы сверстали форму не так, как в документации к Foundation. При этом аргументы «так было быстрее» или «мне так удобнее» рассматриваться не будут, а будут трактоваться как брак.
  6. Все проекты верстаются по БЭМ-методологии (без использования БЭМ-инструментария): http://ru.bem.info/.
  7. Все картинки кроме фотографий должны быть в SVG.
  8. Всю динамику делаем с помощью jQuery и плагинов к нему:
  9. При разработке мобильных версий используем jQuery Mobile http://jquerymobile.com/
  10. Адаптивность
    • Сайты верстаются неадаптивно только тогда, когда об этом явно просится в задаче;
    • Неадаптивные сайты верстаются так, чтобы в будущем была возможность доделать адаптивность;
    • Если в задаче не были предоставлены дополнительные макеты для разрешений экрана меньших 640 и 960 пикселей, то исполнитель может их запросить сам у дизайнера, и затем использовать их в работе;
    • В процессе верстки допускается совместное с дизайнером изменение дополнительных макетов для облегчения разработки.
  11. Заполняется реальными данными вся доступная мета-информация(favicon, open graph и т.д.)
  12. Правила складирования верстки
  13. Хорошие рекомендации по верстке в другой компании: http://glavweb.ru/ru/knowledge-base/standarty-html-verstki. Обязательно к прочтению всем верстающим.
  14. Обязательно наличие читабельной версии для печати для всех страниц
  15. Верстка должна быть в зеленой зоне по требованиям Pagespeed