UIkit сочетает фреймворк CSS, настройку Less и компоненты JavaScript, управляемые атрибутами. Его Switcher, Accordion и адаптивная сетка вместе используются в приведённом ниже планировщике мастер-классов, показывая, где заканчивается встроенное поведение компонентов и начинается состояние выбора в приложении.
Нативные UIkit 3.25.25 CSS и JavaScript; исходное содержимое сессий и состояние плана. · Справочник по реализации
02
UIkit: справочник по дизайн-системе
UIkit 3.25.25: исходный код Less и скомпилированный CSS по умолчанию. Имена с символом @ — переменные Less, используемые во время компиляции, а не пользовательские свойства CSS во время выполнения. В предварительном просмотре добавлены явно обозначенные переопределения для конкретных экранов.
Классы и поведение на основе атрибутов дизайн-системы UIkit CSS
CSS: классы и поведение, управляемое атрибутами
UIkit сочетает фреймворк CSS со слоем компонентов JavaScript. Класс uk-card задаёт оформление поверхности; атрибут uk-switcher инициализирует интерактивный компонент. Различие видно на примере макета: карточки и элементы форм отображаются с одним лишь CSS, но переключение сессий и раскрытие аккордеона зависят от пакета UIkit JavaScript.
Предварительный просмотр локально загружает настоящую скомпилированную таблицу стилей версии 3.25.25 и среду выполнения. У трёх сессий разная продолжительность и компоновка, поэтому при переключении меняется содержимое, а не только надпись в одинаковой карточке. Локальный скрипт плана участников не связан со средой выполнения UIkit и приведён целиком.
Переменные Less и стилизация во время выполнения в дизайн-системе UIkit
Переменные Less и стилизация во время выполнения
Указанные в справочнике имена, начинающиеся с @, — это переменные Less. Они получают значения во время компиляции; запись @global-primary-background в обычной таблице стилей браузера не изменит тему во время выполнения. В таблице приведены проверенные значения из установленного исходного кода, а в предварительном просмотре используется предварительно скомпилированная версия CSS с настройками по умолчанию из пакета.
Чтобы создать фирменную тему UIkit, используйте документированный процесс импорта и настройки Less, а затем выполните повторную компиляцию. Для точечных доработок страницы обычный CSS может задавать правила для класса после официальной таблицы стилей. В этом примере выбран второй вариант: переопределены размер заголовка, внутренние отступы карточек и цвет метаданных. Эти переопределения не являются новыми официальными токенами UIkit.
Иерархия текста, цвета и поверхностей в дизайн-системе UIkit
Иерархия текста, цвета и поверхностей
По умолчанию для глобального шрифта используется системный стек размером 16 пикселей с высотой строки 1.5. Основной фон по умолчанию — #1e87f0, вторичный — тёмный нейтральный, а приглушённые поверхности имеют цвет #f8f8f8. Благодаря этим ролям основное действие выбора отличается от менее акцентной пояснительной плитки. В таблице спецификации указаны значения как для текста, так и для поверхностей — это не просто декоративная палитра из четырёх цветов.
В макете используется крупный, но ограниченный по размеру заголовок, небольшая подпись программы и заголовок в каждой карточке сессии. Цвет метаданных локально затемнён до #65717a. Плитка подготовки имеет исходный светло-голубой фон и обычный тёмный текст. Автоматически инвертировать цвета не следует: для тёмного фона нужно использовать подходящее инверсное оформление UIkit или явно задать соответствующие стили текста.
Связь навигации по сессиям с содержимым в дизайн-системе UIkit
Свяжите навигацию по сессиям с содержимым
Для списка навигации задан uk-switcher со значением connect: #sessions и анимацией fade. У списка содержимого есть класс uk-switcher и соответствующий идентификатор. Связь определяется порядком: первый переключатель управляет первым элементом содержимого. Поэтому при добавлении или перестановке сессий нужно синхронно обновлять обе стороны. Явный селектор connect избавляет от зависимости от расположения непосредственно следующего элемента.
Для визуального оформления навигации используется uk-tab. UIkit управляет состоянием активного элемента и связанным с ним поведением для доступности. Исходно выбранная сессия остаётся независимой: просмотр другой сессии не приводит к её выбору. Метка выбранной сессии меняется, а фокус переводится на поле участника только после нажатия «Выбрать сессию».
Откройте «Прототипирование» и изучите его содержимое.
Выберите эту сессию и проверьте метку выбранной сессии ниже.
Переключитесь на «Системную консультацию», не выбирая её: в локальном плане по-прежнему будет указано «Прототипирование».
Адаптивная ширина и отступы сетки в дизайн-системе UIkit
Адаптивная ширина и управление внутренними отступами
Для содержимого сессии внутри uk-grid используются uk-width-2-3@m и uk-width-1-3@m. На средней контрольной ширине, 960px, содержимое и плитка подготовки располагаются горизонтально. Ниже этого значения они выстраиваются вертикально. Для разделов плана и подготовки заданы одинаковые правила ширины в половину строки на той же контрольной ширине, что сохраняет логичный порядок элементов в исходном коде на небольших экранах.
Сетка UIkit управляет отступами с помощью классов сетки. В примере для крупных разделов используется uk-grid-medium, а в заголовке — uk-grid-small. Не добавляйте произвольные внешние отступы дочерним элементам сетки, предполагая, что их доли ширины по-прежнему составят целое. Отступы от краёв задаются внешним контейнером и внутренними полями; локальные доработки для мобильных экранов уменьшают внутренние отступы карточек и размер заголовка.
Подробности о подготовке и встроенное состояние компонентов в дизайн-системе UIkit
Подробности подготовки со встроенным состоянием компонента
Класс uk-accordion-default задаёт стандартное оформление. Атрибут uk-accordion устанавливает значение multiple: true, поэтому при раскрытии одного ответа другой не закрывается. Каждый элемент содержит uk-accordion-title и uk-accordion-content. Среда выполнения управляет состоянием раскрытия и видимостью содержимого; одни только классы CSS такого поведения не обеспечивают.
Два вопроса касаются разных практических тем: что взять с собой и резервирует ли локальный планировщик место. Явный ответ на второй вопрос не даёт интерфейсу создавать впечатление, будто он взаимодействует с внешней системой регистрации. Эта граница обозначена не только в содержимом аккордеона: в статусе также сказано, что место не забронировано.
Параметр multiple: true позволяет оставить открытыми оба ответа.
Заголовок и содержимое должны оставаться в одном элементе аккордеона.
Контур клавиатурного фокуса остаётся видимым на каждом заголовке.
Разделение оформления библиотеки и проверки данных приложения в дизайн-системе UIkit
Разделение оформления библиотеки и проверки данных приложения
Для поля участника внутри uk-form-controls используется uk-input, а также настоящая подпись и поясняющий текст. Обязательное поле проверяется браузером, и пустая форма не отправляется. Приложение дополнительно проверяет, что значение не состоит из одних пробелов, и при недопустимом вводе добавляет uk-form-danger и aria-invalid, поддерживая соответствие визуального и семантического состояния. При редактировании устаревшая ошибка сбрасывается.
Выбор сессии обновляет локальный выбор и переводит фокус на поле имени. При отправке отображается статусное сообщение с именем участника и выбранной сессией. Текст добавляется через textContent, поэтому введённая разметка не выполняется. Это локальный планировщик без серверной части; UIkit не приписывает форме функции регистрации, сохранения или отправки уведомлений.
Порядок загрузки CSS, среды выполнения и кода приложения в дизайн-системе UIkit
Загрузите CSS, затем Runtime, а после — код приложения
Установите [email protected] и скопируйте скомпилированные CSS и JavaScript из dist в локальные ресурсы. Сначала загрузите CSS, затем небольшое переопределение компоновки; uikit.min.js должен загружаться перед app.js. Для обоих скриптов можно задать defer, чтобы после разбора документа сохранился исходный порядок. В примере body приведены все атрибуты компонентов и содержимое.
Пакет иконок здесь не нужен, поскольку на странице не используется uk-icon. Если позднее вы добавите иконки, загрузите соответствующую среду выполнения и задайте понятные подписи элементам управления, состоящим только из иконок. Не смешивайте пакет JavaScript более новой версии с таблицей стилей более старой только потому, что имена файлов совпадают: структура компонентов и стили должны быть взяты из одного и того же зафиксированного пакета.
Стабильные связи переключателя при расширении содержимого в дизайн-системе UIkit
Сохраняйте стабильность связей переключателя при росте объёма содержимого
Переключатель связывает элементы навигации с элементами содержимого по порядку. При добавлении сессии нужно добавить соответствующий элемент с обеих сторон на одну и ту же позицию, а connect: #sessions задаёт явную цель. Если на странице несколько независимых переключателей, присвойте каждой цели уникальный идентификатор и сохраните эту связь в атрибуте инициализации.
Выбранная мастерская не зависит от активной панели. Просмотр другой сессии не должен незаметно перезаписывать выбор, уже сделанный в планировщике. При добавлении более длинных панелей проверьте адаптивную сетку и содержимое аккордеона в новой активной панели: если настроить размеры только для начальной панели, проблемы компоновки могут остаться незаметными, пока пользователь не переключится.
Страница мастерской со встроенными атрибутами UIkit
Переключатель связан с #sessions; аккордеон позволяет раскрывать несколько разделов; ширина колонок сетки изменяется при @m.
html
<main class="uk-container uk-container-small uk-padding"><div class="uk-grid-small uk-flex-middle" uk-grid><div class="uk-width-1-1 uk-width-expand@s"><p class="uk-text-meta uk-text-uppercase">UIkit / Workshop program</p><h1 class="uk-heading-small">One afternoon.<br>Three ways to learn.</h1></div><div><span class="uk-label">Local planner</span></div></div><ul class="uk-tab uk-margin-medium-top" uk-switcher="connect: #sessions; animation: uk-animation-fade"><li><a href="#">Design critique</a></li><li><a href="#">Prototyping</a></li><li><a href="#">Systems clinic</a></li></ul><ul class="uk-switcher" id="sessions"><li><div class="uk-card uk-card-default uk-card-body"><div class="uk-grid-medium" uk-grid><div class="uk-width-2-3@m"><p class="uk-text-meta">13:00–14:00 / STUDIO A</p><h2 class="uk-card-title">A useful critique starts with context.</h2><p>Bring one interface and a question you cannot resolve alone. Practice separating observation, interpretation, and a proposed change.</p><ul class="uk-list uk-list-bullet"><li>Frame the user’s task before discussing style.</li><li>Compare two alternatives against the same goal.</li><li>Leave with one specific next experiment.</li></ul></div><div class="uk-width-1-3@m"><div class="uk-tile uk-tile-muted uk-padding-small"><strong>Bring with you</strong><p>A screenshot, a short task description, and one unresolved decision.</p><button class="uk-button uk-button-primary uk-width-1-1 choose" data-session="Design critique">Choose session</button></div></div></div></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">14:15–15:15 / STUDIO B</p><h2 class="uk-card-title">Prototype the difficult transition.</h2><p>Build a small interaction that covers an empty state, an interrupted action, and recovery. The target is a useful decision, not a polished full product.</p><p>Bring a laptop and a flow with one state transition you need to test.</p><button class="uk-button uk-button-primary choose" data-session="Prototyping">Choose session</button></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">15:30–16:30 / STUDIO A</p><h2 class="uk-card-title">Make the exception explicit.</h2><p>Compare two components that almost match. Decide whether their difference belongs in a token, a variant, a composition, or a one-off exception.</p><p>Bring a component screenshot and its current implementation constraints.</p><button class="uk-button uk-button-primary choose" data-session="Systems clinic">Choose session</button></div></li></ul><div class="uk-grid-medium uk-margin-medium-top" uk-grid><section class="uk-width-1-2@m"><h2 class="uk-h3">Plan details</h2><form class="uk-form-stacked" id="planner"><div class="uk-margin"><label class="uk-form-label" for="attendee">Attendee name</label><div class="uk-form-controls"><input class="uk-input" id="attendee" required placeholder="Your name" aria-describedby="name-help"></div><p id="name-help" class="uk-text-small">Use a name to label this local plan.</p></div><p>Selected: <strong id="chosen">Design critique</strong></p><button class="uk-button uk-button-secondary" type="submit">Add to local plan</button><p id="result" role="status" class="uk-text-small">No plan recorded yet.</p></form></section><section class="uk-width-1-2@m"><h2 class="uk-h3">Before you arrive</h2><ul class="uk-accordion-default" uk-accordion="multiple: true"><li><a class="uk-accordion-title" href="#">What should I prepare?</a><div class="uk-accordion-content"><p>Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.</p></div></li><li><a class="uk-accordion-title" href="#">Does this reserve a seat?</a><div class="uk-accordion-content"><p>No. This preview records a choice only in memory. It is not connected to an event or registration service.</p></div></li></ul></section></div><p class="uk-text-meta uk-margin-medium-top">Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.</p></main>
Атрибут uk-switcher инициализирует поведение; класс uk-switcher обозначает контейнер содержимого.
Для этой компоновки пакет иконок UIkit не требуется.
Исходное поведение локального плана
Выбор сессии и проверка данных — логика приложения, дополняющая встроенное взаимодействие UIkit.
javascript
const name=document.getElementById('attendee');const chosen=document.getElementById('chosen');const result=document.getElementById('result');document.querySelectorAll('.choose').forEach(button=>button.addEventListener('click',()=>{chosen.textContent=button.dataset.session;result.textContent='Choice updated. Add it to the local plan when ready.';name.focus()}));name.addEventListener('input',()=>{name.setCustomValidity('');name.classList.remove('uk-form-danger');name.removeAttribute('aria-invalid')});name.addEventListener('invalid',()=>{name.classList.add('uk-form-danger');name.setAttribute('aria-invalid','true')});document.getElementById('planner').addEventListener('submit',event=>{event.preventDefault();if(!name.value.trim()){name.setCustomValidity('Enter a non-empty name.');name.reportValidity();return;}result.textContent=name.value.trim()+' — '+chosen.textContent+' added to this local plan. No seat was reserved.';});
Эти переопределения не являются официальными значениями токенов по умолчанию.
04
Настройка агента дизайн-системы UIkit
Отправная точка для реализации
Сохраните доработки экрана в файл style.css, а логику локального плана — в app.js. За переключатель и аккордеон отвечает UIkit. Для этой компоновки пакет иконок не нужен. В обёртку HTML входит вся разметка body; сохраните приведённые примеры взаимодействия и CSS под указанными здесь именами файлов.
html
<!-- npm install [email protected]
mkdir -p assets
cp node_modules/uikit/dist/css/uikit.min.css assets/
cp node_modules/uikit/dist/js/uikit.min.js assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Workshop planner</title>
<link rel="stylesheet" href="assets/uikit.min.css">
<link rel="stylesheet" href="style.css">
<script src="assets/uikit.min.js" defer></script>
<script src="app.js" defer></script></head>
<body><main class="uk-container uk-container-small uk-padding"><div class="uk-grid-small uk-flex-middle" uk-grid><div class="uk-width-1-1 uk-width-expand@s"><p class="uk-text-meta uk-text-uppercase">UIkit / Workshop program</p><h1 class="uk-heading-small">One afternoon.<br>Three ways to learn.</h1></div><div><span class="uk-label">Local planner</span></div></div><ul class="uk-tab uk-margin-medium-top" uk-switcher="connect: #sessions; animation: uk-animation-fade"><li><a href="#">Design critique</a></li><li><a href="#">Prototyping</a></li><li><a href="#">Systems clinic</a></li></ul><ul class="uk-switcher" id="sessions"><li><div class="uk-card uk-card-default uk-card-body"><div class="uk-grid-medium" uk-grid><div class="uk-width-2-3@m"><p class="uk-text-meta">13:00–14:00 / STUDIO A</p><h2 class="uk-card-title">A useful critique starts with context.</h2><p>Bring one interface and a question you cannot resolve alone. Practice separating observation, interpretation, and a proposed change.</p><ul class="uk-list uk-list-bullet"><li>Frame the user’s task before discussing style.</li><li>Compare two alternatives against the same goal.</li><li>Leave with one specific next experiment.</li></ul></div><div class="uk-width-1-3@m"><div class="uk-tile uk-tile-muted uk-padding-small"><strong>Bring with you</strong><p>A screenshot, a short task description, and one unresolved decision.</p><button class="uk-button uk-button-primary uk-width-1-1 choose" data-session="Design critique">Choose session</button></div></div></div></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">14:15–15:15 / STUDIO B</p><h2 class="uk-card-title">Prototype the difficult transition.</h2><p>Build a small interaction that covers an empty state, an interrupted action, and recovery. The target is a useful decision, not a polished full product.</p><p>Bring a laptop and a flow with one state transition you need to test.</p><button class="uk-button uk-button-primary choose" data-session="Prototyping">Choose session</button></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">15:30–16:30 / STUDIO A</p><h2 class="uk-card-title">Make the exception explicit.</h2><p>Compare two components that almost match. Decide whether their difference belongs in a token, a variant, a composition, or a one-off exception.</p><p>Bring a component screenshot and its current implementation constraints.</p><button class="uk-button uk-button-primary choose" data-session="Systems clinic">Choose session</button></div></li></ul><div class="uk-grid-medium uk-margin-medium-top" uk-grid><section class="uk-width-1-2@m"><h2 class="uk-h3">Plan details</h2><form class="uk-form-stacked" id="planner"><div class="uk-margin"><label class="uk-form-label" for="attendee">Attendee name</label><div class="uk-form-controls"><input class="uk-input" id="attendee" required placeholder="Your name" aria-describedby="name-help"></div><p id="name-help" class="uk-text-small">Use a name to label this local plan.</p></div><p>Selected: <strong id="chosen">Design critique</strong></p><button class="uk-button uk-button-secondary" type="submit">Add to local plan</button><p id="result" role="status" class="uk-text-small">No plan recorded yet.</p></form></section><section class="uk-width-1-2@m"><h2 class="uk-h3">Before you arrive</h2><ul class="uk-accordion-default" uk-accordion="multiple: true"><li><a class="uk-accordion-title" href="#">What should I prepare?</a><div class="uk-accordion-content"><p>Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.</p></div></li><li><a class="uk-accordion-title" href="#">Does this reserve a seat?</a><div class="uk-accordion-content"><p>No. This preview records a choice only in memory. It is not connected to an event or registration service.</p></div></li></ul></section></div><p class="uk-text-meta uk-margin-medium-top">Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.</p></main>
</body></html>
Запрос для вашего проекта
Промпт для AI-агента
Используйте UIkit 3.25.25, чтобы расширить предоставленный планировщик мастерской. Сохраните uk-switcher с явной связью с #sessions, соответствие порядка навигации и содержимого, адаптивные доли uk-grid и аккордеон, позволяющий раскрывать несколько пунктов одновременно. Просмотр сессии должен быть отдельным действием от выбора. При выборе фокус должен переходить на поле ввода имени участника с подписью; при отправке одних пробелов следует показывать uk-form-danger и aria-invalid. В статусе нужно назвать выбранную сессию и участника как локальный план, не утверждая, что место забронировано. Подключите соответствующую среду выполнения UIkit до скрипта приложения.
05
Источники и область применения дизайн-системы UIkit
Справочник встроенных компонентов UIkit 3.25.25. Значения Less — это определения, используемые при компиляции; локальные переопределения заголовка, отступов и фокуса добавлены нами. Бронирование мероприятий не выполняется.
