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

Версия и зависимости дизайн-системы Poncho

Система Bootstrap 3

Poncho добавляет стили государственных сервисов Аргентины поверх Bootstrap 3.4.1. На странице установки также упоминается экспериментальное направление Bootstrap 4; это не означает совместимость классов Bootstrap 5 с опубликованными примерами. В этом материале зафиксированы ar-poncho 2.0.320 и Bootstrap 3.4.1, чтобы можно было одновременно изучить устройство панелей и адаптивное поведение.

На баннере CSS указано v0.3.3, хотя установлен пакет версии 2.0.320. Ориентируйтесь на манифест пакета и lockfile, а не только на баннер. В независимом предпросмотре для панелей, кнопок и сетки используются нативные элементы CSS; фильтрация мероприятий реализована в исходном коде JavaScript и не является компонентом поиска Poncho.

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

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

Разрешение противоречий в сведениях о шрифтах

В актуальной документации по типографике для заголовков указан Lora, а для основного текста — Montserrat. Загруженная таблица стилей импортирует эти семейства, но также содержит устаревшие объявления Encode Sans. В README репозитория с инструкциями по настройке по-прежнему рекомендуется Encode Sans. Это реальное несоответствие версий и источников; перед миграцией в рабочую среду необходимо проверить итоговый каскад выбранного релиза, а не исходить из предположения, что все исторические упоминания описывают единую тему.

В предпросмотре явно заданы резервные шрифты Arial и Georgia, а внешний импорт шрифтов удалён для надёжной работы без подключения к сети. Нативная типографика остаётся видимой: размер основного текста — 16px, H1 — 40px, вводного текста — 18px. Для заголовков панелей задан отдельный размер 20px, поэтому применение к карточке базового масштаба H3 изменит компонент.

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

Цвет и иерархия действий в дизайн-системе Poncho

Выбирайте действие по его смыслу

В документации по кнопкам различаются стандартные действия-ссылки, вторичные ссылки, одно основное или успешное действие и деструктивные действия. btn-primary — обычное выразительное действие в стиле ссылки; btn-link подходит для вторичных действий. btn-success обозначает основное действие для перехода к следующему шагу, и рекомендации ограничивают его использование одной кнопкой на странице. btn-danger предназначен для деструктивных или необратимых действий.

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

• btn-primary: обычное выразительное действие; не размещайте конкурирующие с ним кнопки в одной группе действий.
• btn-link: вторичное или информационное действие, например сброс фильтра.
• btn-success / btn-danger: используйте только для действий, соответствующих их документированному назначению.

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

Сетка и интервалы дизайн-системы Poncho

Продуманно используйте унаследованную сетку

Bootstrap 3 использует 12-колоночную сетку с промежутками 30px. Отступы колонок по 15px уравновешиваются строкой. При ширине от 768px col-sm-4 делит три панели мероприятий на равные части; ниже этого значения они располагаются на всю ширину. На документированных точках перехода ширина контейнеров меняется на 750px, 970px и 1170px.

Poncho добавляет собственные интервалы компонентов: у содержимого панели отступы составляют 15px по вертикали и 20px по горизонтали, а нижний внешний отступ панели — 30px. Радиус кнопок — 30px, ширина границы — 3px, внутренние отступы — 8px и 20px. Эти значения объясняют, чем страница визуально отличается от страницы Bootstrap без изменений; не заменяйте их универсальной темой со скруглёнными карточками.

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

Анатомия кликабельной панели дизайн-системы Poncho

Одна карточка — одно место назначения

В официальных примерах панелей весь элемент обёрнут ссылкой; внутри размещён panel-body, содержащий заголовок и вспомогательный текст. Так компактная запись каталога превращается в единый переход. Не вкладывайте в эту ссылку другие ссылки или кнопки: это создаст конфликтующие интерактивные области.

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

<div class="row">
  <div class="col-sm-4">
    <a class="panel panel-default" href="/activities/repair-cafe/">
      <div class="panel-body">
        <h3>Repair café</h3>
        <p class="text-muted">Skills · Saturday, 10:00</p>
      </div>
    </a>
  </div>
</div>

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

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

Фильтрация и локальное состояние дизайн-системы Poncho

Настоящий фильтр, а не декоративные метки

У списка выбора типа мероприятия есть явная метка и три категории. При изменении выбора скрываются обёртки несовпадающих панелей, а сообщение о состоянии обновляется и показывает новое количество. Оно описывает число видимых мероприятий, а не общее количество регистраций или доступность. Сброс возвращает все три мероприятия и переводит фокус обратно на фильтр.

При смене категории открытая карточка с подробностями закрывается, чтобы содержимое уже скрытого мероприятия не оставалось несвязанным с результатами. Открытие панели не меняет фильтр. Эти правила намеренно просты, но достаточно полны, чтобы проверить связь между элементами управления, результатами и подробностями.

1. Выберите «Искусство» и убедитесь, что остался только мастер-класс по печатной графике.
2. Откройте мероприятие и изучите его описание, затем вернитесь к той же панели.
3. Сбросьте фильтр и убедитесь, что снова отображаются все три мероприятия.

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

Дизайн-система Poncho Структура дизайна-системы: клавиатура и содержимое

Не копируйте визуальное состояние отключения без соответствующего поведения

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

