glasskit

GlassKitは、純粋なCSSで構築されたコンポーネントライブラリであり、READMEではAppleのiOS 26「Liquid Glass」およびvisionOSのデザイン言語にインスパイアされたグラスモーフィズムの美学に基づいていると説明されています。JavaScriptフレームワークやビルドステップを導入することなく、ネイティブでモダンな感覚のアプリやインターフェースを実現することを目的としています。 リポジトリに含まれる内容 - glasskit.css：すべてのコンポーネントとデザイントークンを含むコアライブラリ - glasskit.min.css：リリース時に生成される軽量化ビルド - glasskit-styles.js：Shadow DOM内部で使用するためのConstructable Stylesheet - theme-override.css：カスタムブランドテーマ用のテンプレート（Ocean Blue、Emerald Green、Roseの4つの例を含む） - index.html、showcase.html、docs.html、およびde/フォルダ内のドイツ語翻訳ページ - SKILL.md：LLMやコーディングアシスタント向けの構造化されたコンポーネントリファレンス 本プロジェクトはMITライセンスで、Jungherz GmbHによって開発されました。公開デモ、ドキュメント、ショーケースはglasskit.jungherz.comでホストされています。 コンポーネントとビルディングブロック READMEでは、コンポーネントを以下のグループに分類しています。ナビゲーションとレイアウト（オーロラグラデーション背景、ナビゲーションバー、丸いピル型アイコンボタン、固定ボトムタブバー、アクセサリーカプセル付きのフローティングピル型タブバー、アコーディオン、ディバイダー）、コンテンツ（タイトル、カード、グローカード、バッジ、アバター、ステータス通知、iOSスタイルのグループ化リスト）、アクションとフィードバック（プライマリ・セカンダリ・ターシャリボタン、ぼかしオーバーレイ付きモーダル、トースト、フェードおよびスケールアニメーション付きのアンカー付きポップオーバー）、およびフォーム要素（入力、テキストエリア、セレクト、検索フィールド、iOSスタイルのトグル、チェックボックス、ラジオ、レンジスライダー、プログレスバー）。合計で24のコンポーネントを提供しています。 コンポーネント以外に、glass-で始まるコンポーネントクラスと並んで、flexレイアウト、スペーシング、テキスト配置、サイジングのためのgl-プレフィックスを持つユーティリティクラスを提供しています。命名規則はBEMに準拠しており、既存のスタイルシートとの衝突を避ける設計になっています。 テーマ設定とデザイントークン ダークモードとライトモードの両方をサポートしており、html要素のdata-theme属性で切り替えます。専用のテーマ切り替えコンポーネントも含まれています。ほぼすべての視覚的値がCSSカスタムプロパティとして公開されており、プライマリカラー、テキストカラー、5段階のガラス表面グラデーション、3段階のぼかしレベル、カード・ボタン・入力欄の角丸、スペーシングスケール、シャドウおよびインセットトークンなどが含まれます。ブランドのカスタマイズは--gl-color-primaryとそのダークバリアントを宣言することで行い、バージョン1.11.0からはグラデーションの中間点、フォーカスリング、ボタンのグロー、レンジのつまみがこれらの値から派生するようになりました。READMEでは、カスタムプロパティは宣言された場所で置換されるため、ブランド変数は:rootで宣言すべきであると記されています。 Web ComponentsとShadow DOM 外部スタイルシートはシャドウ境界を越えられないため、本ライブラリはadoptedStyleSheetsに割り当て可能な共有CSSStyleSheetであるglassSheetを提供するESモジュールと、フォールバックとしてのCSS文字列エクスポートを提供しています。READMEでは、プレーンなカスタム要素、Hybrids.js、およびLitでの使用例が示されており、--gl-*カスタムプロパティとテーマ切り替えがシャドウルートを越えて機能することが説明されています。 インストールと互換性 GlassKitは、jsDelivrまたはunpkgからlinkタグ経由でロードするか、npmから@jungherjungherz-de/glasskitとしてインストールしてCSSまたはJavaScriptからインポートするか、GitHubリリースから直接ダウンロードして利用できます。フットプリントは未圧縮で51KB、軽量化して39KB、gzip圧縮して6.5KBであり、外部依存関係はありません。ガラス効果はbackdrop-filterに依存しており、Safari、Chrome/Edge、Samsung Internetでフルサポートされ、Firefoxはバージョン103からサポートされています。backdrop-filterがない場合でも、定義済みの背景色によりインターフェースは利用可能な状態に保たれます。 本ライブラリは、3つのファミリーのCSS基盤として提示されています。GlassKit ElementsはアプリUI用のバニラJavaScriptカスタム要素を提供し、GlassKit Webは同じデザイン言語に基づいたセクション、i18n、SEOを備えたAstroウェブサイトテンプレートです。コントリビューションは、BEM風の命名、既存のデザイントークン、ダーク/ライトモードへの対応、および44px以上のタッチターゲットを遵守することが求められています。