rastrillo デザインシステム
デザインシステムが提供するものの概要。テーマ: signal。言語: 日本語。
概要
Rastrillo のデザインシステムが目指すのは、どんなアプリでも一貫した、丁寧で、アクセシブルな UI を手に入れられる出発点になることです。JavaScript への依存はないか最小限で、多言語に対応し、きれいで現代的な HTML と CSS で書かれています。LLM の助けがあってもなくても使っていて心地よく、手を入れて作り替えやすいように設計されています。
デモアプリ
このシステムだけで作った、動くアプリです。ダッシュボード、一覧、開いたレコードが一件。それぞれに固有のアドレスがあります。JavaScript は使いません。
次に見るところ
- はじめにRastrillo デザインシステムに同梱されるスタイルシートとスクリプトの詳細。
- トークンこのシステムを組み立てているカスタムプロパティのすべて。テーマの色と書体、そしてサイズ・余白・角丸のスケールです。
- アイコンアイコン slug のすべてを、コンポーネントが描く大きさで。コピーできる呼び出しと、lucide.dev での名前つき。
- 一覧画面一般的な一覧画面。タイトル、ツールバー、行があり、デスクトップでもモバイルでも動きます。
- 表示画面を組み立てる小さな語彙です。状態、人物、進捗、そしてただひとつのお知らせの形。
- フォーム実際のフォームが取らせる状態で、すべてのコントロールを並べています。どれも余白のある rst-box の中に入っています。これらの部品がそう前提しているからです。
- 日付と時刻datetime.js が拡張する四つのフィールド。いずれも下にネイティブの入力要素を残すので、スクリプトのない読者には壊れたものではなく素のコントロールが届きます。
- ルートレスポンスの一部ではなく、それ自体がレスポンス全体になる部品です。
- UI プリミティブコンポーネントにはなれない形。中身は呼び出す側しか知らないからです。カード、データのグリッド、メニュー、そしてシェル自身の枠組み。
- 日付・数値・名前日付、数値、金額、名前、住所の見せかたと、取り違えられやすい組み合わせ。
- 画面このデザインシステムで作った画面の例です。自分のアプリのひな形として使えます。
- シェルrastrillo new が生成できるページ枠。どれも全幅で開きます。