# Дизайн-система Fomantic UI ## Предварительный просмотр интерфейса дизайн-системы Fomantic UI Отфильтруйте три оригинальные темы для чтения, поставьте им оценки звёздами или стрелками и добавьте подходящие в список для обсуждения. ## Справочник по дизайн-системе Fomantic UI Скомпилированные значения по умолчанию Fomantic UI 2.9.4 проверены непосредственно. Это значения по умолчанию на уровне селекторов из темы на основе Less, а не придуманные токены CSS времени выполнения. Исходные цвета обложек и размеры приложения указаны отдельно. ### Типографика сайта по умолчанию | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | html font-size | 14px | Базовый размер rem по умолчанию. | | body font-family | Lato, system-ui, platform and emoji fallbacks | В предварительный просмотр включены локальные файлы шрифта Lato. | | body line-height | 1.4285em | Около 20px при размере текста по умолчанию 14px. | | body text color | rgba(0, 0, 0, 0.87) | Текст с высокой степенью акцента по умолчанию. | | h1 / h2 / h3 | 2rem / 1.71428571rem / 1.28571429rem | Размеры заголовков по умолчанию до переопределений исходной страницы. | | heading line-height | 1.28571429em | Ритм заголовков по умолчанию. | ### Кнопки по умолчанию | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | .ui.button background | #e0e1e2 | Нейтральная кнопка по умолчанию. | | .ui.button border-radius | 0.28571429rem | Около 4px при размере корневого элемента по умолчанию. | | .ui.teal.button background | #00b5ad | Нативный бирюзовый цвет действия, используемый в списке для чтения. | | .ui.teal.button:hover | #009c95 | Нативное состояние наведения бирюзовой кнопки. | | .ui.teal.button:focus | #008c86 | Нативный фон фокуса бирюзового цвета. | | .ui.teal.button:active | #00827c | Нативный бирюзовый фон нажатой кнопки. | | .ui.primary.button background | #2185d0 | Основной синий цвет отличается от именованного бирюзового варианта. | ### Геометрия карточек по умолчанию | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | .ui.card width | 290px | Фиксированная ширина по умолчанию; вариант с автоматической шириной заполняет эту сетку приложения. | | .ui.card border-radius | 0.28571429rem | Около 4px при размере корневого элемента по умолчанию. | | .ui.card box-shadow | 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5 | Тень и обводка по умолчанию. | | .ui.card margin | 1em 0 | В исходной сетке задано нулевое внешнее поле, чтобы карточки выравнивались. | | .ui.card transition | box-shadow 0.1s ease, transform 0.1s ease | Анимация карточки по умолчанию. | ### Настройки рейтинга | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | maxRating | 4 by default; 5 in this example | Явно заданная пятибалльная шкала соответствует максимальному значению доступного ползунка. | | initialRating | 0 | До взаимодействия с пользователем рейтинг не задан. | | clearable | auto by default; true in this example | Позволяет сбросить существующий рейтинг. | | interactive | true | Взаимодействие мышью включено. | | onRate(value) | Callback after a rating is selected | Синхронизирует текстовый вывод и доступное значение. | ### Исходная шкала читального зала | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | Page padding | 36px 28px / 24px 18px mobile | Исходные отступы макета. | | Grid gap | 22px | Исходная полка для чтения из трёх столбцов. | | Page heading | 34px / 1.15; 29px mobile | Исходное переопределение заголовка. | | Cover height | 175px / 155px mobile | Иллюстрация обложки книги CSS, созданная специально для этого примера. | | Layout breakpoint | 760px | Исходное переключение на один столбец карточек. | ## Полное руководство по дизайн-системе Fomantic UI Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Дизайн-система Fomantic UI: словарь CSS с модулями jQuery ### Терминология CSS и модули jQuery > Fomantic UI сочетает семантические строки классов с необязательными модулями, поддерживающими состояние. В полке для чтения используются классы ui fluid card, ui teal button и ui basic label для оформления. Выпадающий список и рейтинги явно инициализируются через jQuery. Если загрузить только таблицу стилей, карточки отобразятся, но такое же интерактивное поведение не появится. В этом примере зафиксированы версии Fomantic UI 2.9.4 и jQuery 3.7.1. Модуль transition подключается перед dropdown, а затем — rating. Лучше наглядно показать эти зависимости, чем вывести статичный ряд звёзд и назвать его примером интерактивной библиотеки. Исходный модуль приложения запускается только после появления разметки карточек. Прочитать вспомогательную спецификацию ## Скомпилированные значения дизайн-системы Fomantic UI — это не имена токенов времени выполнения ### Скомпилированные значения по умолчанию — не имена токенов во время выполнения Тема Fomantic по умолчанию создаётся с помощью Less. Поэтому в справочнике приведены фактические значения селекторов, например цвет фона бирюзовой кнопки и радиус скругления карточки. В нём не придуман токен --fomantic-primary API, которого нет в скомпилированном пакете. Для более масштабного изменения темы используйте документированные файлы темы и переменных для сборки. Именованный бирюзовый вариант отличается от основного синего. В этой полке для чтения действие добавления в список окрашено в бирюзовый цвет, а в оригинальных иллюстрациях обложек используются цвета бумаги, шалфея и тёплой глины. Эти обложки — иллюстрации приложения, а не официальные образцы палитры. Значения кнопки при наведении, фокусе и нажатии остаются нативными значениями Fomantic по умолчанию. Прочитать вспомогательную спецификацию ## В дизайн-системе Fomantic UI размер rem в 14px меняет геометрию ### Размер rem в четырнадцать пикселей меняет геометрию В таблице стилей сайта по умолчанию для корневого элемента и текста основного содержимого задан размер 14px. Поэтому радиус кнопки и карточки 0.28571429rem составляет примерно четыре пикселя. Если перенести это значение rem в другой проект с корневым размером 16px, геометрия будет отличаться. Именно поэтому в справочнике указан размер корневого элемента, а не только радиус без пояснений. Предпочтительный шрифт — Lato; в скомпилированный пакет включены локальные файлы шрифтов. В этом автономном предварительном просмотре ресурсы шрифтов встроены в документ, а не загружаются со стороннего сервиса веб-шрифтов. Исходный размер заголовка страницы переопределён и составляет 34px; описания карточек сохраняют компактный размер основного текста, но используют более свободную высоту строки, заданную для приложения. Прочитать вспомогательную спецификацию ## Анатомия карточки в дизайн-системе Fomantic UI отделяет содержимое от действий ### Структура карточки разделяет содержимое и действия Каждая нативная карточка содержит декоративную обложку, блок с темой и описанием, отдельный блок с рейтингом и дополнительный блок с действием добавления в список. Карточки с автоматической шириной заполняют исходную сетку из трёх столбцов вместо использования ширины пакета по умолчанию — 290px. Для отдельных карточек убраны внешние поля, чтобы сетка обеспечивала равномерные промежутки. У каждого задания своя цель для чтения: сравнить межбуквенный интервал, удалить элемент и изучить свободное пространство или понаблюдать за изменением цвета в зависимости от контекста. Иллюстрации обложек визуально поддерживают эти упражнения с помощью типографики, прямоугольников и наложения цветов. Это оригинальные задания, не одобренные издательством. Прочитать вспомогательную спецификацию ## В дизайн-системе Fomantic UI используйте нативное поведение рейтинга для всех способов ввода ### Вызывайте стандартное поведение рейтинга при любом способе ввода Модуль рейтинга настроен с максимальным значением пять и параметром clearable true. onRate получает текущее числовое значение и синхронизирует видимый результат с доступным значением ползунка. Действие «Сбросить рейтинг» вызывает функцию модуля clear rating, а не удаляет активные классы вручную. Нативный модуль звёзд поддерживает взаимодействие мышью, но в этом примере также добавлена явная поддержка клавиатуры. Контейнер рейтинга — ползунок с меткой и диапазоном от нуля до пяти. Стрелки изменяют значение на один шаг, Home сбрасывает рейтинг, а End устанавливает пять. Каждый способ ввода вызывает set rating, поэтому отображаемые звёзды и вывод приложения используют одно и то же состояние модуля. 1. Перейдите клавишей Tab к рейтингу и дважды нажмите стрелку вправо, чтобы выбрать два балла из пяти. 2. Нажмите End, чтобы выбрать пять баллов, затем Home, чтобы вернуть состояние «Рейтинг не задан». 3. Нажмите на звезду и убедитесь, что текстовый вывод и доступное значение обновляются одновременно. Прочитать вспомогательную спецификацию ## Фильтрация в выпадающем списке дизайн-системы Fomantic UI сохраняет скрытое состояние ### Фильтрация выпадающего списка сохраняет скрытое состояние Выбор темы превращается в нативный выпадающий список Fomantic при инициализации dropdown. Функция обратного вызова onChange скрывает карточки, тема которых не совпадает с выбранным значением, и обновляет счётчик видимых заданий. Пункт «Все темы» восстанавливает всю полку. Для анимации меню компонент использует модуль transition. Фильтрация не удаляет карточку и не создаёт её заново. Существующие рейтинги и состояние списка остаются привязанными к исходным записям, когда карточки скрыты. Это сделано намеренно: сузить полку — значит изменить её отображение, а не удалить прежний выбор пользователя. Поэтому в сводке может упоминаться элемент, скрытый текущим фильтром. Прочитать вспомогательную спецификацию ## В дизайн-системе Fomantic UI добавление в список не зависит от рейтинга ### Список избранного не зависит от оценки Рейтинг показывает интерес по шкале от нуля до пяти, а добавление в список — отдельное решение да или нет. Пользователь может сохранить задание для обсуждения, ещё не выставив ему оценку. Кнопка добавления в список сообщает о выбранном состоянии через aria-pressed и меняет подписи «Добавить» и «Удалить». Сводка получает названия из Set, используя стабильные идентификаторы тем. Область статуса описывает выбранные задания, не утверждая, что коллекция сохранена на удалённом сервере. После перезагрузки браузера данные этого примера очищаются. Для общего списка чтения в реальном приложении понадобятся постоянное хранение данных, идентификация пользователей и обработка конфликтов; эти возможности не появляются от добавления класса карточке. Прочитать вспомогательную спецификацию ## В дизайн-системе Fomantic UI числовое значение важно и помимо декоративных звёзд ### Числовое значение важно и помимо декоративных звёзд Звёздочки скрыты от вспомогательных технологий, поскольку родительский ползунок сообщает числовое значение и метку. Видимое значение «Рейтинг не задан» или дробный результат передаёт ту же информацию, не заставляя пользователя считать цветные значки. Обводка focus-visible показывает, что ползунок активен, а кнопка «Сбросить» возвращает фокус на этот элемент управления. Формы на обложках книг также служат украшением. Настоящие название задания, длительность и описание остаются текстом внутри карточки. На узких экранах карточки располагаются в один столбец; исходная контрольная точка — 760px. В примере сбрасывается высота области просмотра, заданная для body в скомпилированных стилях, и отключается скрытие горизонтального переполнения, чтобы при встраивании высота соответствовала фактической высоте содержимого и не маскировала дефекты макета. - Передавайте текущее число и текстом, и через доступное значение. - Используйте нативные кнопки для сброса рейтинга и изменения списка. - Сохраняйте метки и полные описания при переходе сетки к одному столбцу. Прочитать вспомогательную спецификацию ## В дизайн-системе Fomantic UI подключайте шрифты рядом с таблицами стилей или включайте их в сборку ### Поставляйте шрифты вместе со стилями или включайте их в сборку Для обычного проекта скопируйте весь каталог fomantic-ui-css, а не извлекайте semantic.css, забывая о каталоге themes. В скомпилированных стилях используются относительные пути к файлам шрифтов Lato и иконок. Приведённая ниже настройка сохраняет эти пути и загружает jQuery до модулей пакета. В локальном предварительном просмотре используются только необходимые стили и сценарии компонентов, а затем указанные в них ресурсы встраиваются в единый документ. Внешние шрифты не загружаются. В производственных сборщиках эти ресурсы могут обрабатываться иначе, но пути к шрифтам и порядок подключения модулей всё равно нужно проверить на готовой странице, а не считать правильными лишь потому, что npm install завершился успешно. Прочитать вспомогательную спецификацию ## Примеры компонентов дизайн-системы Fomantic UI ### Полка для чтения из трёх карточек Нативные карточки, метки, кнопки, разметка выпадающего списка и контейнеры рейтинга. ```

