Элементы
Типографика
Заголовки .h1–.h4, лид, абзац, цитата, списки, строчный код, мелкий и приглушённый текст на шкале из tokens.css.
Примеры
Заголовки и текст
Как мы держим аптайм 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>Цитата и списки
Нагрузку не победить мощностью, её побеждают очередями и честными лимитами.Из разбора ночного релиза
- Остановить выкатку новой версии
- Проверить длину очереди и число потребителей
- Записать вывод в журнал дежурства
- Открыть панель мониторинга
- Сверить график с последним релизом
- При необходимости откатить версию
<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
Файлы
| Файл | Назначение |
|---|---|
typography.css | стили |
example.html | образец разметки, в проект не копируется |
Варианты
| Класс | Назначение |
|---|---|
h1 | |
h2 | |
h3 | |
h4 | |
lead | |
text | |
small | |
text-muted | |
quote | |
list | |
code |