Добавил описание примесей модульной сетки

src/blocks-demo.pug

@@ -111,6 +111,51 @@ block content
   +block-lib('typo', 'Текст, теги', false)
     include:markdown-it(linkify, html='true', typographer='true', quotes='«»') blocks/typo/readme.md
 
+  +block-lib('grid-mixins', 'Примеси-генераторы модульной сетки', false, 'grid')
+    :markdown-it(linkify, html='true', typographer='true', quotes='«»')
+      По умолчанию в сборку берётся файл с примесями для создания модульной сетки: `./src/scss/mixins/grid-mixins.scss`. Отдельного БЭМ-блока для сеток нет, используйте семантические классы и применяйте к ним примеси. <br>
+      [Пример использования на codepen.io](https://codepen.io/nicothin/pen/aJEOwE?editors=1100).
+
+      Необходимая структура:
+
+      - Контейнер — общая обёртка, обеспечивающая ширину, боковые внутренние отступы (`padding`) и центровку (`margin: auto`). Может содержать любой контент.
+      - Прямой родитель сетки — обёртка ячеек, обеспечивающая отрицательные боковые отступы (`margin`).
+      - Ячейки любой ширины (по умолчанию 12 колонок, для изменения — переопредить переменную).
+
+    +block-lib-code()
+      pre.code
+        code &lt;section class="promo">
+        code   &lt;div class="promo__inner">
+        code     &lt;h2>Заголовок промо&lt;/h2>
+        code     &lt;p>Произвольный контент до модульной сетки&lt;/p>
+        code     &lt;div class="promo__grid">
+        code       &lt;div class="promo__img">&lt;/div>
+        code       &lt;div class="promo__text">&lt;/div>
+        code     &lt;/div>
+        code   &lt;/div>
+        code &lt;/section>
+        code &nbsp;
+        code .promo {
+        code
+        code   &__inner {
+        code     @include container();
+        code   }
+        code
+        code   &__grid {
+        code     @include row();
+        code   }
+        code
+        code   &__img {
+        code     @include col();
+        code     @include col(md, 5);
+        code   }
+        code
+        code   &__text {
+        code     @include col();
+        code     @include col(md, 7);
+        code   }
+        code }
+
   +block-lib('sprite-svg', 'SVG-спрайт c <a href="https://github.com/w0rm/gulp-svgstore">gulp-svgstore</a>', false)
     include:markdown-it(linkify, html='true', typographer='true', quotes='«»') blocks/sprite-svg/readme.md
 

src/blocks/page/page.scss

 
-// Make viewport great again (responsive)
+// Сделаем viewport великим снова! (привет, IE10)
 // http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
 @at-root {
 
@@ -54,17 +54,17 @@ body {
   outline: none !important; // stylelint-disable-line  declaration-no-important
 }
 
-// iOS 'clickable elements' fix for role='button'
+// Коррекция для кликабельных элементов с указанной ролью в iOS
 [role='button'] {
   cursor: pointer;
 }
 
-// We love Safari
+// Мы любим Сафари (на самом деле, нет).
 input[type='search'] {
   -webkit-appearance: textfield; // stylelint-disable-line  property-no-vendor-prefix
 }
 
-// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
+// Стилевая коррекция 300ms задержки (для поддерживающих браузеров)
 a,
 // area,
 button,
@@ -77,7 +77,7 @@ textarea {
   touch-action: manipulation;
 }
 
-// We love EDGE! This is a browser!
+// Мы любим EDGE! Это браузер! (Спорное замечание.)
 svg {
 
   a &,
@@ -90,3 +90,18 @@ img {
   max-width: 100%;
   height: auto;
 }
+
+a {
+  color: $link-color;
+  text-decoration-skip: ink;
+  transition: color 0.3s;
+
+  &:hover,
+  &:focus {
+    color: $link-color--hover;
+  }
+
+  &:visited {
+    color: $link-color--hover;
+  }
+}