Skip to content
Sections
Language, currently English
Rastrillo Design System

Shells

The page frame itself. rastrillo new writes one of these as templates/layout.html; a page fills its content hole and overrides whichever chrome blocks it needs. Each demo below is a whole page at its own URL: open one to see it at full width, where the sidebar's rail and the topbar's footer actually have room.

column

The plain centred page every scaffolded app starts on: a skip link, a title, and the content column.

Preview

Open the column shell (opens in a new tab)

topbar

Brand, navigation and an account menu across the top, with a footer under the page.

Preview

Open the topbar shell (opens in a new tab)

sidebar

A navigation rail beside the page. On a phone, the rail is an index page and every other page has a back control. No JavaScript needed.

Preview

Open the sidebar shell (opens in a new tab)

console

A bar across the top and a navigation rail down the side at once, the shape most admin consoles are. On a phone, the bar's menu opens as a card and the rail is an index page. No JavaScript needed.

Preview

Open the console shell (opens in a new tab)

stage

One card in the middle of a full-page backdrop, for a screen that stands alone. The sign-in screen is what it is for.

Preview

Open the stage shell (opens in a new tab)