Дизайн-система Rivet.

Дизайн-система Rivet для задач университета

Система компонентов с точкой входа HTML

Rivet предоставляет CSS, JavaScript, утилитарные классы и макеты страниц для интерфейсов Университета Индианы. В рабочем примере напрямую используется браузерный пакет версии 2.9.1: для него не нужны ни React, ни компилятор компонентов. Это небольшая страница с описанием мастер-класса и дополнительной информацией о посещении, а не заявка на поступление, замаскированная под панель управления.

Айдентика учреждения и примерный контент разделены. Эта страница не воспроизводит официальный логотип IU, не регистрирует посетителей и не подтверждает существование реального объекта. Для университетского сервиса в рабочей среде используйте утверждённый фирменный стиль и соблюдайте установленный университетом порядок работы с контентом. Лицензия на код не превращает вымышленные сведения о мероприятии в официальную информацию.

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

Типографическая шкала и роли шрифтов в дизайн-системе Rivet

Задавайте точный размер текста с помощью утилитарных классов

Базовое семейство шрифтов без засечек в Rivet — BentonSans, семейство с засечками — GeorgiaPro. В локальном примере намеренно используются Arial и Georgia в качестве резервных шрифтов; удалённые шрифты не загружаются. Перед выпуском в рабочую среду необходимо проверить разрешения на использование институциональных шрифтов и способ их доставки, а не копировать файлы шрифтов из этого примера.

Числовая шкала основана на округлённой прогрессии «большая секунда». Для заголовка примера задан rvt-ts-32, а для заголовка панели — rvt-ts-23; в скомпилированной версии их размеры составляют 2rem и 1.4375rem соответственно. Базовый размер текста — 1rem. Для межстрочного интервала 1.5 используйте rvt-lh-base, для 1.2 — rvt-lh-tight, для 1.65 — rvt-lh-loose. Применяйте эти классы к текстовым элементам, чтобы элементы управления внутри контейнера не наследовали нежелательный размер заголовка.

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

Цвета и поверхности в дизайн-системе Rivet

Малиновый — не единственный цвет

