Информация для веб-разработчиков
Для понимания работы проекта настоятельно рекомендуется для начала ознакомиться с остальными разделами документации, предназначенными для контент-девелоперов (а потому написанными соответствующим языком, но ценность информации от этого не уменьшается).
Используемые технологии
Сайт собирается на gulp-cooker, по ссылке можно ознакомиться с технологией сборки и использовать все её возможности и возможности стека её технологий.
Однако есть и ряд отличий от стандартной сборки:
- Продуктовая сборка не включает в себя W3C-валидацию HTML (по причине превышения лимита времени из-за числа страниц). Опыт показал, что валидатор AMP и
htmlhint
невалидный код не пропустят. - Настройки страниц находятся в их шаблонах (во избежание увеличения сборки на несколько тысяч файлов), поэтому каталог
/source/data/pages/
упразднён. - Разделение страниц на типы. В связи с этим в
configPage
(/gulpfile.js/tasks/html.js
) внесены соответствующие дополнения. - Настройки шаблона индивидуально зависят от данных отдельных страниц и данных различных типов, поэтому часть настроек вынесена в
/source/layouts/netbiblio/config.njk
. - Более сложные шаблоны, кастомные фильтры шаблонизатора (благодаря чему написание стандартной HTML-разметки сведено к миниммуму).
- Основное содержимое обёрнуто фильтром
typograph
, обрабатывающим висячие предлоги и пробелы вокруг тире. Кавычки и тире при этом контролируются контент-девелопером (вводятся им с клавиатуры черезAlt + код символа
). - Не используются спрайты, соответствующий функционал выпилен из настроек gulp.
Написание стилей
Содержимое страницы (соответствующее имитации листа бумаги) является БЭМ-блоком page
, поэтому глобальную стилизацию по тегам, если она необходима, следует назначать элементами этого блока.
Все «художественные» элементы, которые отображаются шрифтом с насечками, стилизованы как БЭМ-элементы блока art
, если необходимо их переиспользовать, следует миксовать этот блок с основным.
Внутри данного блока многие взаимоотношения элементов основаны на эффекте «выпадения» вертикальных внешних отступов, это следует учитывать при проектировании новых элементов и не писать больше соседних селекторов, чем требуется.
Прочая важная информация о CSS-классах находится в остальных разделах документации.
Универсальные переменные
Дополнение к соответствующему разделу контентной документации (чтобы не перегружать его теми переменными, которые вряд ли понадобятся при наполнении сайта).
Кроме того, узнать о некоторых переменных больше вы сможете из документации gulp-cooker.
isDev
— флаг режима разработки.isAmp
— индикатор выполнения задачи по сборке AMP-страницы (используется один и тот же шаблон для разных версий).minSuffix
— часть имени файлов стилей и скриптов для того, чтобы подключать обычную версию в режиме разработки и минифицированную — при сборке продакшн-версии (значение по умолчанию —.min
).