rastrillo デザインシステム
デザインシステムが提供するものの概要。テーマ: plain。言語: 日本語。
はじめに
rastrillo のアプリは初日にこれを全部受け取りますが、デザインシステムは誰でも使えます。JavaScript でプログレッシブに拡張しますが、JavaScript は必須ではありません。
スタイルシート
tokens.css は構造です。コンポーネントのクラス、レイアウト、そして文字・余白・角丸のスケール。値は参照で、実体は別の場所で決まります。themes/<name>.css は色と書体、そして形です。ひとつの :root ブロックで、すべての色を light-dark() の対として一度だけ宣言します。
スクリプト
rastrillo.js はプログレッシブ・エンハンスメントのシムです。フラグメントのポーリング、ビジー状態、ライトディスミス。select.js と datetime.js は拡張で、コントロールが自分から名乗り出るまで何もせず、どちらも単独で削除できます。
各ファイルの大きさ
それぞれの構成要素のファイルサイズ。
- tokens.css構造。すべてのコンポーネントのクラス、すべてのスケール、そして色のリテラルはひとつもなし。どのテーマでも同じファイルです。122033 バイト
- theme-day.cssday テーマの色、書体、形。:root ブロック一つのなかで、すべての色が light-dark() の対として一度だけ宣言されています。10828 バイト
- theme-plain.cssplain テーマの色、書体、形。:root ブロック一つのなかで、すべての色が light-dark() の対として一度だけ宣言されています。10286 バイト
- theme-signal.csssignal テーマの色、書体、形。:root ブロック一つのなかで、すべての色が light-dark() の対として一度だけ宣言されています。11083 バイト
- rastrillo.jsプログレッシブ・エンハンスメントのシム。フラグメントのポーリング、ビジー状態、ライトディスミス。足場を組んだアプリはすべて受け取ります。16364 バイト
- select.jsfield-select の検索できるコンボボックス。select が data-rst-select で名乗り出るまで何もせず、単独で削除できます。11919 バイト
- datetime.js日付フィールドの自然言語入力。フィールドが data-rst-date か data-rst-time で名乗り出るまで何もせず、単独で削除できます。76584 バイト
- calendar.jsそのフィールドのカレンダーボタンが開く月のグリッド。datetime.js がパネルを求めるまで何もせず、単独で削除できます。無ければボタンはブラウザ自身のピッカーに戻ります。22725 バイト
新しいアプリが受け取る CSS と JavaScript は合計 259911 バイトです。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 は足場を組む時点でアプリの static ディレクトリにコピーされ、そこで凍りつきます。一方、それが装う partial はモジュールとともに更新され続けます。アプリは何も言わないまま、新しいマークアップを古い CSS で動かすことになりかねません。アップグレードのときは tokens.css を、テーマとスクリプトもろとも、コピーし直してください。
rastrillo doctor は、アプリの凍結されたファイルをモジュールのものと突き合わせ、コピーし直すことを申し出ます。