В палитре для справки малиновый-500 (#990000) отличается от синего-500 (#006298). В примере малиновый используется сдержанно — для верхней линии; для интерактивных элементов применяются штатные компоненты Rivet. Цвет текста — чёрный-500 (#243142), фон вспомогательной информации — чёрный-000 (#f8f9fa), разделители — чёрный-100 (#e2e7e9). Это реальные значения из палитры, а не цвета, подобранные по снимку экрана.

Название цвета не гарантирует достаточную контрастность любого сочетания. Сохраняйте штатное отображение фокуса вкладки и её выбранного состояния вместе с видимым содержимым и значением aria-selected. Не обозначайте активную панель только малиновым цветом метки. Уведомление о вымышленном мероприятии в примере остаётся обычным читаемым текстом над переключателем.

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

Интервалы, ширина и скругления в дизайн-системе Rivet

Именованная шкала с продуманными крупными шагами

Шкала интервалов Rivet — не последовательность шагов по четыре пикселя. При корневом размере 16px она включает xxs 4px, xs 8px, sm 16px, md 24px, lg 32px, xl 40px, xxl 64px, 3-xl 128px и 4-xl 192px. В примере sm задаёт отступ страницы на мобильном экране, md — ритм рядом с панелью, а lg — крупные вертикальные интервалы.

Максимальная ширина области чтения в примере — 64rem; это решение для приложения, а не заявленный токен контейнера Rivet. Внутри этой области токен ширины 4-xl равен 48rem/768px, а spacing-4-xl — 12rem/192px. Одинаковый суффикс не означает одинаковое значение размера. Радиусы составляют .125rem для Radius-sm, .25rem для md и .5rem для lg; не придавайте всем компонентам одинаковый вид крупных карточек со скруглёнными углами.

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

Анатомия и состояния вкладок в дизайн-системе Rivet

Сначала сопоставьте значения данных, затем выполните инициализацию

Набор вкладок состоит из одной обёртки rvt-tabs, списка rvt-tabs__tablist с содержательной меткой aria-label, кнопок-переключателей и соседних панелей rvt-tabs__panel. Значения data-rvt-tab и data-rvt-tab-panel в каждой паре должны совпадать. Атрибут начального выбора data-rvt-tab-init задаётся панели, а не её кнопке. Rivet может генерировать идентификаторы, но явные пары упрощают изучение этого примера.

Вызов Rivet.init() добавляет роли вкладок, состояние выбора, связи между панелями и поведение для клавиатуры. Не создавайте второй обработчик клика, который независимо переключает скрытое состояние: при двух конкурирующих источниках состояния выбранная вкладка и видимая панель могут перестать соответствовать друг другу. Полная разметка ниже содержит оригинальный краткий текст; её можно разместить между тегами таблицы стилей и скрипта в разделе настройки.

<div class="rvt-tabs" data-rvt-tabs="visit">
  <div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
    <button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
    <button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
    <button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
    <h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
    <p>Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
    <h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
    <p>In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="access">
    <h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
    <p>The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.</p>
  </div>
</div>

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

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

Что в дизайн-системе Rivet следует размещать вне вкладок

Важную информацию о посещении оставьте на виду

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

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

• Используйте вкладки «Обзор», «Как добраться» и «Доступность» для отдельных пояснений, полезных сами по себе.
• Сроки, уведомления об отмене и основное действие оставьте видимыми вне панелей вкладок.
• Если читателю нужно одновременно сопоставить значения по нескольким категориям, используйте таблицу сравнения.

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

Адаптивность и управление с клавиатуры в дизайн-системе Rivet

Пять границ для мобильной вёрстки

Точки адаптивности Rivet — 30em, 46.25em, 67.5em, 78.75em и 87.5em. При стандартном начальном размере шрифта 16px это соответствует 480, 740, 1080, 1260 и 1400px. Средняя граница — 740px, а не заимствованное значение 768px. К имени адаптивного утилитарного класса добавляются точка адаптивности и суффикс -up, например rvt-ts-32-md-up.

Панель вкладок не должна превращаться в несколько строк. Оставляйте метки короткими и проверяйте, как именно текст выглядит на узком экране; уменьшение шрифта ради размещения не заменяет правильный выбор компонента навигации. При штатном управлении стрелки влево и вправо перемещают фокус между вкладками и зацикливают переход на краях списка. Нажатие Enter или Space активирует вкладку в фокусе. Скрытые панели не должны оставлять свои интерактивные элементы доступными для перемещения по порядку фокуса.

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

Установка и проверка примера в дизайн-системе Rivet

Браузерный пакет инициализируется один раз

В инструкции по установке закреплена версия 2.9.1 и предусмотрено копирование опубликованного CSS и минифицированного браузерного JavaScript в статическую директорию сайта. Предоставьте эти файлы через сервер, прежде чем вызывать Rivet.init(). Если фреймворк добавляет HTML позже, используйте документированный жизненный цикл интеграции JavaScript, а не рассчитывайте, что при первоначальном сканировании страницы новые узлы уже присутствовали.

Автономный пример использует эти официальные файлы CSS и JavaScript локально. Резервные шрифты и ширина обёртки заданы как явные переопределения на уровне приложения. В примере нет запроса на бронирование по сети, сохранения данных, аналитики или автоматически сформированного подтверждения. Штатные вкладки — единственное демонстрируемое взаимодействие.

1. Подключите локальную таблицу стилей и перед инициализацией проверьте наличие всех трёх переключателей вкладок и соответствующих панелей.
2. Инициализируйте Rivet, переключите каждую вкладку указателем, затем повторите с помощью клавиш со стрелками и Enter или Space.
3. На широком экране и узком мобильном устройстве проверьте выбранный переключатель, видимую панель, индикатор фокуса и ширину документа.

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

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

<div class="rvt-tabs" data-rvt-tabs="visit">
  <div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
    <button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
    <button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
    <button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
    <h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
    <p>Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
    <h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
    <p>In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="access">
    <h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
    <p>The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.</p>
  </div>
</div>

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Workshop visit — Rivet specimen</title><link rel="stylesheet" href="vendor/rivet-2.9.1/rivet.min.css"><style>:root{--rvt-font-sans:Arial,sans-serif;--rvt-font-serif:Georgia,serif}body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}body{border-top:8px solid #990000;margin:0;background:#fff;color:#243142}.shell{max-width:64rem;margin:auto;padding:2rem 1rem 3rem}.eyebrow{font-size:.875rem;letter-spacing:.06em;color:#4c5a69}.intro{max-width:48rem}.facts{display:flex;gap:1.5rem;flex-wrap:wrap;padding:1.5rem;margin:2rem 0;background:#f8f9fa;border:1px solid #e2e7e9}.facts p{margin:0}.facts strong{display:block;font-size:.875rem}.rvt-tabs__panel{min-height:13rem}footer{margin-top:2rem;padding-top:1rem;border-top:1px solid #e2e7e9;font-size:.875rem;color:#4c5a69}h1{margin:.5rem 0 1rem}@media(min-width:46.25em){.shell{padding:3rem 2rem}.rvt-tabs__panel{min-height:12rem}}</style></head><body><main class="shell"><p class="eyebrow">LEARNING STUDIO · RIVET COMPONENT EXAMPLE</p><h1 class="rvt-ts-32 rvt-text-bold rvt-lh-tight">Reading the archive</h1><p class="intro rvt-ts-18">A hands-on introduction to working with historical sources. Explore the visit information below.</p><div class="facts"><p><strong>Session</strong>Saturday · 10:00–11:30</p><p><strong>Format</strong>Small-group workshop</p><p><strong>Location</strong>Learning studio · Room 204</p></div><p class="rvt-ts-14 rvt-m-bottom-lg">Fictional event for interface demonstration. No reservation is made.</p><div class="rvt-tabs" data-rvt-tabs="visit">
  <div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
    <button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
    <button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
    <button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
    <h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
    <p>Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
    <h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
    <p>In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="access">
    <h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
    <p>The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.</p>
  </div>
</div><footer>Native Rivet 2.9.1 tabs · Arial font fallback · Original example content<br>Keyboard: use Left and Right to move between tabs, then Enter or Space to activate.</footer></main><script src="vendor/rivet-2.9.1/rivet.min.js"></script><script>Rivet.init();</script></body></html>