Привел в порядок блоки, папки, описание. Выпилил ненужное.

README.md

@@ -40,10 +40,6 @@
       <td><code>npm run test:style</code></td>
       <td>Проверка стилевой составляющей проекта <a href="https://stylelint.io/">stylelint</a></td>
     </tr>
-    <tr>
-      <td><code>npm run test:orpho</code></td>
-      <td>Поиск ошибок и опечаток в <code>.html</code> и <code>.md</code> файлах в <code>./src</code> с помощью <a href="https://github.com/hcodes/yaspeller">yaspeller</a></td>
-    </tr>
   </tbody>
 </table>
 
@@ -56,21 +52,23 @@
 ## Парадигма
 
 - Используется именование классов, файлов и переменных по БЭМ.
-- Список использованных в проекте БЭМ-блоков и доп. файлов указан в `./projectConfig.json`.
-- Каждый БЭМ-блок в своей папке внутри `./src/blocks/` (стили, js, картинки, разметка; обязателен только стилевой файл).
+- Список использованных в проекте БЭМ-блоков и доп. файлов указан в `./projectConfig.json`. Это главный конфигурационный файл проекта.
+- Каждый БЭМ-блок в своей папке внутри `./src/blocks/` (.scss, и .pug файлы обязательны).
 - Есть глобальные файлы: стилевые, js, шрифты, картинки.
