快速开始

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 · gzip 压缩后 73 · 去掉注释再压缩后 21
theme-day.cssday 主题的颜色、字体族和形状：一个 :root 块，每个颜色以 light-dark() 成对声明一次。原样 27 · gzip 压缩后 7.3 · 去掉注释再压缩后 1.7
theme-plain.cssplain 主题的颜色、字体族和形状：一个 :root 块，每个颜色以 light-dark() 成对声明一次。原样 18 · gzip 压缩后 4.2 · 去掉注释再压缩后 1.1
theme-signal.csssignal 主题的颜色、字体族和形状：一个 :root 块，每个颜色以 light-dark() 成对声明一次。原样 18 · gzip 压缩后 4.6 · 去掉注释再压缩后 1.2
shell.css手机上页面之间的滑动切换，供 sidebar 和 console 外壳使用。可与 shell.js 一起删除。原样 4.2 · gzip 压缩后 1.1 · 去掉注释再压缩后 0.5
rastrillo.js渐进增强的垫片：片段轮询、轻量关闭和开关的拖动。每个脚手架生成的应用都会拿到它。原样 19 · gzip 压缩后 7.2 · 去掉注释再压缩后 2.6
busy.js忙碌规则：表单提交期间，其按钮至少显示 650 毫秒的加载指示并拒绝第二次提交；返回时恢复原状。每个脚手架生成的应用都会拿到它。原样 15 · gzip 压缩后 5.3 · 去掉注释再压缩后 1.3
live.js实时页面：服务器告知数据变了，区块就随之更新；表单就地保存。在页面带有 rastrillo-live meta 标签之前是惰性的，也可以单独删除。原样 29 · gzip 压缩后 10.0 · 去掉注释再压缩后 5.0
light.js深度样式读取的光：随时刻照出的阴影，以及指针下的按钮上的一层光泽。删除它即可得到静止的设计。原样 11 · gzip 压缩后 4.1 · 去掉注释再压缩后 2.1
anchor.js在不支持 CSS 锚点定位的浏览器中，让下拉菜单留在屏幕内。在支持的浏览器中它什么也不做：等你支持的所有浏览器都支持后，就可以删除它。原样 3.2 · gzip 压缩后 1.4 · 去掉注释再压缩后 0.6
shell.jssidebar 和 console 外壳的手机导航：页面之间的滑动切换、复用浏览历史的“返回”，以及把焦点还给你离开的那个栏目。可以单独删除。原样 8.0 · gzip 压缩后 3.2 · 去掉注释再压缩后 1.4
transition.js防止 column、stage 和 topbar 页面在跳过页面过渡时记录错误。sidebar 和 console 页面不需要它。原样 0.9 · gzip 压缩后 0.4 · 去掉注释再压缩后 0.4
select.jsfield-select 的可搜索下拉框。在某个 select 用 data-rst-select 主动启用之前是惰性的，也可以单独删除。原样 55 · gzip 压缩后 18 · 去掉注释再压缩后 8.0
datetime.js日期字段的自然语言输入。在某个字段用 data-rst-date 或 data-rst-time 主动启用之前是惰性的，也可以单独删除。原样 76 · gzip 压缩后 24 · 去掉注释再压缩后 11
calendar.js该字段的日历按钮打开的月份网格。在 datetime.js 向它索取面板之前是惰性的，也可以单独删除：没有它，按钮就回退到浏览器自带的选择器。原样 22 · gzip 压缩后 7.1 · 去掉注释再压缩后 3.1

新应用拿到的 CSS 和 JavaScript 原样为 552 KiB，gzip 压缩后为 162 KiB：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 会把应用冻结的文件与模块里的做比对，并提出重新复制。