# Дизайн-система Tabler

## Предпросмотр интерфейса дизайн-системы Tabler

Изучайте решения и варианты обложек, добавляйте проверенный контрольный этап и переключайте нативный режим цвета.

## Справочник по дизайн-системе Tabler

Скомпилированные переменные CSS версии 1.6.1. В этой версии используются примитивы OKLCH и light-dark()/color-mix() в семантических ролях; старые примеры Tabler на основе hex не следует считать той же темой. Ниже приведены фактические значения по умолчанию в установленной версии.

### Цвета статусов и действий по умолчанию

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --tblr-primary | oklch(54.6% 0.1724 254.2deg) | Роль основного действия. |
| --tblr-secondary | oklch(55.55% 0 0deg) | Вторичная роль. |
| --tblr-success | oklch(67.38% 0.1885 145.43deg) | Роль успешного состояния. |
| --tblr-info | oklch(66.26% 0.1358 246.81deg) | Информационная роль. |
| --tblr-warning | oklch(77.02% 0.1658 71.02deg) | Роль предупреждения. |
| --tblr-danger | oklch(58.29% 0.1941 25.59deg) | Роль опасности. |
| --tblr-purple | oklch(57.83% 0.2186 319.15deg) | Цвет категории прототипа в этом приложении. |
| --tblr-body-color | light-dark(oklch(26.86% 0 0deg), oklch(92.19% 0 0deg)) | Цвет текста меняется в соответствии с текущей цветовой схемой. |
| --tblr-body-bg | light-dark(oklch(98.51% 0 0deg), oklch(20.46% 0 0deg)) | Фон страницы меняется в соответствии с цветовой схемой. |
| --tblr-bg-surface | light-dark(var(--tblr-bg-surface-primary), var(--tblr-gray-800)) | Роль фона карточек и поверхностей. |
### Основной шрифт и шкала скруглений

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --tblr-font-sans-serif | system-ui, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif | Системный стек шрифтов без засечек в установленной версии. |
| --tblr-body-font-size | 0.875rem | По умолчанию эквивалентно 14px при размере корневого элемента браузера 16px. |
| --tblr-body-font-weight | 400 | Обычная насыщенность основного текста. |
| --tblr-body-line-height | 1.4285714286 | Около 20px при размере основного текста по умолчанию. |
| --tblr-border-radius | 6px | Радиус по умолчанию — 6px. |
| --tblr-border-radius-sm | 4px | Малый радиус — 4px. |
| --tblr-border-radius-lg | 8px | Большой радиус — 8px. |
| --tblr-border-radius-xl | 1rem | Очень большой радиус — 1rem. |
| --tblr-border-radius-pill | 100rem | Скругление элементов-«пилюль». |
### Отступы и геометрия нативной хронологии

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --tblr-spacer-0 | 0 | Именованное значение отступа в нативной реализации. |
| --tblr-spacer-1 | 0.25rem | Именованное значение отступа в нативной реализации. |
| --tblr-spacer-2 | 0.5rem | Именованное значение отступа в нативной реализации. |
| --tblr-spacer-3 | 1rem | Именованное значение отступа в нативной реализации. |
| --tblr-spacer-4 | 1.5rem | Именованное значение отступа в нативной реализации. |
| --tblr-spacer-5 | 2rem | Именованное значение отступа в нативной реализации. |
| --tblr-spacer-6 | 2.5rem | Именованное значение отступа в нативной реализации. |
| --tblr-page-padding | var(--tblr-spacer-3) | Переменная интервала между страницей и хронологией; адаптивные переопределения могут изменить её. |
| --tblr-card-spacer-x | 1.25rem | Горизонтальный внутренний отступ тела карточки по умолчанию. |
| --tblr-card-spacer-y | 1.25rem | Вертикальный внутренний отступ тела карточки по умолчанию. |
| --tblr-timeline-icon-size | 2.5rem | Узел-иконка размером 40px при размере корневого элемента по умолчанию 16px. |
### Исходные решения для журнала

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Project layout | col-lg-8 + col-lg-4 | Нативная сетка; две колонки начиная с контрольной точки lg. |
| Page padding | 32px; 24px 14px below 650px | Исходный внутренний отступ приложения. |
| Journal title | 32px / 1.2; 27px on mobile | Исходное переопределение заголовка страницы. |
| Cover studies | 155px tall; 120px on mobile | Исходное декоративное оформление CSS. |
## Полное руководство по дизайн-системе Tabler

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Дизайн-система Tabler: используйте тему, соответствующую версии Tabler

