дизайн-система .italia.

Система и реализация дизайн-система .italia

Designers Italia и её библиотека кода

Designers Italia — это не только пакет CSS: система включает рекомендации по проектированию услуг, наборы инструментов и ресурсы для реализации. В этом примере рассматривается документированная реализация Bootstrap Italia версии 2.18.3. Установка библиотеки сама по себе не означает, что дизайн государственной услуги завершён или что выполнены все требования к муниципальному сайту.

В проверенном выпуске Bootstrap Italia включает Bootstrap 5.2.3 и настраивает его. Не подключайте поверх него второй стандартный пакет Bootstrap. В предварительном просмотре используются штатные CSS и локально подключённые файлы шрифта Titillium Web; сценарий планирования посещения библиотеки из трёх этапов реализован отдельно.

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

Типографика и точные значения дизайн-система .italia

У каждого шрифта своя задача

Titillium Web — основной шрифт интерфейса. Lora — шрифт с засечками для длинных текстов, а Roboto Mono подходит для кода и материалов с фиксированной шириной символов. В предварительном просмотре загружаются используемые начертания Titillium Web; лицензия на шрифт сохранена, а системный шрифт не подставляется без уведомления.

Размер основного текста остаётся 16px. Заголовки меняются при ширине 576px: на небольшом экране H1 имеет размер 40px и высоту строки 48px, а в установленном CSS — 48px и 56px соответственно. В таблице документации для настольных экранов указана высота строки 60px; в справочной таблице здесь приведены данные проверенного выпуска, а расхождение пояснено вместо объединения сведений из двух источников.

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

Адаптивные пороговые значения и отступы дизайн-система .italia

Два пороговых значения решают разные задачи

Пороговое значение для типографики — 576px, а оформление заголовка степпера меняется при ширине менее 992px. На компактных экранах остаются видны подпись текущего этапа и индекс n/total. Названия остальных этапов не ужимаются до нечитаемых колонок. Пользователь мобильного устройства должен получать сообщение о текущем этапе; в этом примере для этого используются фокус на заголовке и текст состояния для вспомогательных технологий.

Утилиты отступов соответствуют проверенной шкале rem: при стандартном размере корневого шрифта значения от 1 до 5 равны 4, 8, 16, 24 и 48px. Максимальная ширина контейнера сетки на xl составляет 1176px, а не стандартное значение Bootstrap, которое часто ошибочно вспоминают. Для отдельного плана явно выбрана меньшая максимальная ширина — 900px.

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

Структура степпера и распределение ответственности дизайн-система .italia

Заголовок не управляет сценарием

В документированной структуре отдельно представлены steppers-header, steppers-content и steppers-nav. Элементы списка заголовка получают классы confirmed и active; индекс показывает положение. Кнопкам «Назад» и «Далее» назначаются соответствующие классы. Эти классы задают оформление. Приложение должно самостоятельно определять, корректно ли заполнена текущая форма и можно ли перейти к следующему этапу.

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

<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Visit type <span class="visually-hidden">Completed</span></li>
      <li class="active" aria-current="step">Access note <span class="visually-hidden">Current step</span></li>
      <li>Review</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/3</span>
  </div>
  <div class="steppers-content" aria-live="polite">
    <h2>Add an access note</h2>
    <label for="note">Access note (optional)</label>
    <textarea id="note" class="form-control" rows="3"></textarea>
  </div>
  <nav class="steppers-nav" aria-label="Plan steps">
    <button class="btn btn-outline-primary steppers-btn-prev">Back</button>
    <button class="btn btn-primary steppers-btn-next">Continue</button>
  </nav>
</div>

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

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

Проверка данных и осмысленное отображение прогресса дизайн-система .italia

Переходите дальше только после обязательного выбора

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

Кнопка «Назад» возвращает к предыдущему этапу, не удаляя выбранный вариант и заметку. Кнопка «Начать заново» намеренно очищает оба значения и возвращает к началу. Финальный экран называется локальным планом: на нём не утверждается, что бронирование отправлено, одобрено или сохранено.

1. Нажмите «Далее», не выбрав ни один переключатель, и проверьте сообщение об ошибке.
2. Выберите тип посещения, добавьте короткую заметку и откройте экран проверки.
3. Вернитесь к заметке, убедитесь, что её текст сохранился, затем нажмите «Начать заново», чтобы очистить план.

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

Доступные состояния и фокус дизайн-система .italia

Согласуйте визуальное и озвучиваемое положение

У активного элемента списка есть aria-current="step" и скрытая визуально подпись текущего этапа. Для предыдущих этапов отображается текст о завершении, помимо класса confirmed. Компактный числовой индекс скрыт от вспомогательных технологий: положение уже обозначено текущим заголовком и семантикой этапа. При этом индекс остаётся видимым для визуальной ориентации.

Согласно официальным рекомендациям, для изменяющегося содержимого используется aria-live="polite", поскольку последовательность этапов размещена на одной странице. Кроме того, в примере фокус перемещается на новый заголовок, чтобы пользователям клавиатуры было проще начать чтение с нужного места. Проверьте это сочетание с поддерживаемыми вспомогательными технологиями: в более сложной форме объявления могут звучать слишком часто.

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

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

Штатные ресурсы и инициализация дизайн-система .italia

CSS, шрифты и необязательный JavaScript

