bukatchuk ui

Блоки

Вопросы и диалоги

Вопросы в колонках и диалоги «вопрос — ответ» с оранжевой линией сверху.

faq с версии 0.1.0

Примеры

Три вопроса перед решением
<div class="q">
  <div class="q__i">Сколько стоит ваш следующий год, если ничего не менять: те же задачи, та же ставка и растущее ощущение, что стек уходит вперёд?</div>
  <div class="q__i">Сколько вы уже потратили на курсы, которые бросили на середине, — и что из этого осталось?</div>
  <div class="q__i">Если бы порядок изучения был собран за вас, а практика лежала готовыми файлами, — сколько времени вы бы сэкономили?</div>
</div>
Реплики «вопрос — ответ»
<div class="beats">
  <div class="beat"><p class="beat__q">На собеседовании спросили, почему под не поднимается, — и ответить нечем, хотя в резюме написано «Kubernetes»?</p><p class="beat__a">Спрашивают не про инструмент. Спрашивают про то, что под ним, — и по формулировке вопроса это обычно видно заранее.</p></div>
  <div class="beat"><p class="beat__q">Учите то, что попалось в ленте: вчера сети, сегодня Ansible, послезавтра вышла статья про eBPF?</p><p class="beat__a">Ни одна тема не закрыта до конца, и непонятно, какая из них вообще ваша. Порядок важнее объёма.</p></div>
  <div class="beat"><p class="beat__q">Садились учиться уже несколько раз и бросали на втором месяце?</p><p class="beat__a">Результата ещё не видно, а вечера уже кончились. Это не про дисциплину.</p></div>
</div>

Установка

bukatchuk-ui add faq

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

Файлы

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

Вставка для Jekyll

{%- comment -%}
  Вопросы. Параметры: items — список строк (вопросы в колонках .q) или pairs — список {q, a} (диалоги .beats).
  Пример: {% include ui/faq.html items=site.data.questions.items %}
          {% include ui/faq.html pairs=site.data.beats.items %}
{%- endcomment -%}
{%- if include.pairs %}
<div class="beats">
  {%- for b in include.pairs %}
  <div class="beat rv"><p class="beat__q">{{ b.q }}</p><p class="beat__a">{{ b.a }}</p></div>
  {%- endfor %}
</div>
{%- else %}
<div class="q">
  {%- for i in include.items %}
  <div class="q__i rv">{{ i }}</div>
  {%- endfor %}
</div>
{%- endif %}