### Используйте тему, соответствующую версии Tabler

> Журнал проекта создан с помощью Tabler 1.6.1. В скомпилированной палитре используются цвета OKLCH, а семантические переменные используют light-dark и color-mix. Поэтому в справочнике приведены фактические выражения, а не скопированные из более раннего руководства Bootstrap или Tabler шестнадцатеричные значения. Основное действие, значки статусов и роли поверхностей взяты из установленной версии.

Tabler расширяет набор компонентов Bootstrap собственными шаблонами компоновки и представления информации. В этом образце используются нативные классы хронологии, заголовка страницы, datagrid и аватара наряду со знакомыми карточками, формами и модальным окном. Благодаря этим деталям перед нами композиция Tabler, а не обычная сетка карточек с другим логотипом.

Прочитать вспомогательную спецификацию

## Режим цвета дизайн-системы Tabler меняет не только текст, но и поверхности

### Режим цвета меняет не только текст, но и поверхности

Переключатель темы меняет data-bs-theme на элементе html и обновляет собственное состояние нажатия и текст действия. Семантические выражения Tabler выбирают светлые или тёмные значения. Для этого простого примера с двумя состояниями отдельный менеджер темы JavaScript не нужен, а выбранное предпочтение не сохраняется за пределами страницы.

Для меток «Решение», «Прототип» и «Ревью» используются встроенные классы с синим, фиолетовым и зелёным оттенками. Текстовые подписи сохраняют смысл без опоры только на цвет. Иллюстрации для изучения обложек сохраняют исходную палитру, напоминающую бумагу, в обоих режимах; окружающие карточки, страница и текст используют настоящую тему компонентов.

Прочитать вспомогательную спецификацию

## Дизайн-система Tabler: компактный основной текст и отдельная иерархия заголовков страницы

### Компактный размер основного текста и отдельная иерархия страницы

Размер основного текста по умолчанию — 0.875rem, высота строки — около 1.4286; при корневом размере шрифта в шестнадцать пикселей это даёт примерно четырнадцать пикселей. В установленном наборе шрифтов используется системный шрифт без засечек, поэтому для этого предпросмотра не нужен удалённый шрифт. В заголовках карточек и метаданных сохраняются встроенные классы, а для заголовка страницы задан исходный размер в тридцать два пикселя.

Встроенные значения отступов последовательно увеличиваются: 0, 0.25, 0.5, 1, 1.5, 2 и 2.5rem. Это именованные переменные установленного CSS, а не предполагаемая шкала. Внутренние отступы тела карточки по умолчанию равны 1.25rem в обоих направлениях. Узел временной шкалы имеет размер 2.5rem, а соединитель использует переменную отступа страницы, чтобы соединить записи.

Прочитать вспомогательную спецификацию

## Дизайн-система Tabler: временная шкала — это больше, чем вертикальная линия

### Хронология — это не просто вертикальная граница

Каждая контрольная точка — это элемент списка timeline-event с timeline-event-icon и timeline-event-card. Встроенный CSS располагает узел, рисует соединитель между всеми записями, кроме последней, и смещает карточку с содержимым на ширину узла плюс отступ страницы. В этом примере линия не имитируется фоновой картинкой, а для каждой карточки не используются абсолютные координаты.

Содержимое карточек различается. В одной зафиксировано структурное решение, в другой размещены три настоящих эскиза обложек, в третьей — результаты ревью источников. Контекст проекта расположен за пределами последовательности: формат и текущий фокус — постоянные характеристики, а не события с датой. На небольших экранах боковая панель следует за временной шкалой в порядке документа.