Пакет включает CSS, собранный скрипт, исходные файлы шрифтов и SVG-спрайт. Для этого примера степпера нужны CSS и выбранные шрифты; логика навигации реализуется на уровне приложения. Другие виджеты автоматически инициализируются с помощью data-bs-toggle или документированных атрибутов данных. Не используйте автоматическую инициализацию одновременно со вторым экземпляром того же виджета, созданным вручную.

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

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

Границы интеграции дизайн-система .italia

Используйте набор инструментов, не создавая впечатления, что услуга уже предоставлена

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

В примере показано обычное посещение библиотеки без муниципального логотипа и официальной символики. Это учебный пример OpenDesign, а не услуга государственного органа. Сохраняйте это различие в прототипах, чтобы аккуратно оформленный экран проверки нельзя было принять за запись о реальном запросе.

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

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

<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Visit type <span class="visually-hidden">Completed</span></li>
      <li class="active" aria-current="step">Access note <span class="visually-hidden">Current step</span></li>
      <li>Review</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/3</span>
  </div>
  <div class="steppers-content" aria-live="polite">
    <h2>Add an access note</h2>
    <label for="note">Access note (optional)</label>
    <textarea id="note" class="form-control" rows="3"></textarea>
  </div>
  <nav class="steppers-nav" aria-label="Plan steps">
    <button class="btn btn-outline-primary steppers-btn-prev">Back</button>
    <button class="btn btn-primary steppers-btn-next">Continue</button>
  </nav>
</div>

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Prepare a library visit</title><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/bootstrap-italia.min.css"><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/fonts.css"><style>body{padding:32px 16px}main{max-width:900px;margin:auto}.steppers-content{padding:24px 0}.steppers-nav{display:flex;gap:16px;justify-content:space-between}.form-check{margin-bottom:16px}footer{font-size:14px;margin-top:32px;border-top:1px solid #ccc;padding-top:16px}[hidden]{display:none!important}.error{color:var(--bs-danger)}@media(max-width:575px){body{padding:24px 16px}}</style><main><p class="text-uppercase">Independent service example</p><h1>Prepare a library visit</h1><p class="lead">Choose a visit format, add a note and review your local plan.</p><div class="steppers"><div class="steppers-header"><ul id="steps"><li class="active" aria-current="step">Visit type <span class="visually-hidden">Current step</span></li><li>Access note</li><li>Review</li></ul><span class="steppers-index" id="index" aria-hidden="true">1/3</span></div><div class="steppers-content" aria-live="polite"><section data-step="0"><h2 tabindex="-1">Choose a visit type</h2><fieldset><legend class="visually-hidden">Visit type</legend><div class="form-check"><input id="guided" type="radio" name="visit" value="Guided introduction"><label for="guided">Guided introduction</label></div><div class="form-check"><input id="quiet" type="radio" name="visit" value="Quiet reading visit"><label for="quiet">Quiet reading visit</label></div></fieldset><p id="error" class="error" role="alert" hidden>Choose a visit type before continuing.</p></section><section data-step="1" hidden><h2 tabindex="-1">Add an access note</h2><p id="hint">Optional. Describe what would help you use the space; avoid sensitive personal information.</p><label for="note">Access note</label><textarea id="note" rows="3" class="form-control" aria-describedby="hint" maxlength="200"></textarea></section><section data-step="2" hidden><h2 tabindex="-1">Review your local plan</h2><dl><dt>Visit type</dt><dd id="review-type"></dd><dt>Access note</dt><dd id="review-note"></dd></dl><p>This is a local plan only. No booking or request has been sent.</p></section></div><nav class="steppers-nav" aria-label="Plan steps"><button id="back" class="btn btn-outline-primary steppers-btn-prev" disabled>Back</button><button id="next" class="btn btn-primary steppers-btn-next">Continue</button><button id="reset" class="btn btn-primary" hidden>Start again</button></nav></div><footer>Native Bootstrap Italia 2.18.3 CSS and Titillium Web. Original local planning flow; no municipal identity or booking service.</footer></main><script>let step=0;const labels=['Visit type','Access note','Review'];function render(){document.querySelectorAll('[data-step]').forEach(x=>x.hidden=Number(x.dataset.step)!==step);document.querySelectorAll('#steps li').forEach((li,i)=>{li.className=i===step?'active':i<step?'confirmed':'';li.removeAttribute('aria-current');li.textContent=labels[i];const state=document.createElement('span');state.className='visually-hidden';state.textContent=i===step?' Current step':i<step?' Completed':'';li.append(state);if(i===step)li.setAttribute('aria-current','step')});document.querySelector('#index').textContent=(step+1)+'/3';document.querySelector('#back').disabled=step===0;document.querySelector('#next').hidden=step===2;document.querySelector('#reset').hidden=step!==2;if(step===2){document.querySelector('#review-type').textContent=document.querySelector('[name=visit]:checked').value;document.querySelector('#review-note').textContent=document.querySelector('#note').value.trim()||'No note added'}document.querySelector('[data-step="'+step+'"] h2').focus()}document.querySelector('#next').onclick=()=>{if(step===0&&!document.querySelector('[name=visit]:checked')){document.querySelector('#error').hidden=false;document.querySelector('#guided').focus();return}document.querySelector('#error').hidden=true;step++;render()};document.querySelector('#back').onclick=()=>{step--;render()};document.querySelector('#reset').onclick=()=>{document.querySelectorAll('[name=visit]').forEach(x=>x.checked=false);document.querySelector('#note').value='';step=0;render()};</script></html>