-- Диспетчер подключения стилей `./src/scss/style.scss` генерируется автоматически при старте любой gulp-задачи.
-- Для разметки можно использовать [микрошаблонизацию](https://www.npmjs.com/package/gulp-file-include). А можно и не использовать.
+- Диспетчер подключения стилей `./src/scss/style.scss` генерируется автоматически при старте любой gulp-задачи (на основе данных из `./projectConfig.json`).
+- Список pug-примесей `./src/pug/mixins.pug` генерируется автоматически при старте любой gulp-задачи (на основе данных из `./projectConfig.json`).
+- Для разметки используется [pug](https://pugjs.org/api/getting-started.html).
 - Перед созданием коммита запускается проверка стилевых файлов, входящих в коммит.
 
 
 
-## ЧАВО
+## Разметка
+
+Используется [pug](https://pugjs.org/api/getting-started.html). HTML никак не обрабатывается.
 
-- [Как правильно организовать сборку целой страницы](https://github.com/nicothin/NTH-start-project/issues/12)
-- [Как добавлять плагины jQuery](https://github.com/nicothin/NTH-start-project/issues/22)
+По умолчанию используются [наследование шаблонов](https://pugjs.org/language/inheritance.html) — все страницы (см. `src/index.pug`) являются расширениями шаблонов, в страницах описывается только содержимое «шапки», «подвала» и контентной области посредством [блоков](https://pugjs.org/language/inheritance.html#block-append-prepend).
 
-Есть вопрос — задайте его в [issues](https://github.com/nicothin/NTH-start-project/issues).
+К.О. подсказывает, что если какие-то области («подвал»?) одинаковы на всех страницах, то их стоит писать в файле шаблона, а не в файлах страниц.
 
 
 
@@ -88,39 +86,41 @@
 6. [postcss-object-fit-images](https://github.com/ronik-design/postcss-object-fit-images) (в паре с [полифилом](https://github.com/bfred-it/object-fit-images))
 7. [postcss-image-inliner](https://www.npmjs.com/package/postcss-image-inliner)
 
-Для [postcss-image-inliner](https://www.npmjs.com/package/postcss-image-inliner) указано ограничение на размер файла в 10 Кб, файлы ищутся в `src/blocks/**/img_to_bg/`. Чтобы избежать конфликтов имен, добавляйте к именам изображений префикс (имя блока), например: `src/blocks/mega-block/img_to_bg/mega-block__avatar.png`
+Для [postcss-image-inliner](https://www.npmjs.com/package/postcss-image-inliner) указано ограничение на размер файла в 5 Кб, файлы ищутся в `src/blocks/**/bg-img/`. Чтобы избежать конфликтов имен, добавляйте к именам изображений префикс (имя блока), например: `src/blocks/mega-block/bg-img/mega-block__avatar.png`
 
 
 
 ## Блоки
 
-Каждый блок лежит в `./src/blocks/` в своей папке. Каждый блок — как минимум, папка и одноимённый scss-файл.
+Каждый блок лежит в `./src/blocks/` в своей папке. Каждый блок — как минимум, папка и одноимённые scss- и pug-файл.
 
 Возможное содержимое блока:
 
 ```bash
 demo-block/               # Папка блока
   img/                    # Изображения, используемые блоком и обрабатываемые автоматикой сборки
-  some-folder/            # Какая-то сторонняя папка, не обрабатываемая автоматикой
-  demo-block.scss         # Стилевой файл блока
-  demo-block--mod.scss    # Отдельный стилевой файл БЭМ-модификатора блока
+  bg-img/                 # Изображения для использования в стилях (не обрабатываются автоматикой сборки)
+  demo-block.pug          # **Обязательный**. Разметка (pug-примесь, отдающая разметку блока, описание API примеси)
+  demo-block.scss         # **Обязательный**. Стилевой файл блока
   demo-block.js           # js-файл блока
+  demo-block--mod.scss    # Отдельный стилевой файл БЭМ-модификатора блока
   demo-block--mod.js      # js-файл для отдельного БЭМ-модификатора блока
-  demo-block.html         # Варианты разметки (как документация блока или как вставляемый микрошаблонизатором фрагмент)
-  readme.md               # Какое-то пояснение
+  readme.md               # Описание для документации, подсказки
 ```
 
 
 
 ## Подключение блоков
 
-Список используемых блоков и дополнительных подключаемых файлов указан в `./projectConfig.json`. Список файлов и папок, взятых в обработку можно увидеть в терминале, если раскомментировать строку `console.log(lists);` в `gulpfile.js`.
+Список используемых блоков и доп. файлов указан в `./projectConfig.json`. Список файлов и папок, взятых в обработку можно увидеть в терминале, если раскомментировать строку `console.log(lists);` в `gulpfile.js`.
+
+**ВНИМАНИЕ!** `./projectConfig.json` — это JSON. Это строгий синтаксис, у последнего элемента в любом контексте не должно быть запятой в конце строки.
 
 ### `blocks`
 
 Объект с блоками, используемыми на проекте. Каждый блок — отдельная папка с файлами, по умолчанию лежат в `./src/blocks/`.
 
-Каждое подключение блока — массив, который можно оставить пустым или указать файлы элементов или модификаторов, если они написаны в виде отдельных файлов. В обоих случаях в обработку будут взяты одноименные стилевые файлы, js-файлы и картинки из папки `img/` блока.
+Каждое подключение блока — массив, который можно оставить пустым или указать файлы элементов или модификаторов, если они написаны в виде отдельных файлов. В обоих случаях в обработку будут взяты одноименные стилевые файлы, pug-файл, js-файлы и картинки из папки `img/` блока.
 
 Пример, подключающий 3 блока:
 
@@ -213,9 +213,7 @@ demo-block/               # Папка блока
 
 Массив js-файлов, которые копируются в папку сборки, подпапку `js/`
 
-**ВНИМАНИЕ!** Это JSON. Это строгий синтаксис, у последнего элемента в любом контексте не должно быть запятой в конце строки.
-
-### Пример секции в `./projectConfig.json`
+### Пример `./projectConfig.json`
 
 ```json
 {
@@ -275,6 +273,9 @@ img:
  [ './src/img/*.{jpg,jpeg,gif,png,svg}',
    './src/blocks/page-header/img/*.{jpg,jpeg,gif,png,svg}',
    './src/blocks/page-footer/img/*.{jpg,jpeg,gif,png,svg}' ]
+pug:
+ [ './src/blocks/page-header/page-header.pug',
+   './src/blocks/page-footer/page-footer.pug' ]
 ```
 
 
@@ -285,8 +286,7 @@ img:
 
 ```bash
 # формат: node createBlock.js ИМЯБЛОКА [доп. расширения через пробел]
-node createBlock.js block-1 # создаст папку блока, block-1.html, block-1.scss и подпапку img/ для этого блока
-node createBlock.js block-2 js pug # создаст папку блока, block-2.html, block-2.scss, block-2.js, block-2.pug и подпапку img/ для этого блока
+node createBlock.js block-test # создаст папку блока, block-test.pug, block-test.scss, подпапки img/ и bg-img/ для этого блока
 ```
 
 Если блок уже существует, файлы не будут затёрты, но создадутся те файлы, которые ещё не существуют.
@@ -298,19 +298,13 @@ node createBlock.js block-2 js pug # создаст папку блока, block
 ```bash
 build/          # Папка сборки, здесь работает сервер автообновлений.
 src/            # Исходные файлы
-  _include/     # - фрагменты html для вставки на страницы
   blocks/       # - блоки проекта
   css/          # - можно положить добавочные css-файлы (нужно подключить в copiedCss, иначе игнорируются)
   fonts/        # - можно положить шрифты проекта (будут автоматически скопированы в папку сборки)
   img/          # - можно положить добавочные картинки (нужно подключить в addImages, иначе игнорируются)
   js/           # - можно положить добавочные js-файлы (нужно подключить в addJsBefore, addJsAfter или copiedJs, иначе игнорируются)
-  scss/         # - стили (style.scss скомпилируется, прочие нужно подключить в addCssBefore, addCssAfter или singleCompiled, иначе они будут проигнорированы)
-  index.html    # - главная страница проекта
-  blocks-demo.html # - библиотека блоков
+  pug/          # - примеси, шаблоны pug
+  scss/         # - стили (файл style.scss скомпилируется, прочие нужно подключить в addCssBefore, addCssAfter или singleCompiled, иначе они будут проигнорированы)
+  index.pug     # - главная страница проекта
+  blocks-demo.pug # - библиотека блоков
 ```
-
-
-
-## Комментирование для разработчиков
-
-Для html-файлов можно использовать комментарии вида `<!--DEV Комментарий -->` — такие комментарии не попадут в собранный html.

createBlock.js

@@ -72,7 +72,7 @@ if (blockName) {
 
         // Если это pug
         else if (extension === 'pug') {
-          fileContent = `//- Все примеси в этом файле должны начинаться c имени блока (${blockName})\n\nmixin ${blockName}(text, mods)\n\n  //- Принимает:\n  //-   text    {string} - текст\n  //-   mods    {string} - список модификаторов\n  //- Вызов:\n        +${blockName}('Текст', 'some-mod')\n\n  -\n    // список модификаторов\n    var allMods = '';\n    if(typeof(mods) !== 'undefined' && mods) {\n      var modsList = mods.split(',');\n      for (var i = 0; i < modsList.length; i++) {\n        allMods = allMods + ' ${blockName}--' + modsList[i].trim();\n      }\n    }\n\n  .${blockName}(class=allMods)&attributes(attributes)\n    div!= text`;
+          fileContent = `//- Все примеси в этом файле должны начинаться c имени блока (${blockName})\n\nmixin ${blockName}(text, mods)\n\n  //- Принимает:\n  //-   text    {string} - текст\n  //-   mods    {string} - список модификаторов\n  //- Вызов:\n        +${blockName}('Текст', 'some-mod')\n\n  -\n    // список модификаторов\n    var allMods = '';\n    if(typeof(mods) !== 'undefined' && mods) {\n      var modsList = mods.split(',');\n      for (var i = 0; i < modsList.length; i++) {\n        allMods = allMods + ' ${blockName}--' + modsList[i].trim();\n      }\n    }\n\n  .${blockName}(class=allMods)&attributes(attributes)\n    .${blockName}__inner!= text`;
         }
 
         // Если нужна подпапка для картинок

gulpfile.js

@@ -45,6 +45,13 @@ lists.css.forEach(function(blockPath) {
 });
 fs.writeFileSync(dirs.srcPath + 'scss/style.scss', styleImports);
 
+// Формирование и запись списка примесей (mixins.pug) со списком инклудов всех pug-файлов блоков
+let pugMixins = '//- ВНИМАНИЕ! Этот файл генерируется автоматически. Не пишите сюда ничего вручную!\n//- Читайте ./README.md для понимания.\n\n';
+lists.pug.forEach(function(blockPath) {
+  pugMixins += 'include '+blockPath+'\n';
+});
+fs.writeFileSync(dirs.srcPath + 'pug/mixins.pug', pugMixins);
+
 // Определение: разработка это или финальная сборка
 // Запуск `NODE_ENV=production npm start [задача]` приведет к сборке без sourcemaps
 const isDev = !process.env.NODE_ENV || process.env.NODE_ENV == 'dev';
@@ -63,10 +70,10 @@ let postCssPlugins = [
   imageInliner({
     // Осторожнее с именами файлов картинок! Добавляйте имя блока как префикс к имени картинки.
     assetPaths: [
-      'src/blocks/**/img_to_bg/',
+      'src/blocks/**/bg-img/',
     ],
-    // Инлайнятся только картинки менее 10 Кб.
-    maxFileSize: 10240
+    // Инлайнятся только картинки менее 5 Кб.
+    maxFileSize: 5120
   })
 ];
 
@@ -366,32 +373,7 @@ gulp.task('sprite:png', function (callback) {
   }
 });
 
-// Сборка HTML
-gulp.task('html', function() {
-  const fileinclude = require('gulp-file-include');
-  const replace = require('gulp-replace');
-  console.log('---------- сборка HTML');
-  return gulp.src(dirs.srcPath + '/*.html')
-    .pipe(plumber({
-      errorHandler: function(err) {
-        notify.onError({
-          title: 'HTML compilation error',
-          message: err.message
-        })(err);
-        this.emit('end');
-      }
-    }))
-    .pipe(fileinclude({
-      prefix: '@@',
-      basepath: '@file',
-      indent: true,
-    }))
-    .pipe(realFavicon.injectFaviconMarkups(JSON.parse(fs.readFileSync(faviconData)).favicon.html_code))
-    .pipe(replace(/\n\s*<!--DEV[\s\S]+?-->/gm, ''))
-    .pipe(gulp.dest(dirs.buildPath));
-});
-
-// Сборка Pug (приоритет при совпадении имён файлов выше, чем у HTML)
+// Сборка Pug
 gulp.task('pug', function() {
   const pug = require('gulp-pug');
   const htmlbeautify = require('gulp-html-beautify');
@@ -497,7 +479,6 @@ gulp.task('build', function (callback) {
     ['clean'],
     ['sprite:svg', 'sprite:png', 'favicons'],
     ['style', 'style:single', 'js', 'copy:css', 'copy:img', 'copy:js', 'copy:fonts'],
-    'html',
     'pug',
     callback
   );
@@ -545,12 +526,6 @@ gulp.task('serve', ['build'], function() {
   }
   // Слежение за шрифтами
   gulp.watch('/fonts/*.{ttf,woff,woff2,eot,svg}', {cwd: dirs.srcPath}, ['watch:fonts']);
-  // Слежение за html
-  gulp.watch([
-    '*.html',
-    '_include/*.html',
-    dirs.blocksDirName + '/**/*.html'
-  ], {cwd: dirs.srcPath}, ['watch:html']);
   // Слежение за pug
   gulp.watch([
     dirs.srcPath + '/**/*.pug',
@@ -573,7 +548,6 @@ gulp.task('serve', ['build'], function() {
 gulp.task('watch:img', ['copy:img'], reload);
 gulp.task('watch:copied:js', ['copy:js'], reload);
 gulp.task('watch:fonts', ['copy:fonts'], reload);
-gulp.task('watch:html', ['html'], reload);
 gulp.task('watch:pug', ['pug'], reload);
 gulp.task('watch:js', ['js'], reload);
 gulp.task('watch:sprite:svg', ['sprite:svg'], reload);
@@ -592,6 +566,7 @@ function getFilesList(config){
     'css': [],
     'js': [],
     'img': [],
+    'pug': [],
   };
 
   // Style
@@ -624,6 +599,11 @@ function getFilesList(config){
   }
   res.img = config.addImages.concat(res.img);
 
+  // Pug
+  for (let blockName in config.blocks) {
+    res.pug.push('../blocks/' + blockName + '/' + blockName + '.pug');
+  }
+
   return res;
 }
 

package.json

 {
   "name": "NTH-start-project",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "Start a library of blocks and technical solutions for HTML/CSS/js page layout.",
   "author": "Nikolay Gromov",
   "license": "WTFPL",
@@ -10,7 +10,6 @@
   },
   "scripts": {
     "test:style": "stylelint \"src/**/*.scss\" --syntax=scss",
-    "test:orpho": "yaspeller -e \".md,.html\" ./src/",
     "start": "gulp",
     "deploy": "cross-env NODE_ENV=production ./node_modules/.bin/gulp build && cross-env ./node_modules/.bin/gulp deploy",
     "build": "cross-env NODE_ENV=production npm start build",
@@ -33,7 +32,6 @@
     "gulp-cleancss": "^0.2.2",
     "gulp-concat": "^2.6.1",
     "gulp-debug": "^3.1.0",
-    "gulp-file-include": "^1.0.0",
     "gulp-gh-pages": "^0.5.4",
     "gulp-html-beautify": "^1.0.1",
     "gulp-if": "^2.0.2",
@@ -66,8 +64,7 @@
     "postcss-inline-svg": "^3.0.0",
     "postcss-object-fit-images": "^1.1.2",
     "stylelint": "^8.2.0",
-    "vinyl-buffer": "^1.0.0",
-    "yaspeller": "^4.0.0"
+    "vinyl-buffer": "^1.0.0"
   },
   "dependencies": {
     "ismobilejs": "^0.4.0",

projectConfig.json

 {
   "blocks": {
     "page": [],
-    "is-mobile": [],
     "typo": [],
-    "page-header": [],
-    "page-footer": [],
-    "main-nav": [],
-    "logo": [],
-    "btn": [],
     "sprite-svg": [],
     "sprite-png": [
       "__demo"
     ],
+    "page-header": [],
+    "page-footer": [],
+    "logo": [],
+    "main-nav": [],
+    "close": [],
+    "burger": [],
+    "code": [],
+    "thumb": [],
+    "alert": [],
+    "menu": [],
+    "label": [],
+    "loader": [],
+    "table": [],
+    "table-responsive": [],
+    "pagination": [],
+    "breadcrumbs": [],
+    "progress": [],
+    "pie-chart": [],
+    "embed-responsive": [],
+    "comment": [],
+    "tooltip": [],
+    "btn": [],
     "field-text": [
       "--error"
     ],
@@ -30,35 +46,19 @@
       "--error"
     ],
     "field-actions": [],
+    "fields-group": [],
     "form": [],
-    "code": [],
-    "thumb": [],
-    "alert": [],
+    "is-mobile": [],
+    "scroll-link": [],
     "to-top": [],
     "dropdown": [],
-    "menu": [],
-    "label": [],
-    "loader": [],
-    "table": [],
-    "table-responsive": [],
     "owl-carousel": [],
     "swipe": [],
-    "pagination": [],
-    "breadcrumbs": [],
     "nouislider": [],
     "off-canvas": [],
-    "burger": [],
-    "progress": [],
-    "comment": [],
     "modal": [],
-    "close": [],
     "tabs": [],
-    "object-fit-polyfill": [],
-    "embed-responsive": [],
-    "pie-chart": [],
-    "fields-group": [],
-    "tooltip": [],
-    "scroll-link": []
+    "object-fit-polyfill": []
   },
   "addCssBefore": [
     "./src/scss/variables.scss",
@@ -96,4 +96,4 @@
     "buildPath": "./build/",
     "blocksDirName": "blocks"
   }
-}
+}
\ No newline at end of file

src/_include/README.md

-
-Файлы, вставляемые внутрь других HTML-файлов при сборке страниц.

src/_include/page_bottom.html

-<!--DEV Такой комментарий не попадет в собранный HTML
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-<script>window.jQuery || document.write('<script src="js/jquery.3.1.1.min.js"><\/script>')</script>
--->
-<script src="js/script.min.js"></script>

src/_include/page_head.html

-<!--DEV Такой комментарий не попадет в собранный HTML
-<meta name="viewport" content="width=1000">
--->
-<meta name="viewport" content="width=device-width, initial-scale=1">
-
-<!--DEV Edge и ряд мобильных браузеров автоматом преобразуют телефоны в ссылки. Отключим это. -->
-<meta name="format-detection" content="telephone=no">
-
-<link href="css/style.min.css" rel="stylesheet" media="screen">
-
-<script>
-  // Маркер работающего javascript
-  document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
-  @@include('../blocks/is-mobile/is-mobile--to-head.js')
-</script>
-
-<!--DEV Перед </head> при сборке будут вставлены ссылки на favicon и служебные файлы -->

src/blocks-library.pug → src/blocks-demo.pug

-extends pug/layout.pug
+extends pug/layout-off-canvas.pug
 
 block meta
   title Библиотека
@@ -91,7 +91,7 @@ block content
 
 
 
-  h1 Страница демонстрации блоков, доступных на #[a(href="index.html") проекте]
+  h1 Блоки стартового репозитория #[a(href="index.html") проекта]
 
   +block-lib('page', 'Страница', false)
     include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/page/readme.md
@@ -117,6 +117,29 @@ block content
   +block-lib('sprite-png', 'PNG-спрайт с <a href="https://github.com/Ensighten/spritesmith">spritesmith</a>', true)
     include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/sprite-png/readme.md
 
+  +block-lib('page-header', '«Шапка» страницы', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/page-header/readme.md
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/page-header/page-header.pug
+
+  +block-lib('page-footer', '«Подвал» страницы', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/page-footer/readme.md
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/page-footer/page-footer.pug
+
+  +block-lib('logo', 'Логотип', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/logo/readme.md
+    +logo('/')
+      img(src='img/logo.svg', alt='Logo', width='64', height='15')
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/logo/logo.pug
+
+  +block-lib('main-nav', 'Главная навигация', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/main-nav/readme.md
+    +main-nav('1')
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/main-nav/main-nav.pug
+
   +block-lib('close', 'Закрыть', false)
     include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/close/readme.md
     div
@@ -131,12 +154,6 @@ block content
     +block-lib-code('burger-code', true)
       include:show-code(first-line="//- Pug-файл этого блока:") blocks/burger/burger.pug
 
-  +block-lib('main-nav', 'Главная навигация', false)
-    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/main-nav/readme.md
-    +main-nav('1')
-    +block-lib-code()
-      include:show-code(first-line="//- Pug-файл этого блока:") blocks/main-nav/main-nav.pug
-
   +block-lib('code', 'Код', false)
     include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/code/readme.md
     +code()
@@ -159,7 +176,7 @@ block content
     +block-lib-code()
       include:show-code(first-line="//- Pug-файл этого блока:") blocks/alert/alert.pug
 
-  +block-lib('menu', 'Меню', true)
+  +block-lib('menu', 'Меню', false)
     include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/menu/readme.md
     -
       var myMenu = [
@@ -181,6 +198,156 @@ block content
     +block-lib-code()
       include:show-code(first-line="//- Pug-файл этого блока:") blocks/menu/menu.pug
 
+  +block-lib('label', 'Лейбл', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/label/readme.md
+    +label('Текст1')
+    +label('Текст2', '', 'div')
+    +label('Текст3', '', 'a')(href="/")
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/label/label.pug
+
+  +block-lib('loader', 'Загрузчик', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/loader/readme.md
+    +loader()
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/loader/loader.pug
+
+  +block-lib('table', 'Таблица', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/table/readme.md
+    +table()
+      caption Таблица
+      tr
+        th Имя
+        th Фамилия
+        th Мыло
+        th Статус
+        th Политическая ориентация
+      tr
+        td Иннокентий
+        td Иванов
+        td Хозяйственное
+        td Администратор
+        td «ВСЕГДА!»
+      tr
+        td Васисуалий
+        td Римский-Корсаков
+        td Душистое
+        td Пользователь
+        td Нижняя
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/table/table.pug
+
+  +block-lib('table-responsive', 'Адаптивная таблица', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/table-responsive/readme.md
+    +table-responsive()
+      caption Таблица
+      thead
+        tr
+          th Имя и фамилия
+          th Тип мироощущения
+      tbody
+        tr
+          td(data-label='Имя и фамилия') Анатоле Вассерман
+          td(data-label='Тип мироощущения') Девственность
+        tr
+          td(data-label='Имя и фамилия') Джакомо Казанова
+          td(data-label='Тип мироощущения') Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/table-responsive/table-responsive.pug
+
+  +block-lib('pagination', 'Пагинация', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/pagination/readme.md
+    +pagination()
+      +pagination-item('1', '/1')
+      +pagination-item('...')
+      +pagination-item('4', '/4')
+      +pagination-item('5', '/5', true)
+      +pagination-item('6', '/6')
+      +pagination-item('...')
+      +pagination-item('999', '/999')
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/pagination/pagination.pug
+
+  +block-lib('breadcrumbs', 'Хлебные крошки', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/breadcrumbs/readme.md
+    +breadcrumbs()
+      +breadcrumbs-item('Главная', '/home')
+      +breadcrumbs-item('Услуги', '/services')
+      +breadcrumbs-item('Стриптиз')
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/breadcrumbs/breadcrumbs.pug
+
+  +block-lib('progress', 'Прогресс', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/progress/readme.md
+    +progress('30', '30% (без копеек)', 'success')(aria-valuemin='0', aria-valuemax='100')
+    +progress('10')(style="height:10px")
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/progress/progress.pug
+
+  +block-lib('pie-chart', 'Круговые и секторные диаграммы', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/pie-chart/readme.md
+    +pie-chart('30')
+    +pie-chart('64')(data-size="120" data-border="59.9")
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/pie-chart/pie-chart.pug
+
+  +block-lib('comment', 'Комментарий', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/comment/readme.md
+    +comment({
+      username: 'Джокер',
+      avatarURL: 'img/joker.jpg',
+      authorURL: '/users/joker',
+      content: '<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>',
+      mods: 'admin',
+    })
+      +comment({
+        username: 'Джокер',
+        content: '<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>',
+      })
+        +comment({
+          username: 'Джокер',
+          content: '<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>',
+        })
+    +comment({
+      username: 'Джокер',
+      content: '<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>',
+    })
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/comment/comment.pug
+
+  +block-lib('embed-responsive', 'Адаптирующийся медиаконтент', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/embed-responsive/readme.md
+    style.
+      @media (min-width: 768px) {
+        .embed-responsive-demo {
+          display: flex;
+        }
+        .embed-responsive-demo__item {
+          flex-basis: 50%;
+        }
+        .embed-responsive-demo__item:first-child {
+          padding-right: 5px;
+        }
+        .embed-responsive-demo__item:last-child {
+          padding-left: 5px;
+        }
+      }
+    div.embed-responsive-demo
+      div.embed-responsive-demo__item
+        +embed-responsive('4-3')
+          iframe(src='https://www.youtube.com/embed/7pOr3dBFAeY', frameborder='0', allowfullscreen='')
+      div.embed-responsive-demo__item
+        +embed-responsive()
+          iframe(src='https://www.youtube.com/embed/B0Q1rKpDNE4', frameborder='0', allowfullscreen='')
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/embed-responsive/embed-responsive.pug
+
+  +block-lib('tooltip', 'Подсказки', true)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/tooltip/readme.md
+    p Текст и подсказка: #[+tooltip('Текст подсказки может быть длинным. Хочется, чтобы <em>внутри</em> <small>можно было</small> <i>использовать</i> <b>разметку</b>.')]
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/tooltip/tooltip.pug
+
   +block-lib('btn', 'Кнопка', false)
     include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/btn/readme.md
     p.
@@ -473,156 +640,6 @@ block content
     +block-lib-code()
       include:show-code(first-line="//- Pug-файл этого блока:") blocks/form/form.pug
 
-  +block-lib('label', 'Лейбл', false)
-    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/label/readme.md
-    +label('Текст1')
-    +label('Текст2', '', 'div')
-    +label('Текст3', '', 'a')(href="/")
-    +block-lib-code()
-      include:show-code(first-line="//- Pug-файл этого блока:") blocks/label/label.pug
-
-  +block-lib('loader', 'Загрузчик', false)
-    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/loader/readme.md
-    +loader()
-    +block-lib-code()
-      include:show-code(first-line="//- Pug-файл этого блока:") blocks/loader/loader.pug
-
-  +block-lib('table', 'Таблица', false)
-    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/table/readme.md
-    +table()
-      caption Таблица
-      tr
-        th Имя
-        th Фамилия
-        th Мыло
-        th Статус
-        th Политическая ориентация
-      tr
-        td Иннокентий
-        td Иванов
-        td Хозяйственное
-        td Администратор
-        td «ВСЕГДА!»
-      tr
-        td Васисуалий
-        td Римский-Корсаков
-        td Душистое
-        td Пользователь
-        td Нижняя
-    +block-lib-code()
-      include:show-code(first-line="//- Pug-файл этого блока:") blocks/table/table.pug
-
-  +block-lib('table-responsive', 'Адаптивная таблица', false)
-    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/table-responsive/readme.md
-    +table-responsive()
-      caption Таблица
-      thead
-        tr
-          th Имя и фамилия
-          th Тип мироощущения
-      tbody
-        tr
-          td(data-label='Имя и фамилия') Анатоле Вассерман
-          td(data-label='Тип мироощущения') Девственность
-        tr
-          td(data-label='Имя и фамилия') Джакомо Казанова
-          td(data-label='Тип мироощущения') Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.
-    +block-lib-code()
-      include:show-code(first-line="//- Pug-файл этого блока:") blocks/table-responsive/table-responsive.pug
-
-  +block-lib('pagination', 'Пагинация', false)
-    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/pagination/readme.md
-    +pagination()
-      +pagination-item('1', '/1')
-      +pagination-item('...')
-      +pagination-item('4', '/4')
-      +pagination-item('5', '/5', true)
-      +pagination-item('6', '/6')
-      +pagination-item('...')
-      +pagination-item('999', '/999')
-    +block-lib-code()
-      include:show-code(first-line="//- Pug-файл этого блока:") blocks/pagination/pagination.pug
-
-  +block-lib('breadcrumbs', 'Хлебные крошки', false)
-    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/breadcrumbs/readme.md
-    +breadcrumbs()
-      +breadcrumbs-item('Главная', '/home')
-      +breadcrumbs-item('Услуги', '/services')
-      +breadcrumbs-item('Стриптиз')
-    +block-lib-code()
-      include:show-code(first-line="//- Pug-файл этого блока:") blocks/breadcrumbs/breadcrumbs.pug
-
-  +block-lib('progress', 'Прогресс', false)
-    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/progress/readme.md
-    +progress('30', '30% (без копеек)', 'success')(aria-valuemin='0', aria-valuemax='100')
-    +progress('10')(style="height:10px")
-    +block-lib-code()
-      include:show-code(first-line="//- Pug-файл этого блока:") blocks/progress/progress.pug
-
-  +block-lib('pie-chart', 'Круговые и секторные диаграммы', false)
-    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/pie-chart/readme.md
-    +pie-chart('30')
-    +pie-chart('64')(data-size="120" data-border="59.9")
-    +block-lib-code()
-      include:show-code(first-line="//- Pug-файл этого блока:") blocks/pie-chart/pie-chart.pug
-
-  +block-lib('comment', 'Комментарий', false)
-    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/comment/readme.md
-    +comment({
-      username: 'Джокер',
-      avatarURL: 'img/joker.jpg',
-      authorURL: '/users/joker',
-      content: '<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>',
-      mods: 'admin',
-    })
-      +comment({
-        username: 'Джокер',
-        content: '<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>',
-      })
-        +comment({
-          username: 'Джокер',
-          content: '<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>',
-        })
-    +comment({
-      username: 'Джокер',
-      content: '<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>',
-    })
-    +block-lib-code()
-      include:show-code(first-line="//- Pug-файл этого блока:") blocks/comment/comment.pug
-
-  +block-lib('embed-responsive', 'Адаптирующийся медиаконтент', false)
-    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/embed-responsive/readme.md
-    style.
-      @media (min-width: 768px) {
-        .embed-responsive-demo {
-          display: flex;
-        }
-        .embed-responsive-demo__item {
-          flex-basis: 50%;
-        }
-        .embed-responsive-demo__item:first-child {
-          padding-right: 5px;
-        }
-        .embed-responsive-demo__item:last-child {
-          padding-left: 5px;
-        }
-      }
-    div.embed-responsive-demo
-      div.embed-responsive-demo__item
-        +embed-responsive('4-3')
-          iframe(src='https://www.youtube.com/embed/7pOr3dBFAeY', frameborder='0', allowfullscreen='')
-      div.embed-responsive-demo__item
-        +embed-responsive()
-          iframe(src='https://www.youtube.com/embed/B0Q1rKpDNE4', frameborder='0', allowfullscreen='')
-    +block-lib-code()
-      include:show-code(first-line="//- Pug-файл этого блока:") blocks/embed-responsive/embed-responsive.pug
-
-  +block-lib('tooltip', 'Подсказки', true)
-    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/tooltip/readme.md
-    p Текст и подсказка: #[+tooltip('Текст подсказки может быть длинным. Хочется, чтобы <em>внутри</em> <small>можно было</small> <i>использовать</i> <b>разметку</b>.')]
-    +block-lib-code()
-      include:show-code(first-line="//- Pug-файл этого блока:") blocks/tooltip/tooltip.pug
-
   +block-lib('is-mobile', 'Определение мобильного устройства', false)
     include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/is-mobile/readme.md
 

src/blocks/field-checkbox/field-checkbox.scss

@@ -45,11 +45,11 @@ $line-height:                 1.375em !default;
     //   left: 0;
     //   width: 14px;
     //   height: 14px;
-    //   background-image: svg-load('../blocks/field-checkbox/img_to_bg/checkbox.svg');
+    //   background-image: svg-load('../blocks/field-checkbox/bg-img/checkbox.svg');
     //   background-size: 100%;
     // }
     // @at-root input:checked ~ &:before {
-    //   background-image: svg-load('../blocks/field-checkbox/img_to_bg/checkbox--checked.svg');
+    //   background-image: svg-load('../blocks/field-checkbox/bg-img/checkbox--checked.svg');
     // }
 
     // / свой чекбокс с картинкой

src/blocks/field-radio/field-radio.scss

@@ -45,11 +45,11 @@ $line-height:                 1.375em !default;
     //   left: 0;
     //   width: 14px;
     //   height: 14px;
-    //   background-image: svg-load('../blocks/field-radio/img_to_bg/radiobutton.svg');
+    //   background-image: svg-load('../blocks/field-radio/bg-img/radiobutton.svg');
     //   background-size: 100%;
     // }
     // @at-root input:checked ~ &:before {
-    //   background-image: svg-load('../blocks/field-radio/img_to_bg/radiobutton--checked.svg');
+    //   background-image: svg-load('../blocks/field-radio/bg-img/radiobutton--checked.svg');
     // }
 
     // / своя радиокнопка с картинкой

src/blocks/field-select/field-select.scss

@@ -34,7 +34,7 @@ $border-radius:               3px !default;
     border-radius: $border-radius;
     appearance: none;
     background-color: #fff;
-    background-image: svg-load('../blocks/field-select/img_to_bg/select-down.svg');
+    background-image: svg-load('../blocks/field-select/bg-img/select-down.svg');
     background-repeat: no-repeat;
     background-position: right 0.3em center;
     background-size: 1.063em 0.688em;

src/blocks/logo/img/logo.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="15"><path d="M10.525 8.945q0 1.819-1.546 2.96-1.538 1.132-4.183 1.132-1.53 0-2.671-.264Q.992 12.5 0 12.086V9.135h.347q.984.785 2.2 1.207 1.223.422 2.348.422.29 0 .76-.05.472-.05.77-.165.363-.15.595-.372.24-.224.24-.662 0-.405-.348-.694-.339-.298-1-.455Q5.217 8.2 4.44 8.06q-.769-.149-1.447-.372Q1.44 7.183.753 6.324q-.679-.869-.679-2.15 0-1.72 1.538-2.803Q3.158.279 5.582.279q1.214 0 2.397.24 1.19.232 2.059.587v2.836h-.34q-.744-.595-1.827-.992-1.075-.405-2.199-.405-.397 0-.794.058-.388.05-.752.198-.323.124-.554.38-.232.249-.232.571 0 .488.372.753.373.256 1.406.47.678.141 1.298.274.629.132 1.348.363 1.414.463 2.083 1.266.678.793.678 2.067zM23.87.503l-4.49 12.311h-3.555L11.335.503h3.333l2.976 8.648L20.621.503zm12.659 11.608q-.827.323-2.191.645-1.364.314-2.72.314-3.142 0-4.92-1.703-1.778-1.711-1.778-4.721 0-2.87 1.795-4.622Q28.509.263 31.717.263q1.215 0 2.315.223 1.1.215 2.447.868V4.24h-.355q-.232-.174-.678-.488-.447-.322-.86-.546-.48-.264-1.124-.454-.637-.19-1.356-.19-.844 0-1.53.248t-1.232.76q-.521.496-.827 1.265-.298.76-.298 1.761 0 2.043 1.084 3.126 1.083 1.083 3.2 1.083.181 0 .396-.008.224-.008.405-.025V8.358H30.85V6.034h5.68zm6.924.703h-.972v-8.04h.972zm6.811-2.884q0 1.411-.724 2.228-.723.816-1.938.816-1.224 0-1.948-.816-.718-.817-.718-2.227 0-1.411.718-2.228.724-.821 1.948-.821 1.215 0 1.938.821.724.817.724 2.228zm-1.003 0q0-1.12-.44-1.663-.438-.548-1.219-.548-.79 0-1.23.548-.434.542-.434 1.664 0 1.085.44 1.648.439.558 1.224.558.775 0 1.215-.553.444-.558.444-1.653zm7.193 2.228q0 1.467-.666 2.155-.667.687-2.052.687-.46 0-.899-.067-.434-.062-.858-.181v-.992h.052q.238.093.754.227.517.14 1.034.14.496 0 .822-.12.325-.118.506-.33.18-.201.258-.486.078-.284.078-.635v-.527q-.44.351-.842.527-.398.17-1.018.17-1.034 0-1.644-.744-.604-.75-.604-2.108 0-.744.206-1.282.212-.542.574-.935.336-.367.816-.569.481-.206.956-.206.502 0 .838.103.34.098.718.305l.062-.248h.91zm-.971-.93V8.08q-.388-.176-.724-.249-.33-.077-.661-.077-.801 0-1.26.537-.46.538-.46 1.561 0 .972.34 1.473.341.501 1.132.501.424 0 .847-.16.43-.166.786-.44zm7.803-1.298q0 1.411-.723 2.228-.724.816-1.938.816-1.225 0-1.948-.816-.719-.817-.719-2.227 0-1.411.719-2.228.723-.821 1.948-.821 1.214 0 1.938.821.723.817.723 2.228zm-1.002 0q0-1.12-.44-1.663-.439-.548-1.22-.548-.79 0-1.23.548-.433.542-.433 1.664 0 1.085.439 1.648.44.558 1.225.558.775 0 1.214-.553.445-.558.445-1.653z"/></svg>
\ No newline at end of file

src/blocks/logo/logo.html

-<!--DEV
-
-Для использования этого файла как шаблона:
-
-@ @include('blocks/logo/logo.html')
-
-(Нужно убрать пробел между символами @)
-Подробнее: https://www.npmjs.com/package/gulp-file-include
-
-
-
-<a href="/" class="logo">
-  <img src="img/" alt="logo">
-</a>
-
--->

src/blocks/logo/logo.pug

+//- Все примеси в этом файле должны начинаться c имени блока (logo)
+
+mixin logo(href, mods)
+
+  //- Принимает:
+  //-   href  {string} - ссылка логотипа
+  //-   mods  {string} - список модификаторов
+  //- Вызов:
+        +logo('/')
+          img(src='img/logo.svg', alt='Logo', width='64', height='15')
+        +logo(false, 'mod')
+          img(src='img/logo.svg', alt='Logo', width='64', height='15')
+  -
+    // список модификаторов
+    var allMods = '';
+    if(typeof(mods) !== 'undefined' && mods) {
+      var modsList = mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' logo--' + modsList[i].trim();
+      }
+    }
+
+  a.logo(class=allMods, href=href)&attributes(attributes)
+    block

src/blocks/logo/logo.scss

@@ -6,6 +6,10 @@
 
   $block-name:                &; // #{$block-name}__element
 
-  display: block;
+  display: inline-block;
   white-space: nowrap;
+
+  img {
+    display: block;
+  }
 }

src/blocks/main-nav/main-nav.data.pug

@@ -2,7 +2,7 @@
   var mainMenu = [
     {
       "id": "1",
-      "name": "Главная ст1раница",
+      "name": "Главная страница",
       "url": "/"
     },
     {

src/blocks/main-nav/main-nav.pug

 //- Все примеси в этом файле должны начинаться c имени блока (main-nav)
+//- Структура меню — в main-nav.data.pug
 
 mixin main-nav(selectedID)
 
@@ -7,6 +8,7 @@ mixin main-nav(selectedID)
   //- Вызов:
         +main-nav('1')
 
+  //- подключаем файл со структурой данных блока
   include main-nav.data.pug
 
   nav.main-nav#nav&attributes(attributes)

src/blocks/object-fit-polyfill/object-fit-polyfill.scss

 // Никакая стилизация этого Блока по умолчанию не нужна.
+//
 // Полифил ВКЛЮЧАЕТСЯ в js-файле этого блока.
 // Добавочная стилизация для картинок с указанным object-fit: cover; добавится
 // с помощью PostCSS-плагина на этапе постобработки css-файла(ов).
+//
 // Полифил:                    https://github.com/bfred-it/object-fit-images
 // Добавленный PostCSS-плагин: https://github.com/ronik-design/postcss-object-fit-images

src/blocks/page-footer/page-footer.html

-<!--DEV
-
-Нужно убрать пробел между @-ами:
-
-@ @include('blocks/page-footer/page-footer.html')
-
--->
-
-<footer class="page-footer" role="contentinfo">
-  page-footer
-</footer>

src/blocks/page-footer/page-footer.pug

+//- Все примеси в этом файле должны начинаться c имени блока (page-footer)
+
+mixin page-footer(mods)
+
+  //- Принимает:
+  //-   mods  {string} - список модификаторов
+  //- Вызов:
+        +page-footer()
+          p «Подвал»
+  -
+    // список модификаторов
+    var allMods = '';
+    if(typeof(mods) !== 'undefined' && mods) {
+      var modsList = mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' page-footer--' + modsList[i].trim();
+      }
+    }
+
+  footer.page-footer(class=allMods, role='contentinfo')&attributes(attributes)
+    .page-footer__inner
+      block

src/blocks/page-footer/readme.md

+«Подвал» страницы.
+
+Обертка и внутренняя обертка блока.

src/blocks/page-header/page-header.html

-<!--DEV
-
-Нужно убрать пробел между @-ами:
-
-@ @include('blocks/page-header/page-header.html')
-
--->
-
-<header class="page-header" role="banner">
-  page-header
-</header>

src/blocks/page-header/page-header.pug

+//- Все примеси в этом файле должны начинаться c имени блока (page-header)
+
+mixin page-header(mods)
+
+  //- Принимает:
+  //-   mods  {string} - список модификаторов
+  //- Вызов:
+        +page-header()
+          p «Шапка»
+  -
+    // список модификаторов
+    var allMods = '';
+    if(typeof(mods) !== 'undefined' && mods) {
+      var modsList = mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' page-header--' + modsList[i].trim();
+      }
+    }
+
+  header.page-header(class=allMods, role="banner")&attributes(attributes)
+    .page-header__inner
+      block

src/blocks/page-header/readme.md

+«Шапка» страницы.
+
+Обертка и внутренняя обертка блока.

src/blocks/to-top/to-top.scss

@@ -16,7 +16,7 @@
   background-color: #000;
   color: transparent;
   font: 0/0 a;
-  // см. img_to_bg/to-up.svg
+  // см. bg-img/to-up.svg
   // http://yoksel.github.io/url-encoder/ru/
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' width='17' height='11'%3E%3Cpath fill='%23fff' d='M.202 1.97L1.956.204A.61.61 0 0 1 2.43 0a.61.61 0 0 1 .47.204L8.5 5.84 14.1.204A.61.61 0 0 1 14.57 0a.61.61 0 0 1 .474.204l1.754 1.766a.618.618 0 0 1 .202.473.62.62 0 0 1-.202.476l-7.826 7.875A.61.61 0 0 1 8.5 11a.61.61 0 0 1-.472-.204L.202 2.92A.618.618 0 0 1 0 2.444c0-.203.067-.34.202-.475z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;

src/index.html

-<!DOCTYPE html>
-<html class="no-js  page" lang="ru">
-
-<head>
-  <meta charset="utf-8">
-  <title>NTH start project</title>
-  <meta name="description" content="">
-  @@include('_include/page_head.html')
-</head>
-
-<body>
-
-  <div class="page__inner">
-
-    <div class="page__content">
-
-      @@include('blocks/page-header/page-header.html')
-
-      <main role="main">
-
-        <h1>NTH start project</h1>
-
-        <p><a href="blocks-demo.html">Страница с демкой компонентов</a></p>
-
-      </main>
-
-    </div>
-
-    <div class="page__footer-wrapper">
-      @@include('blocks/page-footer/page-footer.html')
-    </div>
-
-  </div>
-
-  @@include('_include/page_bottom.html')
-</body>
-</html>

src/index.pug

+extends pug/layout.pug
+
+block meta
+  title Главная
+  meta(name='description', content='')
+
+//- block append head
+//-   link(rel='stylesheet', href='css/some.css')
+
+block header
+  +page-header()
+    +logo('/')
+      span Логотип
+    +main-nav('1')
+
+block content
+  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
+
+block footer
+  +page-footer()
+    p «Подвал»
+
+//- block page-bottom
+//-   script(src="js/some.js")

src/pug/layout-off-canvas.pug

+//- Шаблон страницы с боковым меню (off-canvas)
+
+include mixins.pug
+
+doctype html
+html(class="no-js  page", lang="ru")
+
+  head
+    meta(charset='utf-8')
+    meta(name='viewport', content='width=device-width, initial-scale=1')
+    //- Edge и ряд мобильных браузеров автоматом преобразуют телефоны в ссылки. Отключим это.
+    meta(name="format-detection", content="telephone=no")
+
+    block meta
+      title Home
+
+    block head
+      link(rel="stylesheet", href="css/style.min.css")
+      script.
+        document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
+      script
+        include ../blocks/is-mobile/is-mobile--to-head.js
+
+  body
+
+    .off-canvas#off-canvas
+      aside.off-canvas__aside(role="complementary", aria-label="Меню")
+        block off-canvas
+      main.off-canvas__page-content.components-demo.blocks-library(role="main")
+
+        //- Реальный контент страницы
+        div.page__inner
+          div.page__content
+            block header
+              p «шапка»
+            block content
+              p содержимое страницы
+          div.page__footer-wrapper
+            block footer
+              p «подвал»
+
+      div.off-canvas__overlay(data-toggle="off-canvas")
+
+    block page-bottom
+      script(src="js/script.min.js")

src/pug/layout.pug

+//- Стандартный шаблон страницы
+
 include mixins.pug
 
 doctype html
@@ -21,23 +23,15 @@ html(class="no-js  page", lang="ru")
 
   body
 
-    .off-canvas#off-canvas
-      aside.off-canvas__aside(role="complementary", aria-label="Меню")
-        block off-canvas
-      main.off-canvas__page-content.components-demo.blocks-library(role="main")
-
-        //- Реальный контент страницы
-        div.page__inner
-          div.page__content
-            block header
-              header.page-header «шапка»
-            block content
-              div содержимое страницы
-          div.page__footer-wrapper
-            block footer
-              footer.page-footer «подвал»
-
-      div.off-canvas__overlay(data-toggle="off-canvas")
+    div.page__inner
+      div.page__content
+        block header
+          p «шапка»
+        block content
+          p содержимое страницы
+      div.page__footer-wrapper
+        block footer
+          p «подвал»
 
     block page-bottom
       script(src="js/script.min.js")

src/pug/mixins.pug

-//- Подключение примесей
+//- ВНИМАНИЕ! Этот файл генерируется автоматически. Не пишите сюда ничего вручную!
+//- Читайте ./README.md для понимания.
 
+include ../blocks/page/page.pug
+include ../blocks/typo/typo.pug
+include ../blocks/sprite-svg/sprite-svg.pug
+include ../blocks/sprite-png/sprite-png.pug
+include ../blocks/page-header/page-header.pug
+include ../blocks/page-footer/page-footer.pug
+include ../blocks/logo/logo.pug
+include ../blocks/main-nav/main-nav.pug
 include ../blocks/close/close.pug
 include ../blocks/burger/burger.pug
-include ../blocks/main-nav/main-nav.pug
 include ../blocks/code/code.pug
 include ../blocks/thumb/thumb.pug
 include ../blocks/alert/alert.pug
 include ../blocks/menu/menu.pug
+include ../blocks/label/label.pug
+include ../blocks/loader/loader.pug
+include ../blocks/table/table.pug
+include ../blocks/table-responsive/table-responsive.pug
+include ../blocks/pagination/pagination.pug
+include ../blocks/breadcrumbs/breadcrumbs.pug
+include ../blocks/progress/progress.pug
+include ../blocks/pie-chart/pie-chart.pug
+include ../blocks/embed-responsive/embed-responsive.pug
+include ../blocks/comment/comment.pug
+include ../blocks/tooltip/tooltip.pug
 include ../blocks/btn/btn.pug
 include ../blocks/field-text/field-text.pug
 include ../blocks/field-checkbox/field-checkbox.pug
@@ -18,22 +37,14 @@ include ../blocks/field-select/field-select.pug
 include ../blocks/field-actions/field-actions.pug
 include ../blocks/fields-group/fields-group.pug
 include ../blocks/form/form.pug
-include ../blocks/label/label.pug
-include ../blocks/loader/loader.pug
-include ../blocks/table/table.pug
-include ../blocks/table-responsive/table-responsive.pug
-include ../blocks/pagination/pagination.pug
-include ../blocks/breadcrumbs/breadcrumbs.pug
-include ../blocks/progress/progress.pug
-include ../blocks/pie-chart/pie-chart.pug
-include ../blocks/comment/comment.pug
-include ../blocks/embed-responsive/embed-responsive.pug
-include ../blocks/tooltip/tooltip.pug
+include ../blocks/is-mobile/is-mobile.pug
 include ../blocks/scroll-link/scroll-link.pug
 include ../blocks/to-top/to-top.pug
 include ../blocks/dropdown/dropdown.pug
 include ../blocks/owl-carousel/owl-carousel.pug
 include ../blocks/swipe/swipe.pug
 include ../blocks/nouislider/nouislider.pug
+include ../blocks/off-canvas/off-canvas.pug
 include ../blocks/modal/modal.pug
 include ../blocks/tabs/tabs.pug
+include ../blocks/object-fit-polyfill/object-fit-polyfill.pug