Прочитать вспомогательную спецификацию

## Дизайн-система Tabler: используйте datagrid для небольших групп меток и значений

### Используйте Datagrid для небольших групп меток и значений

В карточке «Контекст проекта» пары datagrid-item, datagrid-title и datagrid-content. Формат, команда, контрольные точки и текущий фокус — равноправные характеристики, поэтому они представлены в виде компактного встроенного datagrid, а не таблицы с повторяющимися заголовками строк. Для аватаров используются инициалы, поэтому удалённые изображения не нужны.

В этом примере изменяется только количество контрольных точек. После добавления локальной записи оно увеличивается с трёх до четырёх, а исходное описание проекта остаётся без изменений. Так исключаются выдуманные метрики панели: число напрямую соответствует видимым записям в списке.

Прочитать вспомогательную спецификацию

## Дизайн-система Tabler: встроенное модальное окно управляет видимостью и фокусом

### Встроенный модальный компонент управляет видимостью и фокусом

Кнопка «Добавить контрольную точку» открывает встроенное модальное окно с помощью data-bs-toggle и data-bs-target. Реализацию модального окна обеспечивает входящий в комплект Tabler JavaScript. Обработчик события shown.bs.modal устанавливает фокус на поле заголовка после завершения перехода, когда поле уже видно. Кнопки «Закрыть» и «Отмена» используют data-bs-dismiss и следуют тому же жизненному циклу компонента.

В модальном окне находится настоящая форма. Атрибуты обязательного поля и ограничения длины отклоняют незаполненные поля до запуска обработчика отправки. Обработчик дополнительно проверяет длину после удаления пробелов по краям: строка, состоящая только из пробелов, не может служить осмысленным заголовком или пояснением. При ошибке введённый текст сохраняется, чтобы его можно было исправить; форма очищается только после успешного добавления записи.

1. Откройте модальное окно и отправьте пустые поля, чтобы проверить первое поле с ошибкой.

2. Укажите заголовок, выберите тип контрольной точки и объясните причину.

3. Отправьте форму и убедитесь, что новая запись и количество в контексте обновились вместе.

Прочитать вспомогательную спецификацию

## Дизайн-система Tabler: безопасно добавляйте текст и обозначайте локальный характер записи

### Добавляйте безопасный текст и обозначайте границы локальной реализации

Приложение создаёт заготовку карточки известной структуры и вставляет заголовок и пояснение с помощью textContent. Тональный класс выбирается только по фиксированному соответствию трёх типов из списка. Пользовательский текст никогда не подставляется в HTML карточки. Новая запись добавляется в начало списка и явно помечается как ЛОКАЛЬНАЯ ЗАПИСЬ, а не снабжается выдуманной серверной отметкой времени.

После вставки существующий экземпляр модального окна закрывается, а в уведомлении о состоянии называется новая контрольная точка. В уведомлении прямо сказано, что данные службы проекта не обновлялись. Для настоящего совместного журнала потребовались бы сохранение данных, сведения об авторе и гарантии порядка записей; локальное добавление в DOM таких возможностей не обеспечивает.

Прочитать вспомогательную спецификацию

## Дизайн-система Tabler: чёткий контент на узкой временной шкале

### Сохраняйте разборчивость плотного содержимого узкой хронологии

В основной сетке используются col-lg-8 и col-lg-4. Ниже встроенной большой контрольной точки контекста проекта располагается под журналом. В исходной таблице стилей для небольших экранов сокращён боковой отступ временной шкалы, группам заголовков и значков разрешено переноситься, а эскизы обложек уменьшены; тексты и действия при этом остаются прежними.

Временная шкала может стать тесной, если за ширину одновременно конкурируют столбец со значком, внутренние отступы карточки и длинный заголовок. В мобильном примере узел остаётся стабильным ориентиром, но отступ уменьшен. Исходные эскизы обложек по-прежнему представлены тремя небольшими вариантами сравнения, поскольку важно показать их взаимосвязь; подписи к ним дополняют соседний поясняющий абзац.

