Перейти к содержимому
Плотность
Тема

instrument

CSS-кит для интерфейсов, которые показывают человеку работу машины: очереди задач, прогоны, логи, инспекторы, состояния и неопределённость.

Без сборки и без зависимостей, подключается одной строкой.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/keshon/instrument@0.5.0/dist/instrument.min.css">

Установка — целая страница, которую можно скопировать и открыть. Готовые экраны — три собранных интерфейса, из которых видно, как компоненты стыкуются.

Для кого

Для дашбордов, админок и агентских инструментов — интерфейсов, где главное на экране это данные, где сидят часами и где машина работает, а человек за ней наблюдает.

Здесь есть то, чего нет в универсальных китах: очередь задач, шаг с телом, запрос подтверждения, блок отказа, диф, дорожка параллельных прогонов, лог с колонками, бюджет и дерево.

Для чего он не подходит. Лендинги, магазины, контентные сайты. Кит намеренно тихий: без градиентов, свечений, теней на карточках и жирных начертаний. Заголовок капсом здесь запрещён правилом, а не отсутствует по недосмотру.

Что сделано иначе

Контраст проверяется машиной. 504 пары цветов против порогов WCAG в шести темах. Инструмент читает настоящий tokens.css и резолвит var(), light-dark() и color-mix() так же, как браузер, поэтому разойтись с китом не может. А то, что из токенов сложилось на экране после вложения и полупрозрачных слоёв, меряет отдельная проверка по пикселям — и запускать её нужно на своём приложении, а не на примерах отсюда.

Уменьшенное движение не выключает индикаторы. Переходы схлопываются, а бесконечные индикаторы активности замедляются, а не гаснут: кит, вся работа которого — показывать занятость машины, обязан показывать её всегда. Сжатая до 0.01ms анимация — это не сжатие длительности, это остановка.

Плотность — атрибут контейнера, а не вариант компонента. Один атрибут на панели перенастраивает всё внутри неё, потому что компоненты не содержат собственных чисел.

Скрипт по желанию

CSS работает сам по себе. Отдельный модуль выполняет то, что кит обещает разметкой: стрелки в списках и вкладках, копирование, снятие тега, перетаскивание оси. Что именно он делает.

Требования

Chrome 123+ · Safari 17.5+ · Firefox 120+ — по light-dark(), oklch(), каскадным слоям, вложенности, :has() и единице lh. Полифилов нет и не будет.

Лицензия

MIT © Innokentiy Sokolov. Исходники, справочник и все проверки — в одном репозитории: github.com/keshon/instrument.

Кит поставляется собранным: dist/instrument.min.css лежит в репозитории и сверяется с исходником на каждом push — поэтому ссылка выше и работает без сборки.