はじめに
rastrillo のアプリは初日にこれを全部受け取りますが、デザインシステムは誰でも使えます。JavaScript でプログレッシブに拡張しますが、JavaScript は必須ではありません。
スタイルシート
tokens.css は構造です。コンポーネントのクラス、レイアウト、そして文字・余白・角丸のスケール。値は参照で、実体は別の場所で決まります。themes/<name>.css は色と書体、そして形です。ひとつの :root ブロックで、すべての色を light-dark() の対として一度だけ宣言します。
スクリプト
rastrillo.js はプログレッシブ・エンハンスメントのシムです。フラグメントのポーリング、ライトディスミス、スイッチのドラッグ。busy.js はビジールールです。anchor.js は CSS にできない場所でドロップダウンのメニューを画面内に収めます。select.js と datetime.js は拡張で、コントロールが自分から名乗り出るまで何もせず、どちらも単独で削除できます。
各ファイルの大きさ
サイズの単位は KiB です。訪問者がダウンロードするのは gzip 圧縮後のものです。
- tokens.css構造。すべてのコンポーネントのクラス、すべてのスケール、そして色のリテラルはひとつもなし。どのテーマでも同じファイルです。そのままで 281 · gzip 圧縮で 73 · コメントを除いて gzip 圧縮で 21
- theme-day.cssday テーマの色、書体、形。:root ブロック一つのなかで、すべての色が light-dark() の対として一度だけ宣言されています。そのままで 27 · gzip 圧縮で 7.3 · コメントを除いて gzip 圧縮で 1.7
- theme-plain.cssplain テーマの色、書体、形。:root ブロック一つのなかで、すべての色が light-dark() の対として一度だけ宣言されています。そのままで 18 · gzip 圧縮で 4.2 · コメントを除いて gzip 圧縮で 1.1
- theme-signal.csssignal テーマの色、書体、形。:root ブロック一つのなかで、すべての色が light-dark() の対として一度だけ宣言されています。そのままで 18 · gzip 圧縮で 4.6 · コメントを除いて gzip 圧縮で 1.2
- shell.cssスマートフォンでのページ間のスライド。sidebar と console シェル用です。shell.js と一緒に削除できます。そのままで 4.2 · gzip 圧縮で 1.1 · コメントを除いて gzip 圧縮で 0.5
- rastrillo.jsプログレッシブ・エンハンスメントのシム。フラグメントのポーリング、ライトディスミス、スイッチのドラッグ。足場を組んだアプリはすべて受け取ります。そのままで 19 · gzip 圧縮で 7.2 · コメントを除いて gzip 圧縮で 2.6
- busy.jsビジールール。フォームの送信中、ボタンは少なくとも650msスピナーを表示し、二度目の送信を拒否します。「戻る」で元に戻ります。足場を組んだアプリはすべて受け取ります。そのままで 15 · gzip 圧縮で 5.3 · コメントを除いて gzip 圧縮で 1.3
- live.jsライブページ：サーバーがデータの変更を知らせると更新されるセクションと、その場で保存されるフォーム。ページに rastrillo-live の meta タグが付くまでは何もせず、単独で削除することもできます。そのままで 29 · gzip 圧縮で 10.0 · コメントを除いて gzip 圧縮で 5.0
- light.js奥行きのスタイルが読む光。時刻に応じて照らされる影と、ポインターの下のボタンに乗る光沢です。静止したデザインにするなら削除してください。そのままで 11 · gzip 圧縮で 4.1 · コメントを除いて gzip 圧縮で 2.1
- anchor.jsCSS のアンカー配置に対応していないブラウザで、ドロップダウンのメニューを画面内に収めます。対応しているブラウザでは何もしません。サポートするすべてのブラウザが対応したら削除してください。そのままで 3.2 · gzip 圧縮で 1.4 · コメントを除いて gzip 圧縮で 0.6
- shell.jssidebar と console シェルのスマートフォン向けナビゲーション。ページ間のスライド、履歴を再利用する「戻る」、離れたセクションへのフォーカスの復帰。単独で削除できます。そのままで 8.0 · gzip 圧縮で 3.2 · コメントを除いて gzip 圧縮で 1.4
- transition.jscolumn、stage、topbar のページで、ページ遷移がスキップされた際にエラーが記録されるのを防ぎます。sidebar と console のページには不要です。そのままで 0.9 · gzip 圧縮で 0.4 · コメントを除いて gzip 圧縮で 0.4
- select.jsfield-select の検索できるコンボボックス。select が data-rst-select で名乗り出るまで何もせず、単独で削除できます。そのままで 55 · gzip 圧縮で 18 · コメントを除いて gzip 圧縮で 8.0
- datetime.js日付フィールドの自然言語入力。フィールドが data-rst-date か data-rst-time で名乗り出るまで何もせず、単独で削除できます。そのままで 76 · gzip 圧縮で 24 · コメントを除いて gzip 圧縮で 11
- calendar.jsそのフィールドのカレンダーボタンが開く月のグリッド。datetime.js がパネルを求めるまで何もせず、単独で削除できます。無ければボタンはブラウザ自身のピッカーに戻ります。そのままで 22 · gzip 圧縮で 7.1 · コメントを除いて gzip 圧縮で 3.1
新しいアプリが受け取る CSS と JavaScript は、そのままで 542 KiB、gzip 圧縮で 159 KiB です。tokens.css と、テーマ 1 つと、スクリプト。
新しい rastrillo アプリでは
rastrillo new はこれらをアプリの static ディレクトリに書き出し、レイアウトから読み込みます。先に tokens.css。そこから先はあなたのものです。手を入れても、使わないものを消してもかまいません。
rastrillo new --theme=plain myappテーマは二重に固定されます。--theme が、同梱テーマのどれを static/theme.css にコピーするかを決め、その選択はアプリの生成時に記録されます。
const vendoredTheme = "plain"フレームワークなしで使う
上の名前はそのままリンクです。tokens.css とテーマを 1 つ持っていけば、視覚システムはそれで全部です。ふつうの HTML に属性を付けるだけで、ビルド手順はありません。
この順に読み込みます。tokens.css が先です:
<link rel ="stylesheet" href ="tokens.css" >
<link rel ="stylesheet" href ="theme-plain.css" >アップグレード
午後をひとつ失う前に知っておきたい罠。tokens.css は足場を組む時点でアプリの static ディレクトリにコピーされ、そこで凍りつきます。一方、それが装う partial はモジュールとともに更新され続けます。アプリは何も言わないまま、新しいマークアップを古い CSS で動かすことになりかねません。アップグレードのときは tokens.css を、テーマとスクリプトもろとも、コピーし直してください。
rastrillo doctor は、アプリの凍結されたファイルをモジュールのものと突き合わせ、コピーし直すことを申し出ます。