Начало работы

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

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

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

Скрипты

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

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

Размеры в KiB. Посетитель скачивает версию после gzip.

tokens.cssСтруктура: все классы компонентов, все шкалы и ни одного цветового литерала. Один и тот же файл при любой теме.281 в исходном виде · 73 после gzip · 21 после gzip без комментариев
theme-day.cssЦвет, гарнитура и форма для темы day: один блок :root, где каждый цвет объявлен один раз парой light-dark().27 в исходном виде · 7,3 после gzip · 1,7 после gzip без комментариев
theme-plain.cssЦвет, гарнитура и форма для темы plain: один блок :root, где каждый цвет объявлен один раз парой light-dark().18 в исходном виде · 4,2 после gzip · 1,1 после gzip без комментариев
theme-signal.cssЦвет, гарнитура и форма для темы signal: один блок :root, где каждый цвет объявлен один раз парой light-dark().18 в исходном виде · 4,6 после gzip · 1,2 после gzip без комментариев
shell.cssСдвиг между страницами на телефоне, для оболочек sidebar и console. Удаляется вместе с shell.js.4,2 в исходном виде · 1,1 после gzip · 0,5 после gzip без комментариев
rastrillo.jsСлой прогрессивного улучшения: опрос фрагментов, лёгкое закрытие и перетаскивание переключателя. Его получает каждое сгенерированное приложение.19 в исходном виде · 7,2 после gzip · 2,6 после gzip без комментариев
busy.jsПравило занятости: пока форма отправляется, её кнопка показывает индикатор не меньше 650 мс и отклоняет повторную отправку; при возврате назад всё восстанавливается. Его получает каждое сгенерированное приложение.15 в исходном виде · 5,3 после gzip · 1,3 после gzip без комментариев
live.jsЖивые страницы: разделы, которые обновляются, когда сервер сообщает, что их данные изменились, и формы, которые сохраняются на месте. Бездействует, пока на странице нет метатега rastrillo-live; удаляется отдельно.29 в исходном виде · 10,0 после gzip · 5,0 после gzip без комментариев
light.jsСвет, который читают стили глубины: тени, освещение которых зависит от времени суток, и блик на кнопке под указателем. Удалите его ради неподвижного дизайна.11 в исходном виде · 4,1 после gzip · 2,1 после gzip без комментариев
anchor.jsУдерживает меню выпадающего списка на экране в браузерах без якорного позиционирования CSS. Там, где оно есть, ничего не делает: удалите файл, когда оно появится во всех браузерах, которые вы поддерживаете.3,2 в исходном виде · 1,4 после gzip · 0,6 после gzip без комментариев
shell.jsНавигация на телефоне для оболочек sidebar и console: сдвиг между страницами, «Назад», который использует историю, и фокус, возвращённый на раздел, откуда вы ушли. Удаляется отдельно.8,0 в исходном виде · 3,2 после gzip · 1,4 после gzip без комментариев
transition.jsНе даёт записать ошибку при пропуске перехода на страницах column, stage и topbar. Страницам sidebar и console он не нужен.0,9 в исходном виде · 0,4 после gzip · 0,4 после gzip без комментариев
select.jsКомбобокс с поиском для field-select. Бездействует, пока select не подключится через data-rst-select; удаляется отдельно.55 в исходном виде · 18 после gzip · 8,0 после gzip без комментариев
datetime.jsВвод дат на естественном языке. Бездействует, пока поле не подключится через data-rst-date или data-rst-time; удаляется отдельно.76 в исходном виде · 24 после gzip · 11 после gzip без комментариев
calendar.jsСетка месяца, которую открывает кнопка календаря этого поля. Бездействует, пока datetime.js не запросит панель; удаляется отдельно: без неё кнопка возвращается к собственному выбору браузера.22 в исходном виде · 7,1 после gzip · 3,1 после gzip без комментариев

Новое приложение получает 552 KiB CSS и JavaScript в исходном виде, 162 KiB после gzip: tokens.css, одну тему и скрипты.

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

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

rastrillo new --theme=day myapp

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

const vendoredTheme = "day"

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

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

Подключайте их в таком порядке, сначала tokens.css:

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="theme-day.css">

Обновление

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

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