bukatchukДизайн-система · версия 0.3.0
bukatchuk ui
Единое оформление блога и сайтов на *.bukatchuk.ru. Компоненты копируются в проект командой и становятся его кодом: без зависимостей, сборщиков и сторонних адресов.
Компоненты
ОсноваБазовые стилиСброс, заголовки, колонка, секции, надпись над заголовком, видимый фокус.ОсноваПеременныеПалитра, рамки, тени, шрифты и слои. Одинаковы на всех сайтах.ОсноваШрифтыJetBrains Mono — подписи, кнопки, код; IBM Plex Sans — длинный текст; Space Grotesk — заголовки. Файлы лежат на домене сайта.ОсноваЯдро скриптовПомощники для компонентов со скриптом: обработчики по атрибутам, расстановка всплывающих слоёв, события.ЭлементыАватарКвадратное изображение профиля с рамкой и жёсткой тенью.ЭлементыАккордеонСворачиваемые разделы на <details>/<summary>: работает без скрипта, группа с name оставляет открытым один пункт.ЭлементыБлок значенияБлок с копируемым значением: ссылка, токен, пример запроса. Щелчок выделяет всё; кнопка копирует в буфер.ЭлементыБоковая панельПанель кабинета: группы ссылок, активный пункт, вложенные группы, сворачивание до значков с запоминанием; на узком экране выезжает поверх страницы. Каркас .sidebar-layout.ЭлементыВвод метокНесколько значений метками в одном поле: добавление Enter или запятой, удаление Backspace, значения в скрытом поле.ЭлементыВкладки с панелямиВкладки, переключающие панели содержимого на одной странице; горизонтальные и вертикальные. Блок .tabset.ЭлементыВкладки-ссылкиВкладки разделов страницы в виде ссылок; отдельный акцентный цвет для служебных разделов.ЭлементыВрезкаВыделенная заметка в тексте: рамка, оранжевая полоса слева, светлая заливка.ЭлементыВсплывающая панельПанель у кнопки с короткой формой или пояснением. Закрывается по Esc и щелчку вне, фокус возвращается на кнопку.ЭлементыВыдвижная панельПанель у края окна: список, фильтры, действия. Тот же диалог, прижатый к правому, левому, верхнему или нижнему краю.ЭлементыВыпадающее меню действийМеню команд у кнопки: пункты, группы, разделители, флажки, выбор одного, опасные и отключённые пункты, подменю.ЭлементыВыпадающий списокСвой список вместо системного: кнопка со стрелкой, раскрытый список в чёрной рамке с жёсткой тенью. Системный select скрыт и хранит значение.ЭлементыГрафикГрафики без библиотек: столбчатый (вертикальный и горизонтальный), линейный и спарклайн. Значения лежат в разметке, линии рисует скрипт.ЭлементыГруппа радиокнопокВыбор одного варианта: круглые или квадратные индикаторы, в столбец или в ряд, вариант карточками для тарифов. Работает без скрипта.ЭлементыДата и времяТекстовое поле «дд/мм/гггг чч:мм» со своим календарём; системное поле даты не используется.ЭлементыДиалогОкно поверх страницы: форма, сообщение или подтверждение опасного действия.ЭлементыЗаглушка загрузкиСерые заглушки на месте содержимого: строка, абзац, круг, квадрат, блок, карточка. Мерцание отключается при prefers-reduced-motion.ЭлементыЗагрузка файлаЗона для перетаскивания и выбора файлов: список с размером, проверка формата и размера, ошибки текстом. Поле файла остаётся в форме.ЭлементыИндикатор выполненияПолоса на <progress>: обычная, тонкая, с подписью и процентом, неопределённое состояние.ЭлементыИндикатор ожиданияПульсирующие полосы или мигающий блок в духе терминала; role="status" и скрытый текст для скринридеров.ЭлементыКарточкаРамка с отступами для группы связанных данных; акцентная — с оранжевой рамкой и тенью.ЭлементыКарточка при наведенииКраткие сведения о ссылке: автор, проект, запись. Появляется с задержкой и не пропадает, пока курсор на карточке.ЭлементыКарусельКарусель на CSS scroll-snap с кнопками, точками и клавишами; без скрипта остаётся горизонтальной прокруткой.ЭлементыКлавишаОбозначение клавиши и сочетания клавиш в тексте.ЭлементыКнопкаГлавное и второстепенное действие, опасное действие, малая кнопка, ссылка в виде кнопки.ЭлементыКнопка-переключательКнопка с двумя состояниями (aria-pressed) и вариант на флажке, который отправляется с формой без скрипта.ЭлементыКонтекстное менюМеню действий по правой кнопке мыши или Shift+F10 на области. Разметка и поведение — от выпадающего меню.ЭлементыЛента событийВертикальная лента событий по времени: дата, заголовок, описание, состояние пункта.ЭлементыМеню разделовМеню с раскрывающимися подменю: кнопка, панель со ссылками и описаниями. На узком экране — столбиком.ЭлементыМеткаМаленькая метка состояния: в порядке, ошибка, отключено.ЭлементыОбласть прокруткиОбласть с оформленной полосой прокрутки в цветах системы и тенями-подсказками по краям.ЭлементыОглавлениеОглавление страницы с подсветкой текущего раздела при прокрутке; прилипает под шапкой.ЭлементыПагинацияНомера страниц в рамках, текущая чёрная; текстовый вариант «назад — страница N из M — вперёд» для кабинетов.ЭлементыПалитра командПоле поиска и список команд с группами и подсказками клавиш; открывается в диалоге по Ctrl/⌘+K или стоит на странице.ЭлементыПанели с границейДве панели с перетаскиваемой границей, по горизонтали и по вертикали; граница управляется и с клавиатуры.ЭлементыПанельБелая панель с толстой рамкой и жёсткой тенью: вход, форма, сообщение. Внутри — форма, пояснения, ошибка, ссылки.ЭлементыПанель действийСтрока над списком: заголовок или фильтр слева, кнопки справа.ЭлементыПереключательПереключатель «вкл/выкл» на флажке с ролью switch: подпись, описание, отключённое состояние. Работает без скрипта.ЭлементыПереключатель видаРяд кнопок с общей границей для выбора одного из видов, например «Витрина» и «Каталог». Активная — чёрная.ЭлементыПодзаголовок разделаЗаголовок раздела внутри страницы: шрифт для заголовков и линия под ним.ЭлементыПодсказкаКороткая подсказка при наведении и фокусе. Текст в атрибуте или в готовом элементе с role="tooltip".ЭлементыПоискСтрока поиска: поле и кнопка в одну линию.ЭлементыПоказательКарточка показателя: число, подпись, изменение (рост или падение) и спарклайн.ЭлементыПолеПодпись, поле ввода, многострочное поле, системный список, подсказка и сообщение об ошибке.ЭлементыПоле кодаКод подтверждения из нескольких ячеек: автопереход, вставка целиком, автозаполнение из SMS, значение в скрытом поле.ЭлементыПоле пароляПоле пароля с кнопкой «показать/скрыть»: состояние в aria-pressed, подпись кнопки и aria-label меняются.ЭлементыПоле с поискомПоле ввода со списком вариантов: фильтрация по мере набора, выбор мышью и клавиатурой, пустое состояние, значение в скрытом поле.ЭлементыПоле с приставкойПоле с приставкой, суффиксом и кнопкой в одной рамке, например «https://» + адрес + «Копировать».ЭлементыПолзунокВыбор значения из диапазона на <input type="range">: своя дорожка и бегунок, значение в <output>, шаги, подписи вместо чисел.ЭлементыПустое состояниеПояснение на месте списка, в котором пока ничего нет.ЭлементыРазделительЛиния между блоками: горизонтальная, вертикальная, с подписью посередине.ЭлементыСворачиваемый блокБлок, который скрывается и раскрывается по кнопке; вариант «показать ещё» для длинного текста.ЭлементыСеткиСетки в две и три колонки и ячейка с рамкой; на узком экране колонки встают в одну.ЭлементыСообщениеКрупное сообщение на странице с заголовком, текстом и действием: обычное, ошибка, успех.ЭлементыСоотношение сторонКонтейнер с фиксированным соотношением сторон (16:9, 4:3, 3:2, 1:1, 21:9) для картинок, видео и вставок.ЭлементыСписок записейВертикальный список записей с заголовком, пояснением, ссылкой и кнопками действий; прошедшие — приглушены.ЭлементыСписок описанийПары «подпись — значение» на <dl>: в строку и столбцом, для карточек и страниц профиля.ЭлементыСсылкаСсылка в тексте: оранжевое подчёркивание, при наведении заливка.ЭлементыСтрока менюСтрока меню приложения: меню с пунктами, переключателями и подсказками клавиш.ЭлементыТаблицаНастоящая таблица в обёртке с прокруткой: заголовки над столбцами, столбец действий, журнал.ЭлементыТаблица данныхНадстройка над таблицей: сортировка по заголовку (текст, числа, даты дд/мм/гггг), поиск, выбор строк с «выбрать все» и счётчиком, постраничный вывод на клиенте, пустое состояние.ЭлементыТегМетка статьи или раздела: обычная, чёрная, оранжевая; ряд тегов.ЭлементыТекст статьиОформление длинного текста: абзацы, заголовки, списки, ссылки, цитаты, таблицы, код с подсветкой, плееры, буквица. Вариант для текстовой страницы.ЭлементыТипографикаЗаголовки .h1–.h4, лид, абзац, цитата, списки, строчный код, мелкий и приглушённый текст на шкале из tokens.css.ЭлементыУведомлениеКороткое сообщение над содержимым: ошибка, успех, пояснение.ЭлементыУведомлениеКороткие уведомления в углу окна: успех, ошибка, сведения. Вызов из скрипта BUI.toast() или кнопкой с data-ui-toast.ЭлементыФлажокСтрока с флажком и группа флажков в рамке с прокруткой.ЭлементыФормаВертикальный ритм полей, поля в ряд, разделы с заголовком, кнопки и сводка ошибок; скрипт показывает ошибки под полями при отправке.ЭлементыХлебные крошкиПуть до текущей страницы; длинный путь сворачивается: середина прячется за кнопкой «…».ЭлементыЧисловое полеЧисло с кнопками «−» и «+»: шаг, min и max с самого поля, быстрый набор при удержании кнопки.ЭлементыШагиШаги процесса или мастера: номер, название и состояние (пройден, текущий, впереди); горизонтально и столбиком.БлокиАрхив по годамКрупный год с числом публикаций слева и список статей справа.БлокиБегущая строкаСтрока с темами, которая бесконечно прокручивается; чёрная или оранжевая, в любую сторону.БлокиБонусы и возможностиКарточки с подписью, заголовком, списком и итогом: бонусы к подписке, возможности продукта.БлокиВопросы и диалогиВопросы в колонках и диалоги «вопрос — ответ» с оранжевой линией сверху.БлокиВрезка с меткойРамка с оранжевой полосой и подписью сверху: «честно о…» и условия под блоком.БлокиГарантииКарточки гарантий и условий в три колонки; главная выделяется оранжевым.БлокиДоказательстваКарточки с фактами и ссылками: публикации, открытая программа, опыт автора.БлокиДокументация APIСтраница документации API: сведения об авторизации и ошибках, оглавление, группы операций с таблицей полей, запросом и ответом.БлокиЖивая лента событийВертикальная лента записей с уровнем и временем, которая плавно прокручивается сама.БлокиКаркас страницы сервисаОбласть содержимого страницы сервиса: колонка нужной ширины, заголовок, вводный абзац, ссылка «назад».БлокиЛента метрикРяд ячеек с числом, подписью и полосой заполнения под первым экраном лендинга.БлокиЛента показателейЧетыре ячейки с числами и подписями в общей рамке; разные цвета ячеек и реакция на наведение.БлокиЛента публикацийЧёрная бегущая лента в виде журнала: дата, цветной тег, заголовок. Две дорожки в разные стороны.БлокиМетка блокаПлашка над заголовком секции и пометка места, которое нужно заполнить.БлокиПервый экранКрупный заголовок на фоне-сетке, оранжевое акцентное слово, подписи и кнопки.БлокиПлитки программыСетка плиток разного размера: подпись, заголовок, текст и внизу теги, цифра или столбики.БлокиПодвалОранжевый подвал с колонками ссылок и нижней строкой (копирайт с годом, стаж). Вариант: компактный — одна нижняя строка.БлокиПодпись автораЧёрная плашка под статьёй: аватар, имя, описание и ссылки.БлокиПостскриптумыСтроки «метка — текст» для P.S., P.P.S. и подобных заключительных замечаний.БлокиПоявление при прокруткеЭлементы с классом rv плавно проявляются, когда попадают в окно; без скрипта видны сразу.БлокиПризыв к действиюОранжевая секция с заголовком, текстом, чёрной кнопкой и необязательной оговоркой; перед оранжевым подвалом — чёрный вариант с оранжевой кнопкой.БлокиПуть по шагамСписок шагов с крупным номером, сроком, описанием и тегами.БлокиСетка характеристикЯчейки с подписью, крупным числом и пояснением в общей рамке.БлокиСоседние статьиПредыдущая и следующая статьи в двух ячейках.БлокиСписки статейЛента карточек статей (.post) с закреплённой, компактные строки (.row) для архива и страниц тегов.БлокиСтатьяКаркас страницы статьи: шапка с надписью, заголовком и метаданными, обложка, теги под текстом.БлокиСтраница 404Крупное «404», «терминал» с запросом и ответом сервера, пояснение и кнопки.БлокиТекстовая страницаСтраница с длинным юридическим текстом: колонка чтения, строка редакции, таблицы и примечание.БлокиТерминалСтатичное окно в виде терминала для пояснений и вывода команд; тёмная таблица параметров.БлокиЦена и тарифыЧёрная секция с ценой и экономией, колонки доводов, тарифные карточки, таблица состава с галочками.БлокиШапкаПрилипающая шапка с меню и мобильной кнопкой: чёрная с оранжевой линией.БлокиШапка секцииЗаголовок секции с пояснением справа и вводный абзац под заголовком.