FOMANTIC UI · READING ROOM

Make a shelf worth returning to.

Rate three original reading prompts and build a local discussion shortlist.

Local collection
3 prompts
TYPOGRAPHY · 18 MIN

Letters in the margins

Compare a narrow editorial column with a generous display line. Find where the rhythm changes.
Not rated
SPACE & RHYTHM · 12 MIN

The space between

Remove one element from a crowded page. Rebalance the remaining space without adding decoration.
Not rated
COLOR · 15 MIN

A color and its neighbor

Place the same accent on two backgrounds. Describe the shift before changing its value.
Not rated

Discussion shortlist

No prompts selected. Add one to begin.

Ratings and selections stay in this browser page. These are original prompts, not published books.

``` Справочник по коду - Это оригинальные задания для упражнений, а не настоящие обложки книг. - Для каждого рейтинга заданы собственная доступная метка и числовой диапазон. - В действиях списка используется aria-pressed. ### Инициализация модулей и локальное взаимодействие Фильтрация выпадающего списка, вызовы функций рейтинга, поддержка клавиатуры и состояние списка. ``` const cards=[...document.querySelectorAll('.book-grid article')],selected=new Set(); $('#topic').dropdown({onShow(){this.setAttribute('aria-expanded','true');},onHide(){this.setAttribute('aria-expanded','false');},onChange(value){let count=0;cards.forEach(card=>{card.hidden=value!=='all'&&card.dataset.topic!==value;if(!card.hidden)count++;});document.querySelectorAll('.toolbar .menu .item').forEach(item=>item.setAttribute('aria-selected',String(item.dataset.value===value)));document.querySelector('#visible-count').textContent=`${count} ${count===1?'prompt':'prompts'}`;}}); const dropdown=document.querySelector('.toolbar div.dropdown');dropdown.setAttribute('role','combobox');dropdown.setAttribute('aria-label','Show topic');dropdown.setAttribute('aria-expanded','false');dropdown.setAttribute('aria-haspopup','listbox');dropdown.querySelector('.menu').setAttribute('role','listbox');dropdown.querySelectorAll('.menu .item').forEach(item=>{item.setAttribute('role','option');item.setAttribute('aria-selected',String(item.dataset.value==='all'));}); $('.ui.rating').each(function(){const node=this,$rating=$(node);$rating.rating({maxRating:5,clearable:true,onRate(value){node.setAttribute('aria-valuenow',value);node.setAttribute('aria-valuetext',value?`${value} out of 5`:'Not rated');node.closest('article').querySelector('.score').textContent=value?`${value} / 5`:'Not rated';}});node.setAttribute('aria-valuetext','Not rated');node.querySelectorAll('.icon').forEach(i=>i.setAttribute('aria-hidden','true'));node.addEventListener('keydown',e=>{let value=Number($rating.rating('get rating'));if(['ArrowRight','ArrowUp'].includes(e.key))value=Math.min(5,value+1);else if(['ArrowLeft','ArrowDown'].includes(e.key))value=Math.max(0,value-1);else if(e.key==='Home')value=0;else if(e.key==='End')value=5;else return;e.preventDefault();$rating.rating('set rating',value);});node.closest('article').querySelector('.clear-rating').onclick=()=>{$rating.rating('clear rating');node.focus();};}); cards.forEach(card=>{card.querySelector('.shortlist').onclick=e=>{const id=card.dataset.topic,button=e.currentTarget;if(selected.has(id)){selected.delete(id);button.textContent='Add to shortlist';button.setAttribute('aria-pressed','false');}else{selected.add(id);button.textContent='Remove from shortlist';button.setAttribute('aria-pressed','true');}const names=cards.filter(c=>selected.has(c.dataset.topic)).map(c=>c.dataset.name);document.querySelector('#summary').textContent=names.length?`${names.length} selected: ${names.join('; ')}.`:'No prompts selected. Add one to begin.';};}); ``` Справочник по коду - jQuery и модули Fomantic должны загружаться до этого файла. - Для изменений клавишами со стрелками используется тот же метод set rating. - Фильтрация скрывает карточки, не сбрасывая оценки и выбор. ### Исходная композиция книжной полки Адаптивная сетка, обложки и явное выделение фокуса. ``` body{background:#f6f5f2}.reading-room{max-width:1120px;margin:auto;padding:36px 28px}.reading-room header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:32px}.kicker{font-size:11px;letter-spacing:.14em;font-weight:700;color:#008c86}h1{font-size:34px;line-height:1.15;margin:12px 0}.intro{color:#666;font-size:15px;line-height:1.6}.toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:24px;font-size:14px}.toolbar>label{font-weight:700}.toolbar>span{color:#767676;margin-left:auto}.book-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}.book-grid>.ui.card{margin:0;height:100%}.book-grid>.ui.card[hidden]{display:none}.book-cover{height:175px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.book-cover small{position:absolute;bottom:16px;left:18px;letter-spacing:.15em;font-size:9px;font-weight:700}.type-cover{background:#e2ccb0;color:#4a332a}.type-cover>span{font-family:Georgia,serif;font-size:90px;line-height:1}.space-cover{background:#ccd7d5;gap:10px}.space-cover>span{height:65px;width:25px;background:#3c6763}.space-cover>span:nth-child(2){height:90px;width:45px}.color-cover{background:#dcb9b0}.color-cover>span{width:85px;height:85px;background:#a85243}.color-cover>span:nth-child(2){width:50px;height:50px;border-radius:50%;background:#e6c57c;position:absolute}.book-grid .description{font-size:14px;line-height:1.6;min-height:88px}.rating-label{display:block;font-size:12px;font-weight:bold;margin-bottom:10px}.score{display:block;font-size:12px;color:#666;margin:8px 0 12px}.clear-rating{margin-bottom:0!important}.book-grid .ui.rating:focus-visible{outline:3px solid #00b5ad;outline-offset:4px}.summary{margin-top:28px!important}.scope{font-size:12px;color:#666}button:focus-visible{outline:3px solid #00b5ad!important;outline-offset:3px}@media(max-width:760px){.reading-room{padding:24px 18px}.reading-room header{flex-direction:column;gap:8px}h1{font-size:29px}.book-grid{grid-template-columns:1fr}.book-grid .description{min-height:0}.book-cover{height:155px}.toolbar>span{width:100%;margin-left:0}.toolbar .dropdown{min-width:180px}} html,body{height:auto;min-height:0}body{min-width:0;overflow-x:visible} ``` Справочник по коду - Значение height:100% по умолчанию в собранном сайте сбрасывается на auto для встраивания. - Переполнение body не используется для сокрытия ошибок вёрстки. ## Настройка агента дизайн-системы Fomantic UI ### Отправная точка для реализации Проверено с Fomantic UI 2.9.4 и jQuery 3.7.1. В автономном примере встроены необходимые файлы шрифтов; при обычной настройке сохраняются пути относительно пакета. Обёртка HTML содержит всю разметку body; сохраните предоставленные примеры взаимодействия и CSS под указанными здесь именами файлов. ```

FOMANTIC UI · READING ROOM

Make a shelf worth returning to.

Rate three original reading prompts and build a local discussion shortlist.

Local collection
3 prompts
TYPOGRAPHY · 18 MIN

Letters in the margins

Compare a narrow editorial column with a generous display line. Find where the rhythm changes.
Not rated
SPACE & RHYTHM · 12 MIN

The space between

Remove one element from a crowded page. Rebalance the remaining space without adding decoration.
Not rated
COLOR · 15 MIN

A color and its neighbor

Place the same accent on two backgrounds. Describe the shift before changing its value.
Not rated

Discussion shortlist

No prompts selected. Add one to begin.

Ratings and selections stay in this browser page. These are original prompts, not published books.

``` ### Запрос для вашего проекта ``` Расширьте список для читального зала на основе Fomantic UI 2.9.4, используя предоставленную инициализацию модуля jQuery и компоненты Dropdown и Rating. Свяжите три задания для чтения, состояние их оценок и локальную работу списка с отображаемыми карточками. Сохраните явную поддержку клавиатуры и семантику ползунка, добавленные элементу оценки, а также соответствующие теме иконки. Список не должен допускать повторного добавления и должен наглядно показывать текущее содержимое; это не процесс обработки обращений в поддержку и не удалённый сервис рекомендаций. ``` ## Источники и область применения дизайн-системы Fomantic UI Fomantic UI 2.9.4 с jQuery 3.7.1. Значения темы — скомпилированные значения по умолчанию; оригинальные обложки и дополнения для клавиатуры обозначены отдельно. Все выбранные элементы остаются локальными. - Начало работы Скомпилированные ресурсы и настройка модулей. - Настройка темы Настройка темы на основе Less. - Сайт Глобальные параметры типографики и страницы. - Card Структура содержимого карточки и её варианты. - Оценка Методы Rating и обратный вызов onRate. - Раскрывающийся список Инициализация выбора и обработка изменений. - Button Стандартные именованные варианты и состояния. ## Связанные ресурсы дизайн-системы Fomantic UI ### Foundation Рабочий стол проверки доказательств Foundation с использованием XY Grid, пользовательских валидаторов Abide, подтверждения Reveal, реальных настроек Sass и полного кода локальной интеграции. ### Framework7 Нативный альбом эскизов Framework7 с настоящими действиями swipeout, явными значениями темы iOS, доступным с клавиатуры открытием меню действий и отфильтрованным списком, в котором завершённые исследования остаются до сброса. ### gluestack UI Создайте контрольный список полевого набора с настоящими генераторами основных компонентов Button и Input из gluestack, явными семантическими цветами v5 и полным исходным кодом React Native Web. Изучите проверку данных, действия с клавиатуры, стабильную идентификацию элементов и локально вычисляемый прогресс сбора вещей. - [Справочник по реализации](https://fomantic-ui.com/modules/rating.html) - [Источник](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/site.css) - [Источник](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/button.css) - [Источник](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/card.css) - [Источник](https://fomantic-ui.com/modules/rating.html) - [Источник](https://fomantic-ui.com/usage/layout.html) - [Прочитать вспомогательную спецификацию](https://fomantic-ui.com/introduction/getting-started.html) - [Прочитать вспомогательную спецификацию](https://fomantic-ui.com/usage/theming.html) - [Прочитать вспомогательную спецификацию](https://fomantic-ui.com/globals/site.html) - [Прочитать вспомогательную спецификацию](https://fomantic-ui.com/views/card.html) - [Прочитать вспомогательную спецификацию](https://fomantic-ui.com/modules/rating.html) - [Прочитать вспомогательную спецификацию](https://fomantic-ui.com/modules/dropdown.html) - [Прочитать вспомогательную спецификацию](https://fomantic-ui.com/elements/button.html) - [Справочник по коду](https://fomantic-ui.com/views/card.html) - [Справочник по коду](https://fomantic-ui.com/modules/rating.html) - [Справочник по коду](https://fomantic-ui.com/usage/layout.html) - [Начало работы Скомпилированные ресурсы и настройка модулей.](https://fomantic-ui.com/introduction/getting-started.html) - [Настройка темы Настройка темы на основе Less.](https://fomantic-ui.com/usage/theming.html) - [Сайт Глобальные параметры типографики и страницы.](https://fomantic-ui.com/globals/site.html) - [Card Структура содержимого карточки и её варианты.](https://fomantic-ui.com/views/card.html) - [Оценка Методы Rating и обратный вызов onRate.](https://fomantic-ui.com/modules/rating.html) - [Раскрывающийся список Инициализация выбора и обработка изменений.](https://fomantic-ui.com/modules/dropdown.html) - [Button Стандартные именованные варианты и состояния.](https://fomantic-ui.com/elements/button.html)