Skip to content
Sections
Language, currently English
Rastrillo Design System
Language, currently English
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

Getting started

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, light dismiss, the switch's drag. busy.js is the busy rule. anchor.js keeps dropdown menus on the screen where CSS cannot. select.js and datetime.js are enhancements, each inert until a control opts in and each deletable on its own.

What each file weighs

Sizes in KiB. Gzipped is what a visitor downloads.

  • tokens.cssStructure: every component class, every scale, and no colour literal anywhere. The same file under every theme.281 as written · 73 gzipped · 21 gzipped without comments
  • 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.27 as written · 7.3 gzipped · 1.7 gzipped without comments
  • 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.18 as written · 4.2 gzipped · 1.1 gzipped without comments
  • 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.18 as written · 4.6 gzipped · 1.2 gzipped without comments
  • shell.cssThe slide between pages on a phone, for the sidebar and console shells. Deletable with shell.js.4.2 as written · 1.1 gzipped · 0.5 gzipped without comments
  • rastrillo.jsThe progressive-enhancement shim: polling fragments, light dismiss and the switch's drag. Every scaffolded app gets it.19 as written · 7.2 gzipped · 2.6 gzipped without comments
  • busy.jsThe busy rule: while a form sends, its button shows a spinner for at least 650ms and refuses a second submit, and Back hands it back. Every scaffolded app gets it.15 as written · 5.3 gzipped · 1.3 gzipped without comments
  • live.jsLive pages: sections that update when the server says their data changed, and forms that save in place. Inert until a page carries the rastrillo-live meta tag, and deletable on its own.29 as written · 10.0 gzipped · 5.0 gzipped without comments
  • light.jsThe light the depth styles read: shadows lit by the hour, and a sheen on the button under the pointer. Delete it for the still design.11 as written · 4.1 gzipped · 2.1 gzipped without comments
  • anchor.jsKeeps a dropdown's menu on the screen in browsers without CSS anchor positioning. It does nothing where they have it: delete it once every browser you support does.3.2 as written · 1.4 gzipped · 0.6 gzipped without comments
  • shell.jsPhone navigation for the sidebar and console shells: the slide between pages, Back that reuses history, and focus returned to the section you left. Deletable on its own.8.0 as written · 3.2 gzipped · 1.4 gzipped without comments
  • transition.jsStops a skipped page transition logging an error on column, stage and topbar pages. Sidebar and console pages don't need it.0.9 as written · 0.4 gzipped · 0.4 gzipped without comments
  • select.jsfield-select's searchable combobox. Inert until a select opts in with data-rst-select, and deletable on its own.55 as written · 18 gzipped · 8.0 gzipped without comments
  • 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.76 as written · 24 gzipped · 11 gzipped without comments
  • 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.22 as written · 7.1 gzipped · 3.1 gzipped without comments

A new app gets 552 KiB of CSS and JavaScript as written, 162 KiB gzipped: 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: attributes on ordinary HTML, no build step.

Link them in this order, tokens.css first:

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

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.