Lily とは？

要点

Lily はウェブコンポーネントのカタログで、それぞれが 8 種類のヘッドレス実装（HTML、Svelte、React、Vue、Angular、Blazor、Nunjucks、Web Components）で提供されています。 さらに、スタイルの付け方を示す、すぐに使えるサンプルアプリも用意されています。

ヘッドレス版にはCSS が一切含まれません。セマンティックな HTML、ARIA のロールと状態、キーボード操作、多言語化に対応したプロパティを提供し、 ビジュアルデザインはあなたが担います。

設計原則

アクセシブル

すべてのコンポーネントはセマンティックな HTML から始まります。ARIA は、HTML だけではパターンを表現できない場合にのみ重ねて使います。コンポーネントは WCAG 2.2 AAA を目標としており、色、余白、フォーカス、キーボード操作のすべてを考慮しています。

組み合わせ可能

Lily は、単一の目的を持つ小さなコンポーネントが組み合わさる設計を好みます。複合パターンは何度も登場します。

• Nav → List → ListItem — パンくずリスト、目次、アコーディオンメニュー、ツリーメニュー、ページ送りに使います
• Form → Field → Input — ラベル、ヒント、エラーを備えたあらゆるフォームレイアウトに使います
• Table → Head/Body/Foot → Row → Data — テーブル、カレンダー、ガントチャート、カンバンボードに使います
• Bar → BarButton — ツールバー、タブバー、タスクバー、アクションバー、メニューバーに使います
• Picker → PickerButton — カラーピッカー、評価ピッカー、テーマピッカーに使います

多言語化に対応

ユーザー向けの文字列は 1 つもハードコードされていません。ラベル、プレースホルダー、エラーメッセージ、ボタンの文言はすべてパラメーターです。 お使いの翻訳システムを組み込めば、Lily はあなたが使うどんな言語でも話します。

ヘッドレス

ヘッドレスコンポーネントには CSS がなく、 <style> ブロックも、あなたが選んでいないデザイントークンもありません。 各ルート要素にはケバブケースのクラス名が 1 つ付いているので、セマンティック CSS、Tailwind、CSS-in-JS など、好きな方法でスタイルを指定できます。

すぐに使えるサンプル

サンプルアプリは、実際の利用に向けてコンポーネントにスタイルを付ける方法を示します。どのデザイントークンを設定し、どんなバリエーションを加え、ページをどう組み立てるかが分かります。 単なるサンドボックスではなく、SvelteKit、Next.js、Nuxt、Blazor、Eleventy による本格的なアプリです。

着想の源

Lily は、意図的に幅広く選んだデザインシステムからパターンや言葉づかいを取り入れています。

• NHS UK Design System
• GOV.UK Design System
• U.S. Web Design System (USWDS)
• ONSdigital design system
• Design System AU (Australian Government)
• Mozilla Protocol
• Adobe Spectrum
• Ant Design
• Wonderflow Wanda
• DaisyUI
• shadcn/ui
• Reuters graphics components

ライセンス

Lily は BSD、MIT、Apache-2.0、GPL-2.0、GPL-3.0 のマルチライセンスです。 プロジェクトに合うものをお選びください。いずれも合わない場合は、ご連絡ください。

連絡先

プロジェクトリード: Joel Parker Henderson — joel@joelparkerhenderson.com

バグを見つけた、アイデアがある、コンポーネントを提供したい。そんなときは、 GitHub で issue またはプルリクエストを開いてください。