Добавил блок «карточка товара»

config.js

@@ -25,8 +25,7 @@ let config = {
   ],
   "addAssets": {
     "src/fonts/demo-empty-open-sans.woff2": "fonts/",
-    "src/img/demo-avatar-*": "img/",
-    // "src/img/DSC_*": "img/",
+    "src/img/demo-*.{png,svg,jpg,jpeg}": "img/",
     // "src/favicon/*.{png,ico,svg,xml,webmanifest}": "img/favicon",
   },
   "dir": {

src/blocks/blocks-library/blocks-library.scss

@@ -37,6 +37,7 @@
 @import "../social/social.scss";
 @import "../to-top/to-top.scss";
 @import "../object-fit-polyfill/object-fit-polyfill.scss";
+@import "../card/card.scss";
 @import "../../scss/print.scss";
 
 

src/blocks/card/card.pug

+//- Все примеси в этом файле должны начинаться c имени блока (card)
+
+mixin card(data, mods)
+
+  //- Принимает:
+  //- data {
+  //-   url:   {string},  - адрес для ссылки
+  //-   img:   {string},  - адрес картинки товара
+  //-   name:  {string},  - название
+  //-   descr: {string},  - описание
+  //-   price: {number},  - цена
+  //-   new:   {boolean}, - показать метку «новинка»
+  //- }
+  //- mods {string}       - модификаторы
+  //- Вызов:
+        +card({
+          url: 'good01',
+          img: 'img/demo-product.jpg',
+          name: 'Товар1',
+          descr: 'Описание1',
+          price: 7777,
+          new: true,
+        }, 'mod')
+        +card({
+          img: 'img/demo-product.jpg',
+          name: 'Товар2',
+          price: 12000,
+        })
+
+  -
+    // список модификаторов
+    var allMods = '';
+    if(typeof(mods) !== 'undefined' && mods) {
+      var modsList = mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' card--' + modsList[i].trim();
+      }
+    }
+    var newLabel = (data.new !== 'undefined' && data.new) ? '<div class="card__new">Новинка!</div>' : '';
+    var price = '' + data.price;
+    var price = price.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1&thinsp;') + ' ₽';
+
+  article.card(class=allMods)&attributes(attributes)
+    != newLabel
+    if (data.url !== 'undefined' && data.url)
+      .card__inner
+        a.card__img-wrap(href=data.url)
+          img.card__img(src=data.img, alt=data.name)
+        h3.card__title
+          a(href=data.url)!= data.name
+        if (data.descr !== 'undefined' && data.descr)
+          p.card__descr!= data.descr
+        p.card__price!= price
+    else
+      .card__inner
+        span.card__img-wrap
+          img.card__img(src=data.img, alt=data.name)
+        h3.card__title!= data.name
+        if (data.descr !== 'undefined' && data.descr)
+          p.card__descr!= data.descr
+        p.card__price!= price
+
+    +btn('Купить', '')(class='card__buy')

src/blocks/card/card.scss

+// В этом файле должны быть стили для БЭМ-блока card, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
+// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
+
+.card {
+
+  $block-name:                &; // #{$block-name}__element
+
+  position: relative;
+  z-index: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 200px;
+  padding: 0 15px;
+  margin-bottom: 30px;
+
+  &__inner {
+    flex-grow: 1;
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+    margin-bottom: 20px;
+  }
+
+  &__img-wrap {
+    flex-shrink: 0;
+    display: block;
+    margin-bottom: 20px;
+  }
+
+  &__img {
+    display: block;
+  }
+
+  &__title {
+    margin: 0 0 20px;
+  }
+
+  &__new {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 50%;
+    padding: 5px 10px;
+    line-height: 1;
+    font-weight: 700;
+    color: #fff;
+    background: $color-success;
+    transform: translateX(-50%) rotate(-10deg);
+  }
+
+  &__price {
+    flex-shrink: 0;
+    margin: auto 0 0;
+    font-size: $font-size--h3 + 2;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  &__buy {
+    flex-shrink: 0;
+  }
+}

src/blocks/card/readme.md

+Карточка товара (миниатюра-ссылка на страницу товара).

src/pages/blocks-demo.pug

@@ -172,7 +172,7 @@ block content
   +block-lib('logo', 'Логотип', false)
     include:markdown-it(html='true') ../blocks/logo/readme.md
     +logo('/')
-      img(src='img/temp-logo.svg', alt='Logo', width='64', height='15')
+      img(src='img/demo-logo.svg', alt='Logo', width='64', height='15')
     +block-lib-code()
       include:show-code(first-line='//- Pug-файл этого блока:') ../blocks/logo/logo.pug
 
@@ -207,6 +207,25 @@ block content
     +block-lib-code()
       include:show-code(first-line='//- Pug-файл этого блока:') ../blocks/alert/alert.pug
 
+  +block-lib('card', 'Мини-карточка товара', false)
+    include:markdown-it(html='true') ../blocks/card/readme.md
+    .blocks-demo__cards-list(style='display: flex; flex-wrap: wrap;')
+      +card({
+        url: 'good01',
+        img: 'img/demo-product.jpg',
+        name: 'Товар1',
+        descr: 'Описание1',
+        price: 7777,
+        new: true,
+      }, 'mod')
+      +card({
+        img: 'img/demo-product.jpg',
+        name: 'Товар2',
+        price: 12000,
+      })
+    +block-lib-code()
+      include:show-code(first-line='//- Pug-файл этого блока:') ../blocks/card/card.pug
+
   +block-lib('label', 'Лейбл', false)
     include:markdown-it(html='true') ../blocks/label/readme.md
     +label('Текст1')