Используйте один H1 и последовательную иерархию заголовков. В этом каталоге внутри панелей используются H3, поскольку раскрытые подробности образуют раздел H2. Если отдельный список расположен без промежуточного раздела, подберите уровни заголовков в соответствии с реальной структурой документа. Библиотеки декоративных значков необязательны и здесь не используются: текстовые подписи описывают каждое действие.

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

Poncho Настройка нативной дизайн-системы и область применения

Подключайте только те слои, которые использует пример

Подключите Bootstrap CSS перед Poncho CSS, чтобы тема переопределяла базовые настройки. Для базовой сетки и панелей не нужны Bootstrap JavaScript или jQuery. Если приложение добавляет интерактивные компоненты Bootstrap, подключите совместимую версию jQuery перед Bootstrap 3.4.1 JavaScript и протестируйте используемые компоненты.

Это устаревший стек зависимостей с чётко определёнными границами совместимости. Установка современной версии Bootstrap рядом с ним не является стратегией миграции. Различайте повторное использование кода по лицензии MIT репозитория, с одной стороны, и государственную айдентику, официальные логотипы и лицензию на содержимое, указанную на государственных страницах, — с другой. В предварительном просмотре представлены вымышленные мероприятия сообщества; он не претендует на статус сервиса правительства Аргентины.

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

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

<div class="row">
  <div class="col-sm-4">
    <a class="panel panel-default" href="/activities/repair-cafe/">
      <div class="panel-body">
        <h3>Repair café</h3>
        <p class="text-muted">Skills · Saturday, 10:00</p>
      </div>
    </a>
  </div>
</div>

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Community activities</title><link rel="stylesheet" href="vendor/poncho-2.0.320/bootstrap.min.css"><link rel="stylesheet" href="vendor/poncho-2.0.320/poncho.min.css"><style>html,body{height:auto}body{padding:30px 0;font-family:Arial,sans-serif!important}h1,h2,h3{font-family:Georgia,serif!important}.container{max-width:100%}.panel{display:block}.filter{display:flex;gap:15px;flex-wrap:wrap;align-items:end;margin:30px 0}.filter>div{flex:1;min-width:180px}.panel:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #333;outline-offset:3px}#detail{border-left:5px solid var(--secondary);padding-left:20px;margin:25px 0}footer{font:14px/1.5 Arial;border-top:1px solid #ddd;padding-top:20px}[hidden]{display:none!important}</style><main class="container"><p class="text-muted">COMMUNITY PROGRAMME · INDEPENDENT EXAMPLE</p><h1>Find a local activity</h1><p class="lead">Browse practical sessions at the community centre.</p><div class="filter"><div><label for="category">Activity type</label><select id="category" class="form-control"><option value="all">All activities</option><option value="skills">Skills</option><option value="outdoors">Outdoors</option><option value="arts">Arts</option></select></div><button id="reset" class="btn btn-link" type="button">Reset filter</button></div><p id="count" role="status">3 activities</p><div class="row"><div class="col-sm-4" data-category="skills"><a class="panel panel-default" href="#detail" data-title="Repair café" data-copy="Bring one small household item to a supervised repair session. This demonstration does not reserve a place."><div class="panel-body"><h3>Repair café</h3><p class="text-muted">Skills · Saturday, 10:00</p></div></a></div><div class="col-sm-4" data-category="outdoors"><a class="panel panel-default" href="#detail" data-title="Community garden" data-copy="Meet at the garden gate for a planting session. Wear suitable footwear; tools are provided in this fictional programme."><div class="panel-body"><h3>Community garden</h3><p class="text-muted">Outdoors · Sunday, 09:30</p></div></a></div><div class="col-sm-4" data-category="arts"><a class="panel panel-default" href="#detail" data-title="Printmaking workshop" data-copy="Explore simple printing techniques in the studio. This local example has no registration service."><div class="panel-body"><h3>Printmaking workshop</h3><p class="text-muted">Arts · Tuesday, 16:00</p></div></a></div></div><section id="detail" hidden tabindex="-1"><h2 id="title"></h2><p id="copy"></p><button id="close" class="btn btn-primary">Back to activities</button></section><footer>Native Poncho 2.0.320 CSS with Bootstrap 3.4.1. Arial / Georgia fallbacks. Original activity data and filtering; no government identity or booking service.</footer></main><script>let opener;const select=document.querySelector('#category');function filter(){let n=0;document.querySelectorAll('[data-category]').forEach(x=>{x.hidden=select.value!=='all'&&x.dataset.category!==select.value;if(!x.hidden)n++});document.querySelector('#count').textContent=n+' activit'+(n===1?'y':'ies');document.querySelector('#detail').hidden=true}select.onchange=filter;document.querySelector('#reset').onclick=()=>{select.value='all';filter();select.focus()};document.querySelectorAll('[data-title]').forEach(a=>a.onclick=e=>{e.preventDefault();opener=a;document.querySelector('#title').textContent=a.dataset.title;document.querySelector('#copy').textContent=a.dataset.copy;document.querySelector('#detail').hidden=false;document.querySelector('#detail').focus()});document.querySelector('#close').onclick=()=>{document.querySelector('#detail').hidden=true;opener.focus()};</script></html>