- Сохраняйте читаемость заголовка и типа контрольной точки при переносе строк.

- Сохраняйте текст пояснения, а не обрезайте каждую запись временной шкалы.

- На мобильных устройствах размещайте карточку контекста после основного содержимого.

Прочитать вспомогательную спецификацию

## Дизайн-система Tabler: подключите согласованную пару CSS и JavaScript

### Подключайте согласованную пару CSS и JavaScript

В настройке используется @tabler/core 1.6.1, а его ресурсы из dist копируются в локальную общедоступную директорию. Подключите tabler.min.css перед таблицей стилей приложения, а tabler.min.js — перед локальным кодом взаимодействия. Второй, не связанный с ними пакет Bootstrap может дважды инициализировать те же атрибуты данных; в этом примере используется только согласованный пакет Tabler.

В текущей таблице стилей используются современные функции работы с цветом. При адаптации для продукта с требованиями к поддержке старых браузеров изучите рекомендации Tabler по совместимости с браузерами. Локальный пример проверен в Chromium: проверялись встроенная валидация модального окна, добавление записи во временную шкалу, тёмный режим и макет шириной 390px. Это не готовое к выпуску решение и не гарантия работы во всех возможных браузерах.

Прочитать вспомогательную спецификацию

## Tabler Примеры компонентов дизайн-системы

### Временная шкала, карточка контекста и модальное окно записи

Структура встроенных компонентов timeline-event, card, datagrid, badge и modal.

```
<main class="project-log"><header class="page-header d-print-none"><div class="row align-items-center"><div class="col"><div class="page-pretitle">TABLER · PROJECT JOURNAL</div><h1 class="page-title">Atlas field notes</h1><p class="text-secondary mt-2 mb-0">Decisions, prototypes and review checkpoints for a small editorial project.</p></div><div class="col-auto d-flex gap-2"><button id="theme" class="btn" aria-pressed="false">Dark mode</button><button id="add" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#entry-modal">Add checkpoint</button></div></div></header><div class="row g-4 mt-1"><section class="col-lg-8" aria-label="Project checkpoints"><ul id="timeline" class="timeline"><li class="timeline-event"><div class="timeline-event-icon bg-blue-lt" aria-hidden="true">AM</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">A clearer route through the issue</h2><span class="badge bg-blue-lt">Decision</span></div><div class="text-secondary small mb-3">Alex Morgan · 02 OCT</div><p class="mb-0">Group the field essays by landscape rather than author. Each chapter opens with a short map and a single question.</p></div></div></li><li class="timeline-event"><div class="timeline-event-icon bg-purple-lt" aria-hidden="true">JC</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">Three cover directions</h2><span class="badge bg-purple-lt">Prototype</span></div><div class="text-secondary small mb-3">Jules Chen · 01 OCT</div><div class="cover-strip" aria-label="Three original cover studies"><div><b>ATLAS</b><i></i><small>RIDGE / 01</small></div><div><b>ATLAS</b><i></i><small>RIVER / 02</small></div><div><b>ATLAS</b><i></i><small>PLAIN / 03</small></div></div><p class="mt-3 mb-0">Compare the quiet title treatment against the stronger geographic silhouette before selecting a direction.</p></div></div></li><li class="timeline-event"><div class="timeline-event-icon bg-green-lt" aria-hidden="true">SR</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">Reference package reviewed</h2><span class="badge bg-green-lt">Review</span></div><div class="text-secondary small mb-3">Sam Rivera · 30 SEP</div><p class="mb-0">Image captions, credit lines and print dimensions are recorded alongside each selected reference.</p></div></div></li></ul></section><aside class="col-lg-4"><div class="card"><div class="card-header"><h2 class="card-title">Project context</h2></div><div class="card-body"><div class="datagrid"><div class="datagrid-item"><div class="datagrid-title">Format</div><div class="datagrid-content">Editorial field journal</div></div><div class="datagrid-item"><div class="datagrid-title">Team</div><div class="datagrid-content"><span class="avatar avatar-xs me-1">AM</span><span class="avatar avatar-xs me-1">JC</span><span class="avatar avatar-xs">SR</span></div></div><div class="datagrid-item"><div class="datagrid-title">Checkpoints</div><div id="count" class="datagrid-content">3 recorded</div></div><div class="datagrid-item"><div class="datagrid-title">Current focus</div><div class="datagrid-content">Cover selection</div></div></div></div><div class="card-footer text-secondary">Sample project. New entries stay in this page.</div></div><div class="card mt-4"><div class="card-body"><h2 class="card-title">A useful checkpoint</h2><p class="text-secondary">Record the decision and the reason together. A future reader should understand what changed without reopening the meeting.</p><p class="mb-0 small">Choose Decision, Prototype or Review when adding a local entry.</p></div></div></aside></div><div id="notice" class="alert alert-success mt-3" role="status" hidden></div></main><div id="entry-modal" class="modal modal-blur fade" tabindex="-1" aria-labelledby="entry-title" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><form id="entry-form"><div class="modal-header"><h2 id="entry-title" class="modal-title">Add a local checkpoint</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div class="mb-3"><label for="entry-name" class="form-label">Title</label><input id="entry-name" class="form-control" required minlength="5" maxlength="80" placeholder="What changed?"></div><div class="mb-3"><label for="entry-type" class="form-label">Kind</label><select id="entry-type" class="form-select"><option>Decision</option><option>Prototype</option><option>Review</option></select></div><div><label for="entry-detail" class="form-label">Reason or evidence</label><textarea id="entry-detail" class="form-control" required minlength="15" maxlength="360" rows="4" placeholder="Explain why this checkpoint matters."></textarea></div></div><div class="modal-footer"><button type="button" class="btn" data-bs-dismiss="modal">Cancel</button><button class="btn btn-primary" type="submit">Add to journal</button></div></form></div></div></div>
```

