Секція товарів

Розберемо приклад створення секції зі стандартною сіткою карток, наприклад товарів інтернет-магазину.

Виділимо основні блоки (компоненти):

• Секція (клас section) - представляє довільний розділ з необов'язковим заголовком.
• Контейнер (клас container) - обгортка, яка задає ширину контенту і центрування.
• Сітка (клас grid) - відповідає за геометрію і розташування елементів.
• Картка товару (клас product) - компонент, що містить інформацію про продукт.

Блок section

До секції можна додати модифікатори кольору фону, залежно від теми, і багато іншого.

<section class="section">
  <!-- Необов'язковий заголовок, тег заголовка може бути довільний h1-h6 -->
  <h2 class="section__heading"></h2>
</section>

Блок container

Використовується не тільки в секціях, тому це окремий блок.

<section class="section">
  <!-- Блок container, обгортка контенту секції -->
  <div class="container">
    <h2 class="section__heading"></h2>
  </div>
</section>

Блок grid

У сітки є тільки один елемент - grid__item, він буде відповідати за фінальний розмір картки товару і за відстань між картками. Тобто сітка і її елементи - це flex-контейнер, який бере на себе завдання позиціонування будь-чого, наприклад карток товару.

<section class="section">
  <div class="container">
    <h2 class="section__heading"></h2>

    <!-- Блок grid -->
    <ul class="grid">
      <li class="grid__item">...</li>
      <li class="grid__item">...</li>
      <li class="grid__item">...</li>
      ...
    </ul>
  </div>
</section>

Корисно

Таку сітку можна буде використовувати повторно, особливо, якщо елементам зробити модифікатори кількості колонок, яку вони займають.

Блок product

Незалежний компонент, який може представляти будь-який продукт. Нехай картка товару складається із зображення, назви, ціни і кнопки «В кошик». Елементів може бути скільки завгодно, головне пам'ятати, що вони необов'язкові.

<article class="product">
  <img class="product__image" />
  <h2 class="product__name"></h2>
  <p class="product__price"></p>
  <button class="button" type="button"></button>
</article>

Зверніть увагу на тег button, його клас - це блок, а не елемент блоку product. Найчастіше дизайн кнопок в проекті однаковий, тому кнопка робиться окремим блоком і повторно використовується в інших компонентах. Для того, щоб задати їй додаткове позиціонування або зовнішню геометрію, достатньо додати мікс product__button.

Все разом

Збираємо секцію товарів з готових компонентів, і додаємо оформлення.