Добавил пагинацию

projectConfig.json

@@ -43,7 +43,8 @@
     "table-responsive": [],
     "table-mobile-scroll": [],
     "owl-carousel": [],
-    "swipe": []
+    "swipe": [],
+    "pagination": []
   },
   "addCssBefore": [
     "./src/scss/variables.scss",

src/blocks-demo.html

@@ -1357,6 +1357,39 @@
 
     </section>
 
+    <section class="blocks-library__item" id="pagination" data-name=".pagination">
+
+      <h2 class="blocks-library__item-title">Пагинация</h2>
+
+      <div class="pagination">
+        <a href="" class="pagination__item">1</a>
+        <span class="pagination__item">...</span>
+        <a href="" class="pagination__item">5</a>
+        <a href="" class="pagination__item  pagination__item--active">6</a>
+        <a href="" class="pagination__item">123</a>
+        <span class="pagination__item">...</span>
+        <a href="" class="pagination__item">999</a>
+      </div>
+
+      <div class="blocks-library__code-wrapper">
+        <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
+        <div class="blocks-library__code">
+          <pre class="code">
+            <code>&lt;/div class="pagination"></code>
+            <code>  &lt;/a href="" class="pagination__item">1&lt;//a></code>
+            <code>  &lt;/a href="" class="pagination__item">...&lt;//a></code>
+            <code>  &lt;/a href="" class="pagination__item">5&lt;//a></code>
+            <code>  &lt;/a href="" class="pagination__item  pagination__item--active">6&lt;//a></code>
+            <code>  &lt;/a href="" class="pagination__item">123&lt;//a></code>
+            <code>  &lt;/a href="" class="pagination__item">...&lt;//a></code>
+            <code>  &lt;/a href="" class="pagination__item">999&lt;//a></code>
+            <code>&lt;//div></code>
+          </pre>
+        </div>
+      </div>
+
+    </section>
+
     <section class="blocks-library__item" id="dropdown" data-name=".dropdown">
 
       <h2 class="blocks-library__item-title">Выпадающий блок</h2>

src/blocks/pagination/pagination.html

+<!--DEV
+
+Для использования этого файла как шаблона:
+
+@ @include('blocks/pagination/pagination.html')
+
+(Нужно убрать пробел между символами @)
+Подробнее: https://www.npmjs.com/package/gulp-file-include
+
+-->
+
+<div class="pagination">
+  <a href="" class="pagination__item">1</a>
+  <a href="" class="pagination__item">...</a>
+  <a href="" class="pagination__item">5</a>
+  <a href="" class="pagination__item  pagination__item--active">6</a>
+  <a href="" class="pagination__item">123</a>
+  <a href="" class="pagination__item">...</a>
+  <a href="" class="pagination__item">999</a>
+</div>

src/blocks/pagination/pagination.scss

+// В этом файле должны быть стили только для БЭМ-блока pagination, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
+// Не пишите здесь другие селекторы.
+
+$line-height:                 1.375em !default;
+
+$text-color:                  hsl(0, 0%, 10%) !default;
+
+$border-color:                hsl(0, 0%, 60%) !default;
+
+.pagination {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: $line-height;
+  margin-bottom: $line-height;
+
+  &__item {
+    display: block;
+    padding: 0.5em;
+    min-width: 2.5em;
+    border: 1px solid $border-color;
+    text-decoration: none;
+    text-align: center;
+    color: $text-color;
+
+    & + & {
+      border-left: 0;
+    }
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      color: $text-color;
+    }
+
+    @at-root a#{&} {
+
+      &:hover,
+      &:focus {
+        background-color: $gray-lightest;
+      }
+    }
+
+    &--active {
+      background-color: $gray-lightest;
+    }
+  }
+}