bukatchuk ui

Блоки

Сетка характеристик

Ячейки с подписью, крупным числом и пояснением в общей рамке.

spec-grid с версии 0.1.0

Примеры

Что вы получите
<div class="specs">
  <div class="spec">
    <div><div class="spec__id">Через неделю</div><div class="spec__label">Три стенда</div></div>
    <div><div class="spec__v">3<span class="spec__u">среды</span></div><div class="spec__note">Локальный, VPS и облако, на всех трёх один и тот же сервис.</div></div>
  </div>
  <div class="spec spec--dark">
    <div><div class="spec__id">Через месяц</div><div class="spec__label">Командная строка</div></div>
    <div><div class="spec__v">68<span class="spec__u">уроков</span></div><div class="spec__note">Базы до первого контейнера.</div></div>
  </div>
  <div class="spec spec--safety">
    <div><div class="spec__id">Риск</div><div class="spec__label">Возврат</div></div>
    <div><div class="spec__v">1<span class="spec__u">месяц</span></div><div class="spec__note">Возврат по одному сообщению.</div></div>
  </div>
</div>
Ячейка без числа
<div class="specs">
  <div class="spec">
    <div><div class="spec__id">Формат</div><div class="spec__label">Практика</div></div>
    <div class="spec__note">Десять инцидентов на стенде-двойнике под таймером.</div>
  </div>
</div>

Установка

bukatchuk-ui add spec-grid

Вместе с компонентом установятся: tokens, fonts, base.

Файлы

ФайлНазначение
spec-grid.cssстили
example.htmlобразец разметки, в проект не копируется
spec-grid.jekyll.htmlвставка для Jekyll

Варианты

КлассНазначение
spec--dark
spec--safety

Вставка для Jekyll

{%- comment -%}
  Сетка характеристик. Параметр: items — список с полями id, label, value, unit, note, variant (dark | safety).
  Без value в ячейке остаётся только пояснение.
  Пример: {% include ui/spec-grid.html items=site.data.outcomes.items %}
{%- endcomment -%}
<div class="specs">
  {%- for x in include.items %}
  <div class="spec{% if x.variant == 'dark' %} spec--dark{% endif %}{% if x.variant == 'safety' %} spec--safety{% endif %} rv">
    <div><div class="spec__id">{{ x.id }}</div><div class="spec__label">{{ x.label }}</div></div>
    {%- if x.value %}
    <div><div class="spec__v">{{ x.value }}{% if x.unit %}<span class="spec__u">{{ x.unit }}</span>{% endif %}</div><div class="spec__note">{{ x.note }}</div></div>
    {%- else %}
    <div class="spec__note">{{ x.note }}</div>
    {%- endif %}
  </div>
  {%- endfor %}
</div>