rastrillo design system

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

Route

The pieces that are a whole response rather than a piece of one.

Pre-built, consistent UI elements, rendered server-side.

The framework's own vocabulary calls these partials: ui.Templates() returns partials, and docs/site/templates.md documents them under that name. The word on this page changed; the code's did not.

Links here are inactive

Links inactive, sample source provided.

Each sample below in its own frame.

Sample content in English. Sample shells translated.

error-page

The whole body of an error response: the status, one honest sentence, a way back, and 500 references an admin can use.

404 — not found

Desktop Mobile Code

<div rst-error>
  <p rst-error-status>404</p>
  <h1 rst-error-title>We can&#39;t find that page</h1>
  <p rst-error-body>The link may be out of date, or the page may have moved. Check the address, or go back to the start.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Start page</a></p>
</div>

403 — forbidden

Desktop Mobile Code

<div rst-error>
  <p rst-error-status>403</p>
  <h1 rst-error-title>You can&#39;t see this</h1>
  <p rst-error-body>Your account doesn&#39;t have access here. If you think it should, ask whoever runs this site.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Start page</a> <a rst-btn href="/posts">Go back</a></p>
</div>

422 — unprocessable

Desktop Mobile Code

<div rst-error>
  <p rst-error-status>422</p>
  <h1 rst-error-title>That didn&#39;t go through</h1>
  <p rst-error-body>Something in what was sent wasn&#39;t right. Go back and try again; nothing was saved.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Start page</a> <a rst-btn href="/posts/1/edit">Go back</a></p>
</div>

500 — server error

Desktop Mobile Code

<div rst-error>
  <p rst-error-status>500</p>
  <h1 rst-error-title>Something went wrong on our side</h1>
  <p rst-error-body>It&#39;s not you. The problem has been recorded. Try again in a moment; if it keeps happening, quote the reference below.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Start page</a></p>
  <p class="rst-mono" rst-error-ref dir="auto">Reference: k3f9tq</p>
</div>

A 500 is the one status with a reference: an operator can grep the logs for it.

503 — unavailable

Desktop Mobile Code

<div rst-error>
  <p rst-error-status>503</p>
  <h1 rst-error-title>We&#39;re briefly unavailable</h1>
  <p rst-error-body>The site is being updated or is busy. Try again in a minute.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Start page</a></p>
</div>

Anything else — the generic pair

Desktop Mobile Code

<div rst-error>
  <p rst-error-status>418</p>
  <h1 rst-error-title>Something&#39;s not right</h1>
  <p rst-error-body>That request couldn&#39;t be completed. Go back and try again.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Start page</a></p>
</div>

Five statuses are worded in the framework catalog. A sixth falls back to the generic pair rather than rendering a missing key's name at a reader.

back-nav

The link back up one level, above a show or edit screen.

Back to a record

Desktop Mobile Code

<nav rst-back-nav><a href="/orders/1">← Order AB3PX</a></nav>

locale-menu

The language switcher: a details menu of one-field POST forms to /_locale, so the choice lands in the locale cookie and the reader stays on the same path.

Twelve languages, current highlighted.

Desktop Mobile Code

<details rst-dropdown rst-locale name="rst-menus">
  <summary>Language<span rst-caret aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span></summary>
  <div rst-dropdown-menu>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="en"><input type="hidden" name="return" value="/"><button type="submit" lang="en" aria-current="true">English</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ga"><input type="hidden" name="return" value="/"><button type="submit" lang="ga">Gaeilge</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="zh-Hans"><input type="hidden" name="return" value="/"><button type="submit" lang="zh-Hans">简体中文</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="es"><input type="hidden" name="return" value="/"><button type="submit" lang="es">Español</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="hi"><input type="hidden" name="return" value="/"><button type="submit" lang="hi">हिन्दी</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="pt"><input type="hidden" name="return" value="/"><button type="submit" lang="pt">Português</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="bn"><input type="hidden" name="return" value="/"><button type="submit" lang="bn">বাংলা</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ru"><input type="hidden" name="return" value="/"><button type="submit" lang="ru">Русский</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ja"><input type="hidden" name="return" value="/"><button type="submit" lang="ja">日本語</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="yue"><input type="hidden" name="return" value="/"><button type="submit" lang="yue">廣東話</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="vi"><input type="hidden" name="return" value="/"><button type="submit" lang="vi">Tiếng Việt</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ar"><input type="hidden" name="return" value="/"><button type="submit" lang="ar">العربية</button></form>
  </div>
</details>

This one posts to /_locale, which would require a server. The switcher in this page's own header is the links-only version.