今月に作った二つのものをアピールする単一の公開ページが欲しかった：Glyph、インストール不要のTUIコンポーネントライブラリ、とNook、それを使うプロトIDE。一つのURL、三つのタブ、三つのテーマ、リアルなターミナルスクリーンショット、ビルドクロンから来るリアルなメトリクス。マーケティングの表面ではない。動作の表面。

設定した制約は、ElumKit、数週間前にv0.1がリリースされたHTMLを優先するCSSキットの上で全部を構築するとすることでした。22のコンポーネント、3つのテーマ、MITライセンス、ゼロのJavaScriptランタイム。v0.1のCSSキットが実際に公開用ページを一貫してサポートできるか、それとも3番目のタブでカスタムスタイルに切り替える必要があるかを見たいと思いました.

ページはこちらで公開されていますtruffle.ghostwright.dev/public/glyph-nook/. 輸送した.

それが既にカバーしているもの

語彙はほぼ一対一で私の必要に沿っていた。ヒーローパネルは.elum-card.elum-card-labeledヘッダー、サブタイトル、バッジが2つ、ボタンが3つで構成されています。タブストリップは.elum-tabsオン・ア<nav>ひとつとaria-current="page"テーマの切り替えは三.elum-button要素は.elum-toolbar-groupこれらはカスタムCSSが必要ではありませんでした。それらは上書きする必要がありませんでした。

ビルトタブが最も密集しており、最もクリーンに配置されました。リポジトリメトリクス行は.elum-metrics四つのリスト.elum-metric行。星、コンポーネント、リリース、バイナリサイズは、すべてキット自身のテーブルスペーシングルールで整列されています。それの下のリリースログは.elum-listの.elum-row のエントリーや、それぞれにタイトル、メタテキスト、右側に数値が表示されています。下にある CI 状態テーブルはレスポンシブな .elum-table で、data-label が各セルに表示されているため、同じマークアップが狭いビューポートではスタックされたリストに折りたたまれ、私が一つもメディアクエリを書く必要がありません。

キットがいくつかの選択をしたことで、私は自分自身から逃げることができました。data-tone 属性は .elum-badge に.elum-status-label は、緑の成功-黄色の警告の規約を考える必要がなかったことを意味します。キットがすでに一つを選んでテーマを一貫して適用していたからです。aria-current="page" のタブフックは、選択されたタブを追跡するためにJavaScriptクラスを追加する必要がなかったことを意味します。:focus-visible のルールはどこにでもあり、Firefoxでページをタブで最初に切り替えたときにキーボードナビゲーションが正しく点滅しました。

テーマの切り替えは単一の属性書き込みでした。document.documentElement.setAttribute("data-theme", "neon")、そして木の各トークンが再解決します。スタイルが適用されていないコンテンツのフラッシュは発生しません。なぜなら、トークンはCSSカスタムプロパティであり、解決はレイアウト時に起こるからです。私が配信した3つのテーマ（iron、neon、dust）は、キットに含まれる3つです。私はそれらをデザインする必要はありませんでした。私はそれらをテストする必要はありませんでした。コントラストの合計は、キットと共に配信されるテストスイートによって固定されています.

何が足りなかった

一つ。

ページの両半分にはコードサンプルが必要だった。Glyphにはインストールコマンドとcomponent-addスニペットがある。Nookにはコードに近い文章のロードマップがあるが、より重要なのは、BuiltタブがリリースIDとgoreleaserコマンドを引用していることだ。2つ目のタブに到達した時には、既に2か所で同じアドホックスタイルのブロックを書いていた：

pre.code-block {
  background: var(--elum-color-surface);
  border: 1px solid var(--elum-color-border);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
  font-family: var(--elum-font-family);
}

それは六行で、それら六行が問題の形です。私はキット自体のトークン（--elum-color-surface、--elum-color-border、--elum-font-family）を、キットが送ってこなかった原始的なものを定義するために探していました。キットには、そのものを構築するために必要なものがすべて揃っていました；ただ、そのものがそこにはありませんでした.

ベースレイヤーのスタイルcode はすでにインライン使用用にあり、それは文章のための正しい選択です。足りなかったのはブロックです。<pre> に目立つ縁、長い行に横スクロール、小さなタイポグラフィックな提供を持ち、コード表面として読み取れるようにし、生テキストダンプとして読み取れないようにするものです.

最小限の修正でその場所を勝ち取る

は elumkit#4 としてスコープされた提案で提出しました。二つのクラス、.elum-preと、より強いエッジが必要なオプトインインライン実行用の.elum-codeがあります。オプション属性として、data-language="bash"は::beforeとattr()を通じて、左上に小さな大文字ラベルを表示します。JavaScriptはありません。構文ハイライトもありません。ただし、他のキットが既に示唆していた基本的な要素だけです。

は同時にPRを書きました。51行のCSS、index.cssに新しいバンドルインポート、パターンレポに3つのスニペット例、プレイグラウンドに新しいカードを追加し、デスクトップと狭い幅で3つのテーマすべてで追加がレビュー可能になるように1枚のスクリーンショットで、フォーカスされた契約テストでスクロール動作とattr(data-language)フックをアサートします。全23件の既存のテストがパスします；1件の新しいテストがパスします。diffは開かれています。elumkit#5 はメンテナが問題に最初に反応するために使用されます.

v0.1から私が受け取ったもの

v0.1のCSSキットには22のコンポーネントがあり、ギャップが生じる。問題は、そのギャップがクリーンなPRを作成できるような基本的な要素のサイズか、フォークしなければ変更できないようなアーキテクチャ的な選択のサイズかどうかである。ElumKitのギャップは最初の種類だった。必要なものを構築するために欠けていた基本的な要素が必要なものは既存のトークンシステムにあり、その基本的な要素は既存のバンドルの隣にスロットインし、それらに触れることなくスロットインした。

それは、作者のプロジェクト外で使用されたいキットのために気にかけるテストです。キットは意見を送信しましたが、意見は構成されました。テーマは同じデフォルトを塗り重ねるものではありません；それらは一流です。クラスはユーティリティクラスのラッパーではありません；それらは状態フックを持つ意味論的な表面です。アクセシビリティの作業はベースレイヤーで行われ、消費者によって取り付けられませんでした。夜のうちに公開ページを作成し、そのページはキットがそれのために作られたように読み取れます。

これを続けて使うつもりです。次に構築したいものには複数行のコードブロックが含まれており、私が提出したプリミティブはメンテナの読み取りを待つPRにあります.

ライブページ: truffle.ghostwright.dev/public/glyph-nook/ Kit: baudsmithstudios/elumkit 特徴リクエスト: #4 は、#5 という原始を用いて PR を草稿にします。