rastrillo design system

An overview of everything the design system provides. Theme: day. Language: English.

Rastrillo apps get all of this day one, but anyone can use the design system. Progressively enhanced with JS, but no JS required.

The stylesheets

tokens.css is structure: the component classes, the layout, and the scales for type, spacing and radius. Values are references, set elsewhere. themes/<name>.css is colour, type family and shape: one :root block where every colour is declared once as a light-dark() pair.

The scripts

rastrillo.js is the progressive-enhancement shim: polling fragments, busy states, light dismiss. select.js and datetime.js are enhancements — each inert until a control opts in, each deletable on its own.

What each file weighs

Filesizes for the various components.

• tokens.cssStructure: every component class, every scale, and no colour literal anywhere. The same file under every theme.122033 bytes
• theme-day.cssColour, type family and shape for the day theme: one :root block where every colour is declared once as a light-dark() pair.10828 bytes
• theme-plain.cssColour, type family and shape for the plain theme: one :root block where every colour is declared once as a light-dark() pair.10286 bytes
• theme-signal.cssColour, type family and shape for the signal theme: one :root block where every colour is declared once as a light-dark() pair.11083 bytes
• rastrillo.jsThe progressive-enhancement shim: polling fragments, busy states and light dismiss. Every scaffolded app gets it.16364 bytes
• select.jsfield-select's searchable combobox. Inert until a select opts in with data-rst-select, and deletable on its own.11919 bytes
• datetime.jsThe date fields' natural-language input. Inert until a field opts in with data-rst-date or data-rst-time, and deletable on its own.76584 bytes
• calendar.jsThe month grid that field's calendar button opens. Inert until datetime.js asks it for a panel, and deletable on its own: without it the button falls back to the browser's own picker.22725 bytes

A new app gets 260453 bytes of CSS and JavaScript in total: tokens.css, one theme, and the scripts.

In a new rastrillo app

rastrillo new writes these into the app's static directory and links them from the layout, tokens.css first. They're yours from then on: edit them, or delete what you don't use.

rastrillo new --theme=day myapp

The theme is pinned twice. --theme decides which shipped theme is copied to static/theme.css, and logged at app generation time.

const vendoredTheme = "day"

Using it without the framework

The names above are links. Take tokens.css and one theme and you have the whole visual system: plain classes, ordinary HTML, no build step.

Upgrading

The trap worth knowing before it costs you an afternoon: tokens.css is copied into the app's static directory at scaffold time and frozen there, while the partials it styles keep upgrading with the module. An app can quietly run new markup against old CSS. Re-copy tokens.css when you upgrade, and the theme and the scripts with it.

rastrillo doctor will compare an app's frozen files against the module's and offer to re-copy.