レイアウトユーティリティ

Hypermedia Components は、hc.utilities カスケードレイヤーにひと握りの レイアウトユーティリティを同梱しています。これらはシステムの残り — hc-shell アプリケーションシェルを含む — が依存するレスポンシブな構成部品です。

意図的に少数でセマンティックです。これはユーティリティファーストのフレームワークではありません: クラス名にばらまかれたスペーシングスケールも、md: / lg: ブレークポイントプレフィックスもありません。各ユーティリティは本質的にレスポンシブです — flex-wrap、グリッドの auto-fill、コンテンツベースのフレックス比によって与えられたスペースに適応し、メディアクエリなし。同じクラスがフルページでも、ダイアログでも、カードでも、サイドバーでも正しく振る舞います。ビューポートではなく コンテナに応答するからです。

インポート

ユーティリティはフルスタイルシートに含まれています。粒度の細かい構成では、コアの上にこのレイヤーだけをインポートします:

import '@hypermedia-components/core/css/core';       // tokens + base
import '@hypermedia-components/core/css/utilities';   // this layer

最後のカスケードレイヤーにあるため、あなたのアプリケーション CSS は詳細度の戦いなしにこれらを上書きできます。

調整ノブ

各ユーティリティは、トークンベースのフォールバックを持つ 1〜2 個のローカルカスタムプロパティを公開します。インラインまたはラッパーのルールで設定してください — 要素ごとのバリアントクラスを追加してはいけません:

<ul class="hc-cluster" style="--hc-cluster-gap: var(--hc-space-4)">…</ul>

`.hc-stack` — 縦のリズム

子要素を一定の間隔で縦一列に並べます。ノブ: --hc-stack-gap (デフォルト --hc-space-3)。

First

Second

Third

<div class="hc-stack">
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</div>

`.hc-cluster` — 折り返す行

余地がなくなると折り返す横並びグループ — ボタン行、タグリスト、メタバー、ツールバー。ノブ: --hc-cluster-gap(デフォルト --hc-space-2)、 --hc-cluster-align(デフォルト center)。

<div class="hc-cluster">
  <button class="hc-button">Save</button>
  <button class="hc-button" data-variant="secondary">Duplicate</button>
  <button class="hc-button" data-variant="ghost">Archive</button>
  <button class="hc-button" data-variant="error">Delete</button>
</div>

`.hc-grid` — レスポンシブグリッド

最小トラック幅で収まるだけ等幅カラムを並べ、収まらなくなったら折り返します — ブレークポイントなし。ノブ: --hc-grid-min(デフォルト 16rem)、--hc-grid-gap(デフォルト --hc-space-4)。組み込みの min(…, 100%) ガードが、広いトラックが狭いコンテナからあふれるのを防ぎます。

<div class="hc-grid" style="--hc-grid-min: 16rem;">
  <article class="hc-card">…</article>
  <article class="hc-card">…</article>
  <!-- …as many as you like -->
</div>

空のトラックを残す代わりに少数のアイテムを行いっぱいに伸ばしたいときは、(grid-template-columns を自分で設定して)auto-fill を auto-fit に替えてください。

フォーム向け: `data-align="start"` と `data-span="full"`

高さの揃ったカードには既定の stretch が合います。フォームには合いません。1 行の入力の隣に 3 行のテキストエリアがあると、隣が縦長の空箱に引き伸ばされます。2 つのオプトインで解決します。

<div class="hc-grid" data-align="start" style="--hc-grid-min: 18rem;">
  <div class="hc-field">…</div>

  <!-- トラック数によらず 1 行を占有する -->
  <div class="hc-field" data-span="full">
    <label class="hc-field__label" for="notes">Notes</label>
    <textarea class="hc-input" id="notes" rows="3"></textarea>
  </div>
</div>

data-align="start"（グリッド側）— アイテムは伸びずに行の上端に揃います。高さの揃ったカードもこのグリッドの主な用途なので、オプトインです。
data-span="full"（アイテム側）— 1 行を占有します。auto-fill ではどのアイテムが隣り合うかが幅で変わるため、同じ行を共有しては困るもの（テキストエリア、日付範囲、ラジオ群）は、特定の幅でしか成立しない組み合わせに頼らず自分で宣言します。

