bukatchuk ui

Элементы

Типографика

Заголовки .h1–.h4, лид, абзац, цитата, списки, строчный код, мелкий и приглушённый текст на шкале из tokens.css.

typography с версии 0.1.0

Примеры

Заголовки и текст

Как мы держим аптайм 99,98%

Разбор полугода эксплуатации сервиса видеоконференций: что ломалось, как находили причины и что поменяли в дежурствах.

Дежурства

Дежурный получает оповещение, когда задержка ответа выше 300 мс дольше пяти минут. Первое действие — открыть панель и сверить график с последним релизом.

Порядок действий

Что проверить сначала

Обновлено 12/10/2026. Первая редакция: 03/04/2026.

<h1 class="h1">Как мы держим аптайм 99,98%</h1>
<p class="lead">Разбор полугода эксплуатации сервиса видеоконференций: что ломалось, как находили причины и что поменяли в дежурствах.</p>
<h2 class="h2">Дежурства</h2>
<p class="text">Дежурный получает оповещение, когда задержка ответа выше 300 мс дольше пяти минут. Первое действие — открыть панель и сверить график с последним релизом.</p>
<h3 class="h3">Порядок действий</h3>
<h4 class="h4">Что проверить сначала</h4>
<p class="small">Обновлено 12/10/2026. Первая редакция: <span class="text-muted">03/04/2026</span>.</p>
Цитата и списки
Нагрузку не победить мощностью, её побеждают очередями и честными лимитами.Из разбора ночного релиза
  • Остановить выкатку новой версии
  • Проверить длину очереди и число потребителей
  • Записать вывод в журнал дежурства
  1. Открыть панель мониторинга
  2. Сверить график с последним релизом
  3. При необходимости откатить версию
<blockquote class="quote">Нагрузку не победить мощностью, её побеждают очередями и честными лимитами.<cite class="quote__cite">Из разбора ночного релиза</cite></blockquote>
<ul class="list">
  <li>Остановить выкатку новой версии</li>
  <li>Проверить длину очереди и число потребителей</li>
  <li>Записать вывод в журнал дежурства</li>
</ul>
<ol class="list">
  <li>Открыть панель мониторинга</li>
  <li>Сверить график с последним релизом</li>
  <li>При необходимости откатить версию</li>
</ol>
Строчный код

Лимит задаётся параметром max_participants в файле meet.conf.

<p class="text">Лимит задаётся параметром <code class="code">max_participants</code> в файле <code class="code">meet.conf</code>.</p>

Установка

bukatchuk-ui add typography

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

Файлы

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

Варианты

КлассНазначение
h1
h2
h3
h4
lead
text
small
text-muted
quote
list
code