# Дизайн-система Poncho
## Предпросмотр интерфейса дизайн-системы Poncho
Фильтруйте сетку нативных панелей, открывайте подробности и возвращайтесь к выбранному мероприятию.
## Справочник по дизайну дизайн-системы Poncho
ar-poncho 2.0.320 CSS и Bootstrap 3.4.1; вычисленные значения проверены при ширине 1440, 768 и 390px. Резервные шрифты указаны явно.
### Опубликованная типографика CSS
| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Package inspected | ar-poncho 2.0.320 | Не используйте устаревший баннер v0.3.3 как указание версии пакета. |
| Font documentation | Lora headings / Montserrat body | Актуальная страница типографики и импорт шрифта CSS; в старом README репозитория по-прежнему указан Encode Sans. |
| Body | 16px / 1.42857143; weight 500 | Проверено с Bootstrap 3.4.1 и Poncho; в локальном предпросмотре используется Arial. |
| H1 | 2.5rem = 40px / 44px | Заголовок предпросмотра на мобильных устройствах остаётся размером 40px. |
| H2 / H3 | 2rem / 1.75rem | Базовые стили заголовков; для панелей действуют правила, которые их переопределяют. |
| Panel H3 | 20px / 26px | Контекст компонента, измеренный на нативной CSS. |
| Lead | 18px / 1.2; weight 500 | Короткое вступление, а не заголовок. |
### Роли цветов
| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --primary | #242C4F | Основной цвет ссылки/действия — тёмно-синий. |
| --secondary | #45658D | Вторичный синий. |
| --success | #2e7d33 | Роль основного действия/успешного завершения; не произвольное украшение. |
| --danger | #c62828 | Роль опасного действия или ошибки. |
| --warning | #E7BA61 | Роль привлечения внимания; контраст текста всё ещё нужно проверить. |
| --gray-base | #333333 | Основной цвет текста. |
| --gray-lighter | #f2f2f2 | Светлая нейтральная поверхность. |
### Размеры сетки и компонентов
| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Grid | 12 columns; 30px gutter | Bootstrap 3.4.1: внутренний отступ каждой стороны колонки — 15px. |
| Breakpoints | 768 / 992 / 1200px | sm, md, lg; col-sm-4 формирует три колонки при ширине от 768px. |
| Containers | 750 / 970 / 1170px | На соответствующих точках перехода; ниже 768px ширина становится резиновой. |
| Panel body | 15px 20px | Переопределение компонента Poncho. |
| Panel radius / spacing | 10px / 30px bottom margin | Нативная CSS, использованная в этом примере. |
| Button | 16px; 8px 20px padding; 3px border; 30px radius | Скруглённое оформление действий Poncho; это не геометрия по умолчанию Bootstrap. |
| Section spacing | 30px default; 20px small; 40px large | Правила для section, section-sm и section-lg. |
## Полное руководство по дизайн-системе 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, содержащий заголовок и вспомогательный текст. Так компактная запись каталога превращается в единый переход. Не вкладывайте в эту ссылку другие ссылки или кнопки: это создаст конфликтующие интерактивные области.
В примере для рабочей среды ссылка ведёт на реальный маршрут мероприятия. В локальном предпросмотре вместо этого перехватывается та же семантическая ссылка, чтобы показать исходный текст подробностей. При этом запоминается элемент, открывший подробности, фокус переводится на новую область, а при её закрытии возвращается к исходному элементу. Это поведение приложения, добавленное поверх разметки панели из документации.
```
```
Справочник по коду
Прочитать вспомогательную спецификацию
## Фильтрация и локальное состояние дизайн-системы 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 Примеры компонентов дизайн-системы
### Навигация по всей панели
Одна ссылка охватывает содержимое панели; не вкладывайте в неё другие интерактивные элементы.
```
```
Справочник по коду
### Полный каталог мероприятий
Нативные панели Poncho, работающий фильтр по категориям и просмотр подробностей с возвратом фокуса.
```
Community activities
COMMUNITY PROGRAMME · INDEPENDENT EXAMPLE
Find a local activity
Browse practical sessions at the community centre.
```
Справочник по коду
## Poncho Настройка агента дизайн-системы
### Отправная точка для реализации
Настройка нативного CSS. Для этого предварительного просмотра не требуется Bootstrap JavaScript, поскольку логика фильтрации и просмотра подробностей реализована самостоятельно. ZIP-архив с полным рабочим примером в разделе «Источники» также содержит точные зависимости предварительного просмотра и полный документ. Распакуйте архив, выполните в этой папке команду python3 -m http.server 8080, затем откройте http://localhost:8080/poncho.html. Не открывайте примеры с модулями через file://.
```
npm install ar-poncho@2.0.320 bootstrap@3.4.1
# Copy the following package assets into your site's public vendor directory:
# node_modules/bootstrap/dist/css/bootstrap.min.css
# node_modules/ar-poncho/dist/css/poncho.min.css
# Load Bootstrap first, then Poncho.
# Optional Bootstrap JS components also need jQuery before bootstrap.min.js.
```
### Запрос для вашего проекта
```
Используйте ar-poncho 2.0.320 с Bootstrap 3.4.1. Создайте доступный каталог на сетке из 12 колонок с карточками-панелями, каждая из которых обёрнута одной ссылкой. Сохраните цвета, отступы и радиусы нативных кнопок в соответствии с их назначением. Добавьте фильтрацию с подписями, счётчики результатов и возврат фокуса. Сверьте каскад шрифтов с зафиксированным пакетом; не смешивайте API Bootstrap 5 и не придумывайте подтверждение успешной регистрации.
```
## Poncho Источники и область применения дизайн-системы
Самостоятельный пример OpenDesign с нативным CSS, не использующий государственную айдентику. В актуальной документации и старом README указаны разные семейства шрифтов; в этом предварительном просмотре используются зафиксированный CSS и явно заданный резервный шрифт.
- Официальный репозиторий и установка Настройка пакета, зависимости и лицензия MIT на код.
- Структура панели Ссылки на всю карточку, вспомогательный текст и варианты оформления.
- Назначение кнопок Иерархия действий, имена классов и состояния.
- Типографика Актуальные семейства шрифтов и рекомендации по семантическому тексту.
- Опубликованный CSS Фактические определения цветов, типографики и геометрии.
- Сетка Bootstrap 3 Унаследованные адаптивные колонки, промежутки и ширина контейнеров.
- Скачать полный рабочий пример ZIP-архив с полным HTML, локальными зависимостями CSS/JavaScript, лицензиями и точными инструкциями по запуску. Сборка не требуется.
## Poncho Связанные ресурсы дизайн-системы
### Queensland Government дизайн-система
Изучите реализацию Bootstrap в Queensland на примере полноценного иллюстрированного выбора ресурсов с реальными ролями темы, встроенным оформлением флажков и доступным диалогом проверки.
### Ripple
Изучите реальные цветовые роли Ripple, шкалу отступов из 14 шагов и ссылки на адаптивную типографику на примере полноценного расписания семинара с последовательным раскрытием информации, индикатором выполнения и переходом к следующему шагу с клавиатуры.
### Scottish Government дизайн-система
Примените адаптивную типографику, отступы и цветовые роли правительства Шотландии во встроенном поле со счётчиком символов, которое сохраняет текст при превышении лимита и позволяет исправить ввод.
- [Справочник по реализации](https://argob.github.io/poncho/componentes/paneles/)
- [Источник](https://github.com/argob/poncho/blob/master/dist/css/poncho.css)
- [Источник](https://getbootstrap.com/docs/3.4/css/#grid)
- [Прочитать вспомогательную спецификацию](https://github.com/argob/poncho)
- [Прочитать вспомогательную спецификацию](https://argob.github.io/poncho/identidad/tipografia/)
- [Прочитать вспомогательную спецификацию](https://argob.github.io/poncho/componentes/botones/)
- [Прочитать вспомогательную спецификацию](https://getbootstrap.com/docs/3.4/css/#grid)
- [Справочник по коду](https://argob.github.io/poncho/componentes/paneles/)
- [Прочитать вспомогательную спецификацию](https://argob.github.io/poncho/componentes/paneles/)
- [Официальный репозиторий и установка Настройка пакета, зависимости и лицензия MIT на код.](https://github.com/argob/poncho)
- [Структура панели Ссылки на всю карточку, вспомогательный текст и варианты оформления.](https://argob.github.io/poncho/componentes/paneles/)
- [Назначение кнопок Иерархия действий, имена классов и состояния.](https://argob.github.io/poncho/componentes/botones/)
- [Типографика Актуальные семейства шрифтов и рекомендации по семантическому тексту.](https://argob.github.io/poncho/identidad/tipografia/)
- [Опубликованный CSS Фактические определения цветов, типографики и геометрии.](https://github.com/argob/poncho/blob/master/dist/css/poncho.css)
- [Сетка Bootstrap 3 Унаследованные адаптивные колонки, промежутки и ширина контейнеров.](https://getbootstrap.com/docs/3.4/css/#grid)