`.hc-container` — 中央寄せのコンテンツ領域

最大行長とインラインパディングを持つ中央寄せカラム。ノブ: --hc-container-max(デフォルト 72rem)、--hc-container-pad (デフォルト --hc-space-4)。

<div class="hc-container">
  <!-- page content, capped and centred -->
</div>

`.hc-sidebar` — サイドバー + メイン

最初の子がサイドバー、2 番目がメイン領域の 2 部レイアウト。メイン領域は最小幅を保ち、保てなくなるとサイドバーが自分の行に折り返します。純粋なフレックスボックスなので、コンテナ幅で再配置します — 狭いパネルの中に置けばそこで畳まれ、ビューポートメディアクエリは不要です。ノブ: --hc-sidebar-width(デフォルト 16rem)、 --hc-sidebar-content-min(デフォルト 60%)、--hc-sidebar-gap (デフォルト --hc-space-4)。

<div class="hc-sidebar">
  <nav aria-label="Section">…</nav>
  <main>…</main>
</div>

`.hc-fill` — 残りの空間を取る

全高のアプリ画面が必ず必要とし、そして最も間違えやすい組み立てです。固定の領域が並ぶページカラムがあり、その残りを1 つの領域が取って、スクロールするのはその中身だけ、という形。

<div class="page">          <!-- flex 縦並び、両軸の最小値 0 -->
  …タイトル・ツールバー…
  <form class="hc-fill">    <!-- 経路上のすべての要素に -->
    <div class="hc-datagrid hc-fill">…</div>
  </form>
</div>

.hc-fill は display: flex; flex: 1; flex-direction: column に 両軸の最小値を足したものです。どちらも効いています。

min-block-size: 0 を落とすと領域が中身の高さまで伸び、ページがスクロールして固定していたクロームが流れます。
min-inline-size: 0 を落とすと、幅の広い子（max-content の表）が祖先を横のスクロールポートにし、クロームを横に引きずります。

カラムと埋める領域の間のすべての要素に付けてください。包んでいる <form> も含みます。hc-datagrid に付けた場合は --hc-datagrid-max-height を既定の 70vh（スクロールするページの中にあるグリッドに正しい値）から 100%（グリッド自身がページである場合に正しい値）へ切り替えます。

`.hc-sr-only` — 視覚的に隠す

支援技術には利用可能なまま、視覚的なレイアウトから取り除かれるコンテンツ — スキップリンク、アイコンのみコントロールのラベル。 .hc-hidden と違い、アクセシビリティツリーには残ります。

<button class="hc-button" type="button">
  <svg aria-hidden="true">…</svg>
  <span class="hc-sr-only">Delete</span>
</button>

`.hc-hidden` — 強制非表示

display: none !important。レイヤー順によりコンポーネントのルールに勝ち、!important はレイヤー外のアプリケーション CSS やインラインの display にも勝ちます。サーバから(クラスを出し入れして)、または htmx から、インラインスタイルなしで表示を切り替えるのに使います。

<div class="hc-hidden">Removed from layout entirely</div>

`.hc-numeric` — 等幅数字

font-variant-numeric: tabular-nums を、アプリ所有の数値表示面 — stat タイル、KPI 値、カウンタ — に与えるユーティリティです。キットのコンポーネントでデフォルト化済みの場所(テーブル / データグリッドのセル、フォームコントロール、カレンダーの日付、ページネーション、バッジ、タイムラインのタイムスタンプ)の外側で使います。数字の幅が均一になるので値が揃い、更新時にガタつきません。テキストには影響しません。グリフのみ — 揃えは文脈の仕事です。

<p>
  <span class="hc-numeric">42,195</span> rows scanned
</p>

レイアウトユーティリティ

インポート

調整ノブ

.hc-stack — 縦のリズム

.hc-cluster — 折り返す行

.hc-grid — レスポンシブグリッド

フォーム向け: data-align="start" と data-span="full"

.hc-container — 中央寄せのコンテンツ領域

.hc-sidebar — サイドバー + メイン

.hc-fill — 残りの空間を取る

.hc-sr-only — 視覚的に隠す

.hc-hidden — 強制非表示

.hc-numeric — 等幅数字

関連