本文へ移動
セクション
言語、現在は日本語
Rastrillo デザインシステム

シェル

ページの枠そのものです。rastrillo new はこのうちひとつを templates/layout.html として書き出します。ページは内容の穴を埋め、必要な枠のブロックだけを上書きします。下のデモはどれも独自の URL を持つ一枚のページです。ひとつ開いて全幅で見てください。sidebar のレールや topbar のフッターに、実際に場所があるのが分かります。

column

生成したアプリがまず立つ、素朴な中央寄せのページです。スキップリンク、タイトル、そして本文の列。

プレビュー

column シェルを開く (新しいタブで開きます)

topbar

上端にブランド、ナビゲーション、アカウントメニューを並べ、ページの下にフッターを置きます。

プレビュー

topbar シェルを開く (新しいタブで開きます)

sidebar

ページの横に立つナビゲーションレールです。スマートフォンではレールが目次ページになり、ほかのどのページにも戻る操作があります。JavaScript は不要です。

プレビュー

sidebar シェルを開く (新しいタブで開きます)

console

上にバー、横にナビゲーションのレール、その両方です。管理コンソールのほとんどはこの形をしています。スマートフォンではバーのメニューがカードとして開き、レールは目次ページになります。JavaScript は不要です。

プレビュー

console シェルを開く (新しいタブで開きます)

stage

ページ全体に広がる背景の中央に、カードがひとつ。単独で成り立つ画面のためのものです。サインイン画面のためにあります。

プレビュー

stage シェルを開く (新しいタブで開きます)