Блоки

Путь по шагам

Список шагов с крупным номером, сроком, описанием и тегами.

stack с версии 0.1.0

Примеры

Год по шагам

<div class="stack">
  <article class="stack__c">
    <div><div class="stack__step">01</div><div class="stack__when">Через неделю</div></div>
    <div class="stack__b">
      <h3>Три стенда и сервис на них</h3>
      <p>Не прочитано про стенды — собрано и работает. Локальный, VPS и облако, на всех трёх один и тот же сервис.</p>
      <div class="tags"><span class="tag">Терминал</span><span class="tag tag--filled">Стенды</span><span class="tag">Первый результат</span></div>
    </div>
  </article>
  <article class="stack__c">
    <div><div class="stack__step">02</div><div class="stack__when">Через месяц</div></div>
    <div class="stack__b">
      <h3>Командная строка перестаёт пугать</h3>
      <p>Процессы, права, systemd, логи. Вы перестаёте гуглить одно и то же в третий раз — потому что понимаете, что происходит.</p>
      <div class="tags"><span class="tag">Linux</span><span class="tag">systemd</span><span class="tag tag--filled">Логи</span></div>
    </div>
  </article>
  <article class="stack__c">
    <div><div class="stack__step">03</div><div class="stack__when">Через три месяца</div></div>
    <div class="stack__b">
      <h3>Сеть читается от кадра до HTTPS</h3>
      <p>Вы локализуете сетевую проблему вместо угадывания.</p>
      <div class="tags"><span class="tag">TCP/IP</span><span class="tag">DNS</span><span class="tag tag--safety">TLS</span></div>
    </div>
  </article>
</div>

Установка

bukatchuk-ui add stack

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

Файлы

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

Вставка для Jekyll

{%- comment -%}
  Путь по шагам. Параметр: steps — список с полями step, when, title, text, tags (список {text, style: filled | safety}).
  Пример: {% include ui/stack.html steps=site.data.pacing.steps %}
{%- endcomment -%}
<div class="stack">
  {%- for s in include.steps %}
  <article class="stack__c rv">
    <div><div class="stack__step">{{ s.step }}</div><div class="stack__when">{{ s.when }}</div></div>
    <div class="stack__b">
      <h3>{{ s.title }}</h3>
      <p>{{ s.text }}</p>
      {%- if s.tags %}
      <div class="tags">{% for t in s.tags %}<span class="tag{% if t.style == 'filled' %} tag--filled{% endif %}{% if t.style == 'safety' %} tag--safety{% endif %}">{{ t.text }}</span>{% endfor %}</div>
      {%- endif %}
    </div>
  </article>
  {%- endfor %}
</div>