дизайн-система rastrillo

Обзор всего, что даёт дизайн-система. Тема: signal. Язык: Русский.

Приложения rastrillo получают всё это с первого дня, но дизайн-системой может пользоваться кто угодно. Прогрессивное улучшение на JavaScript, но JavaScript не нужен.

Таблицы стилей

tokens.css — это структура: классы компонентов, вёрстка и шкалы шрифта, отступов и скруглений. Значения в нём — ссылки, заданные в другом месте. themes/<name>.css — это цвет, гарнитура и форма: один блок :root, где каждый цвет объявлен один раз парой light-dark().

Скрипты

rastrillo.js — это слой прогрессивного улучшения: опрос фрагментов, состояния занятости, лёгкое закрытие. select.js и datetime.js — улучшения: каждое бездействует, пока элемент управления сам не подключится, и каждое удаляется отдельно.

Сколько весит каждый файл

Размеры файлов отдельных частей.

• tokens.cssСтруктура: все классы компонентов, все шкалы и ни одного цветового литерала. Один и тот же файл при любой теме.122033 байт
• theme-day.cssЦвет, гарнитура и форма для темы day: один блок :root, где каждый цвет объявлен один раз парой light-dark().10828 байт
• theme-plain.cssЦвет, гарнитура и форма для темы plain: один блок :root, где каждый цвет объявлен один раз парой light-dark().10286 байт
• theme-signal.cssЦвет, гарнитура и форма для темы signal: один блок :root, где каждый цвет объявлен один раз парой light-dark().11083 байт
• rastrillo.jsСлой прогрессивного улучшения: опрос фрагментов, состояния занятости и лёгкое закрытие. Его получает каждое сгенерированное приложение.16364 байт
• select.jsКомбобокс с поиском для field-select. Бездействует, пока select не подключится через data-rst-select; удаляется отдельно.11919 байт
• datetime.jsВвод дат на естественном языке. Бездействует, пока поле не подключится через data-rst-date или data-rst-time; удаляется отдельно.76584 байт
• calendar.jsСетка месяца, которую открывает кнопка календаря этого поля. Бездействует, пока datetime.js не запросит панель; удаляется отдельно: без неё кнопка возвращается к собственному выбору браузера.22725 байт

Новое приложение получает всего 260708 байт CSS и JavaScript: tokens.css, одну тему и скрипты.

В новом приложении rastrillo

rastrillo new записывает это в каталог static приложения и подключает из макета, первым — tokens.css. Дальше они ваши: правьте их или удалите то, чем не пользуетесь.

rastrillo new --theme=signal myapp

Тема закрепляется дважды. --theme решает, какая из поставляемых тем копируется в static/theme.css, и этот выбор записывается при генерации приложения.

const vendoredTheme = "signal"

Использовать без фреймворка

Имена выше — это ссылки. Возьмите tokens.css и одну тему, и у вас есть вся визуальная система: простые классы, обычный HTML, без шага сборки.

Обновление

Ловушка, о которой лучше узнать до того, как она отнимет у вас полдня: tokens.css копируется в каталог static приложения при генерации и там замерзает, тогда как оформляемые им partial продолжают обновляться вместе с модулем. Приложение может незаметно исполнять новую разметку поверх старого CSS. При обновлении копируйте tokens.css заново — и вместе с ним тему и скрипты.

rastrillo doctor будет сравнивать замороженные файлы приложения с файлами модуля и предлагать скопировать их заново.