Справочник по коду

- Временная шкала — настоящий список, элементы которого читаются по порядку.

- В контексте проекта используются пары заголовка и содержимого datagrid.

- Для кнопки открытия модального окна используются совместимые с Bootstrap атрибуты данных API.

### Проверенное локальное добавление контрольной точки

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

```
const q=s=>document.querySelector(s),modalEl=q('#entry-modal');let count=3;
modalEl.addEventListener('shown.bs.modal',()=>q('#entry-name').focus());
q('#theme').onclick=e=>{let dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';e.currentTarget.setAttribute('aria-pressed',String(dark));e.currentTarget.textContent=dark?'Light mode':'Dark mode';};
q('#entry-form').onsubmit=e=>{e.preventDefault();const title=q('#entry-name'),detail=q('#entry-detail'),kind=q('#entry-type').value;if(title.value.trim().length<5){title.setCustomValidity('Use at least five non-space characters.');title.reportValidity();return;}if(detail.value.trim().length<15){detail.setCustomValidity('Use at least fifteen non-space characters.');detail.reportValidity();return;}const li=document.createElement('li');li.className='timeline-event';const color={Decision:'blue',Prototype:'purple',Review:'green'}[kind];li.innerHTML=`<div class="timeline-event-icon bg-${color}-lt" aria-hidden="true">YOU</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1"></h2><span class="badge bg-${color}-lt"></span></div><div class="text-secondary small mb-3">You · LOCAL ENTRY</div><p class="mb-0"></p></div></div>`;li.querySelector('h2').textContent=title.value.trim();li.querySelector('.badge').textContent=kind;li.querySelector('p').textContent=detail.value.trim();q('#timeline').prepend(li);q('#count').textContent=`${++count} recorded`;tabler.Modal.getInstance(modalEl).hide();q('#notice').hidden=false;q('#notice').textContent=`Local ${kind.toLowerCase()} added: ${title.value.trim()}. No project service was updated.`;e.target.reset();};['#entry-name','#entry-detail'].forEach(s=>q(s).oninput=e=>e.target.setCustomValidity(''));
```

Справочник по коду

- Введённые пользователем строки присваиваются через textContent.

- Форма модального окна очищается только после добавления корректной записи.

- В уведомлении указано, что данные службы проекта не обновлялись.

### Исходный макет журнала и эскизы обложек

Адаптация встроенных компонентов Tabler для разных экранов.

```
html,body{min-height:0;height:auto}body{margin:0}.project-log{max-width:1160px;padding:32px;margin:auto}.project-log .page-header{margin:0 0 24px}.project-log .page-title{font-size:32px;line-height:1.2}.cover-strip{display:flex;gap:12px}.cover-strip>div{flex:1;min-width:0;height:155px;padding:14px;background:#d6dfd2;color:#334834;position:relative;overflow:hidden;border-radius:4px}.cover-strip>div:nth-child(2){background:#cbdbe3;color:#2d4857}.cover-strip>div:nth-child(3){background:#e9d9bc;color:#6a5439}.cover-strip b{letter-spacing:.15em;font-size:14px}.cover-strip i{position:absolute;width:120px;height:90px;border-radius:50%;background:currentColor;opacity:.2;left:20%;top:38%;transform:rotate(-25deg)}.cover-strip>div:nth-child(2) i{width:40px;height:150px;top:30%;left:50%;border-radius:40%}.cover-strip>div:nth-child(3) i{width:160px;height:60px;top:45%;left:10%;border-radius:0;transform:rotate(-12deg)}.cover-strip small{position:absolute;bottom:12px;left:14px;font-size:9px;letter-spacing:.12em}[hidden]{display:none!important}.timeline-event-card .badge{height:fit-content;white-space:nowrap}.timeline-event-card p{line-height:1.65}.timeline-event-icon{font-size:11px;font-weight:700}@media(max-width:650px){.project-log{padding:24px 14px}.project-log .page-title{font-size:27px}.page-header .col-auto{width:100%;margin-top:16px}.cover-strip{gap:6px}.cover-strip>div{height:120px;padding:8px}.cover-strip b{font-size:10px}.cover-strip small{left:8px;font-size:7px}.timeline-event-card .d-flex{flex-wrap:wrap}.timeline-event-card{margin-inline-start:calc(var(--tblr-timeline-icon-size) + 12px)}}
```

Справочник по коду

- Иллюстрации изображают три вымышленных дизайн-проекта.

- Для встраивания используется высота по содержимому документа.

## Tabler Настройка AI-агента для дизайн-системы

### Отправная точка для реализации

Проверено на Tabler 1.6.1. Сохраните приложенные таблицу стилей и модуль приложения как style.css и app.js. Используются атрибуты данных API встроенного модального окна. Обёртка HTML включает всю разметку body; сохраните предоставленные примеры взаимодействия и CSS под указанными здесь именами файлов.

```
<!-- npm install @tabler/core@1.6.1 -->
<!-- Copy node_modules/@tabler/core/dist to public/vendor/tabler. -->
<html lang="en" data-bs-theme="light">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/vendor/tabler/css/tabler.min.css">
<link rel="stylesheet" href="style.css">
<main class="project-log"><header class="page-header d-print-none"><div class="row align-items-center"><div class="col"><div class="page-pretitle">TABLER · PROJECT JOURNAL</div><h1 class="page-title">Atlas field notes</h1><p class="text-secondary mt-2 mb-0">Decisions, prototypes and review checkpoints for a small editorial project.</p></div><div class="col-auto d-flex gap-2"><button id="theme" class="btn" aria-pressed="false">Dark mode</button><button id="add" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#entry-modal">Add checkpoint</button></div></div></header><div class="row g-4 mt-1"><section class="col-lg-8" aria-label="Project checkpoints"><ul id="timeline" class="timeline"><li class="timeline-event"><div class="timeline-event-icon bg-blue-lt" aria-hidden="true">AM</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">A clearer route through the issue</h2><span class="badge bg-blue-lt">Decision</span></div><div class="text-secondary small mb-3">Alex Morgan · 02 OCT</div><p class="mb-0">Group the field essays by landscape rather than author. Each chapter opens with a short map and a single question.</p></div></div></li><li class="timeline-event"><div class="timeline-event-icon bg-purple-lt" aria-hidden="true">JC</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">Three cover directions</h2><span class="badge bg-purple-lt">Prototype</span></div><div class="text-secondary small mb-3">Jules Chen · 01 OCT</div><div class="cover-strip" aria-label="Three original cover studies"><div><b>ATLAS</b><i></i><small>RIDGE / 01</small></div><div><b>ATLAS</b><i></i><small>RIVER / 02</small></div><div><b>ATLAS</b><i></i><small>PLAIN / 03</small></div></div><p class="mt-3 mb-0">Compare the quiet title treatment against the stronger geographic silhouette before selecting a direction.</p></div></div></li><li class="timeline-event"><div class="timeline-event-icon bg-green-lt" aria-hidden="true">SR</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">Reference package reviewed</h2><span class="badge bg-green-lt">Review</span></div><div class="text-secondary small mb-3">Sam Rivera · 30 SEP</div><p class="mb-0">Image captions, credit lines and print dimensions are recorded alongside each selected reference.</p></div></div></li></ul></section><aside class="col-lg-4"><div class="card"><div class="card-header"><h2 class="card-title">Project context</h2></div><div class="card-body"><div class="datagrid"><div class="datagrid-item"><div class="datagrid-title">Format</div><div class="datagrid-content">Editorial field journal</div></div><div class="datagrid-item"><div class="datagrid-title">Team</div><div class="datagrid-content"><span class="avatar avatar-xs me-1">AM</span><span class="avatar avatar-xs me-1">JC</span><span class="avatar avatar-xs">SR</span></div></div><div class="datagrid-item"><div class="datagrid-title">Checkpoints</div><div id="count" class="datagrid-content">3 recorded</div></div><div class="datagrid-item"><div class="datagrid-title">Current focus</div><div class="datagrid-content">Cover selection</div></div></div></div><div class="card-footer text-secondary">Sample project. New entries stay in this page.</div></div><div class="card mt-4"><div class="card-body"><h2 class="card-title">A useful checkpoint</h2><p class="text-secondary">Record the decision and the reason together. A future reader should understand what changed without reopening the meeting.</p><p class="mb-0 small">Choose Decision, Prototype or Review when adding a local entry.</p></div></div></aside></div><div id="notice" class="alert alert-success mt-3" role="status" hidden></div></main><div id="entry-modal" class="modal modal-blur fade" tabindex="-1" aria-labelledby="entry-title" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><form id="entry-form"><div class="modal-header"><h2 id="entry-title" class="modal-title">Add a local checkpoint</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div class="mb-3"><label for="entry-name" class="form-label">Title</label><input id="entry-name" class="form-control" required minlength="5" maxlength="80" placeholder="What changed?"></div><div class="mb-3"><label for="entry-type" class="form-label">Kind</label><select id="entry-type" class="form-select"><option>Decision</option><option>Prototype</option><option>Review</option></select></div><div><label for="entry-detail" class="form-label">Reason or evidence</label><textarea id="entry-detail" class="form-control" required minlength="15" maxlength="360" rows="4" placeholder="Explain why this checkpoint matters."></textarea></div></div><div class="modal-footer"><button type="button" class="btn" data-bs-dismiss="modal">Cancel</button><button class="btn btn-primary" type="submit">Add to journal</button></div></form></div></div></div>

<script src="/vendor/tabler/js/tabler.min.js"></script>
<script src="app.js"></script>
<!-- The bundle exposes tabler.Modal; no second Bootstrap bundle is needed. -->
</html>
```

### Запрос для вашего проекта

```
Используйте Tabler 1.6.1, чтобы воспроизвести журнал проекта Atlas с временной шкалой, карточками контекста, datagrid и встроенным Modal. Форму проверки контрольной точки держите отдельно от зафиксированной временной шкалы: отмена не меняет журнал, а корректная отправка добавляет введённую контрольную точку в локальные записи. Сохраните атрибуты data-bs, соответствующий пакет Tabler и оформление тем. Оставьте исходные эскизы обложек декоративными, а текст контрольных точек — читаемым на узких экранах. Не создавайте впечатления, будто представлен полный перечень инфраструктуры или выполнена внешняя публикация.
```

## Tabler Источники и область применения дизайн-системы

Tabler 1.6.1. Переменные темы и встроенные компоненты отделены от исходного содержания проекта и иллюстраций обложек. Новые контрольные точки остаются локальными.

- Установка Ресурсы согласованного пакета.

- Цвета Справочник ролей темы.

- Типографика Стили встроенных компонентов для текста.

- Временная шкала Структура узла, соединителя и карточки события.

- Datagrid Компактные характеристики проекта.

- Модальное окно Настройка встроенного модального окна.

- Режимы цвета Переключатель светлой и тёмной темы.

## Tabler Связанные ресурсы дизайн-системы

### Tamagui

Изучите актуальные категории токенов Tamagui версии v5 и светлую и тёмную синие темы на примере полноценной доски привычек из нативных компонентов: с валидацией, прогрессом и восстановлением после пустого состояния.

### UIkit

UIkit сочетает фреймворк CSS, настройку Less и компоненты JavaScript, управляемые атрибутами. Его Switcher, Accordion и адаптивная сетка вместе используются в приведённом ниже планировщике мастер-классов, показывая, где заканчивается встроенное поведение компонентов и начинается состояние выбора в приложении.

### Vant

Мобильный сценарий выбора адреса на основе Vant 4: настоящие переменные CSS, управляемая идентификация адреса, проверка полей, переключение темы и явное сохранение только локально.


- [Справочник по реализации](https://docs.tabler.io/ui/components/timeline)
- [Источник](https://docs.tabler.io/ui/base/colors)
- [Источник](https://docs.tabler.io/ui/base/typography)
- [Источник](https://docs.tabler.io/ui/components/timeline)
- [Источник](https://docs.tabler.io/ui/components/card)
- [Прочитать вспомогательную спецификацию](https://docs.tabler.io/ui/getting-started/upgrade-to-1.6)
- [Прочитать вспомогательную спецификацию](https://docs.tabler.io/ui/getting-started/color-modes)
- [Прочитать вспомогательную спецификацию](https://docs.tabler.io/ui/base/typography)
- [Прочитать вспомогательную спецификацию](https://docs.tabler.io/ui/components/timeline)
- [Прочитать вспомогательную спецификацию](https://docs.tabler.io/ui/components/data-grid)
- [Прочитать вспомогательную спецификацию](https://docs.tabler.io/ui/components/modal)
- [Прочитать вспомогательную спецификацию](https://docs.tabler.io/ui/layout/page-layouts)
- [Прочитать вспомогательную спецификацию](https://docs.tabler.io/ui/getting-started/installation)
- [Справочник по коду](https://docs.tabler.io/ui/components/timeline)
- [Справочник по коду](https://docs.tabler.io/ui/components/modal)
- [Справочник по коду](https://docs.tabler.io/ui/layout/page-layouts)
- [Установка Ресурсы согласованного пакета.](https://docs.tabler.io/ui/getting-started/installation)
- [Цвета Справочник ролей темы.](https://docs.tabler.io/ui/base/colors)
- [Типографика Стили встроенных компонентов для текста.](https://docs.tabler.io/ui/base/typography)
- [Временная шкала Структура узла, соединителя и карточки события.](https://docs.tabler.io/ui/components/timeline)
- [Datagrid Компактные характеристики проекта.](https://docs.tabler.io/ui/components/data-grid)
- [Модальное окно Настройка встроенного модального окна.](https://docs.tabler.io/ui/components/modal)
- [Режимы цвета Переключатель светлой и тёмной темы.](https://docs.tabler.io/ui/getting-started/color-modes)