Зачем сайту отдельная библиотека
Заметки о разработке ZeroUI · 4 ноября 2026 года
Задача
На Voidboard накопились небольшие приложения: генераторы, конвертеры и утилиты под одну задачу. Каждое писалось отдельно и приносило свои отступы, размеры полей и оформление кнопок.
Хотелось уменьшить количество CSS на сайте и привести приложения к единому виду. Вместо очередной локальной правки общие решения перенесли в ZeroUI, чтобы применять их и в других проектах.
Как ни странно, лучший способ сделать меньше CSS - вообще убрать его с сайта, перенеся стили в отдельную библиотеку.
Из постановки задачи ZeroUI
Что берёт на себя библиотека
Библиотека отвечает за типографику, интервалы и компоновку. Графика элементов управления остаётся системной. Кнопку рисует браузер, а расположение группы кнопок задаёт библиотека.
- Системное оформление
- Цвета и элементы управления следуют окружению пользователя.
- Общая компоновка
- Формы, таблицы и панели действий используют одни правила на разных страницах.
Отступы без отдельной шкалы для каждого приложения
У библиотеки пять пространственных токенов. Вместо произвольного числа для каждого случая выбирается один из уже существующих интервалов.
| Уровень | Размер | Типичное применение |
|---|---|---|
| 1 | 3 pt | Подпись рядом с полем |
| 2 | 6 pt | Элементы панели действий |
| 3 | 12 pt | Абзацы и группы полей |
| 4 | 24 pt | Разделы документа |
| 5 | 48 pt | Крупные смысловые области |
Документация как настоящее приложение
Showcase использует только библиотеку. Если для его оглавления, формы или галереи чего-то не хватает, исправление должно пригодиться и обычному сайту.
- Найти повторяющуюся задачу в приложениях.
- Решить её средствами HTML и минимальным CSS.
- Показать работающий пример в документации.
- Применить то же решение на сайте.
Меньше JavaScript
Раскрывающиеся блоки и обычные модальные окна используют нативное поведение браузера. Скрипт нужен там, где меняется содержимое: например, чтобы подставить выбранную картинку в общий диалог.
Как появляется оглавление
На странице оставлена невидимая метка. Общий скрипт собирает заголовки, добавляет недостающие якоря и строит этот список. Без JavaScript остаётся сама статья.
Почему нумерация не вписана в текст
Порядок разделов меняется. Его оформление берёт на себя CSS, а текст заголовков остаётся чистым.
Граница общего решения
У печатного генератора Almajara Go размеры фигур являются частью результата. Их нельзя заменить обычной адаптивной сеткой: заготовка должна сохранить геометрию.1
Поэтому общими становятся формы и панели управления, а уникальная графика остаётся внутри приложения. Единство интерфейса не означает одинаковое устройство всех программ.
Примечания
- Размеры печатной заготовки проверяются отдельно от оформления страницы и её управляющих кнопок.