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

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/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