# Pure CSSデザインシステム

## Pure CSSデザインシステムのインターフェースプレビュー

6つのキットを絞り込み、名前順に並べ替え、利用可能な項目を選択できます。フィルターを変更しても選択状態は維持されます。

## Pure CSSデザインシステムのデザインリファレンス

Pure CSS 3.1.0のコンパイル済みパッケージモジュール。これらは文字どおりのセレクター値であり、名前付きのデザイントークンAPIではありません。Pureは、ChakraやPicoのようなセマンティックなCSS変数のテーマを公開していません。アプリケーション側でタイポグラフィ、レイアウトの間隔、より明確なフォーカスアウトラインを追加しています。

### 公式ボタンとフォームの値

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| .pure-button padding | 0.5em 1em | 継承されたボタンの文字サイズに合わせて拡大縮小します。 |
| .pure-button radius | 2px | ボタンの標準的な角の形状。 |
| .pure-button background | #E6E6E6 | ニュートラルなボタンの塗り。 |
| .pure-button-primary background | rgb(0, 120, 231) | 任意のプライマリ／選択状態の塗り。 |
| .pure-button disabled opacity | 0.40 | 動作にもdisabled属性を使用してください。 |
| .pure-form input padding | 0.5em 0.6em | 一般的なテキスト入力のパディング。 |
| .pure-form input border | 1px solid #ccc | 入力欄の標準的な境界線。 |
| .pure-form input radius | 4px | 入力欄の形状はボタンの角丸とは異なります。 |
### 公式テーブルの値

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| .pure-table border | 1px solid #cbcbcb | テーブルの外側の境界線。 |
| .pure-table td / th padding | 0.5em 1em | 読みやすいセル間隔。 |
| .pure-table thead background | #e0e0e0 | 列見出しの背景面。 |
| .pure-table-striped odd-row fill | #f2f2f2 | 任意の縞模様。このサンプルでは横罫線を採用しています。 |
| .pure-table-horizontal | Bottom borders only | 縦の区切り線を使わずに行の構造を保ちます。 |
### レスポンシブグリッドの境界

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| sm | 35.5em | ブラウザーの既定値が16pxの場合は568px。 |
| md | 48em | 768px。サイドバーの幅が全体の4分の1になります。 |
| lg | 64em | 1024px。 |
| xl | 80em | 1280px。 |
| xxl | 120em | インストール済みの3.1.0レスポンシブグリッドにおける1920px。 |
### オリジナルのカタログスタイル

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Body | 16px / 1.5 Arial, Helvetica, sans-serif | アプリケーション側で明示的に指定するタイポグラフィ。 |
| Page heading | 34px / 1.15; 28px on mobile | 元のエディトリアル階層。 |
| Section heading | 18px / 1.3 | オリジナルのサイドバーと選択タイトル。 |
| Content gutters | 24px desktop, 16px mobile | 独自の外側の余白。 |
| Focus outline | 3px solid #0078e7; offset 3px | 標準ボタンのフォーカスグラデーションを補う、アプリケーション側の拡張です。 |
| Table minimum width | 540px | 横スクロール可能な領域内でも、列の意味を保ちます。 |
## Pure CSS デザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Pure CSS デザインシステム：少数のCSSモジュール

### CSSのモジュールを少数に絞る

> Pureには、基本的なスタイルの正規化、グリッド、ボタン、フォーム、メニュー、テーブルが用意されています。このカタログでは、パッケージのコンパイル済みロールアップと、レスポンシブグリッド用の別ファイルを使用します。JavaScriptフレームワーク、プロバイダー、ウィジェットのランタイムは読み込みません。フィルタリング、並べ替え、選択の処理はアプリケーションコードとして、上記にすべて記載しています。

Pureと、フル機能のコンポーネントプラットフォームを比較する際には、この違いが重要です。pure-tableクラスが提供するのはセルのスタイルであり、並べ替え、ページネーション、仮想化、選択の振る舞いではありません。pure-buttonは、ネイティブのbutton要素に適用できる視覚的なクラスです。この例では、クラス名で機能を実現するのではなく、意味を持つ要素をそのまま使用しています。

関連する仕様を確認する

## Pure CSS デザインシステム：独自のトークン体系ではなく、CSS実際の値を使用

### 独自のトークン体系ではなく、CSS実際の値を使用

Pureのコンパイル済みボタンスタイルでは、ニュートラルな#E6E6E6の塗り、2ピクセルの角丸、em単位のパディングが使われています。オプションのプライマリボタンはrgb(0,120,231)の背景に白いテキストです。フォーム入力欄の角丸は4ピクセルで、パディングも独自の値です。このデザインシステムのガイドでは、実際の違いをそのまま示し、存在しない共通の角丸スケールに当てはめることはしません。

このカタログでは、濃いブルーグレーのテキスト、ニュートラルな区切り線、淡い選択内容のサマリーを使い、意図的に控えめな配色にしています。これらはPureの公式ブランドカラーではありません。この例ではアプリケーション全体の代替配色を実装していないため、ダークモードの切り替えもありません。テーマ切り替えを追加する場合は、フォーム、テーブルヘッダー、ボーダー、テキスト、フォーカス状態をまとめて対応する必要があります。

関連する仕様を確認する

## Pure CSS デザインシステム：タイポグラフィと間隔はアプリケーション側で定義

### タイポグラフィと間隔はアプリケーション側で設定する

元のページレイヤーでは、フォントにArial/Helvetica、サイズに16ピクセル、行の高さに1.5を指定し、見出しを34px、セクションタイトルを18pxにしています。画面幅が狭い場合、見出しは28pxになります。これらは明示的な設定であり、Pureが編集向けのスケールを定めているということではありません。このレイアウトを再現するために必要な値は、すべてCSSの例に記載しています。

Pureのグリッドでは、インライン要素の単位に対応するため、グリッドコンテナ上でテキストの描画と文字間隔を調整しています。ユニットのルールでは、テキストの表示を通常の状態に戻します。またこのカタログでは、サイドバーと検索結果内で予期せずフォントが変わらないよう、グリッドユニットにもフォントファミリーを設定しています。小数幅を維持するため、アプリケーション側のパディングは各ユニットの内側に配置し、box-sizingにはborder-boxを指定しています。

関連する仕様を確認する

## Pure CSS デザインシステム：レスポンシブな比率にはレスポンシブモジュールが必要

### レスポンシブな比率にはレスポンシブモジュールが必要

サイドバーにはpure-u-1とpure-u-md-1-4を、検索結果にはpure-u-1とpure-u-md-3-4を組み合わせています。どちらも最初は全幅で表示されます。mdのメディアクエリ境界である48emに達すると、それぞれ幅が4分の1と4分の3になります。これにより、独自のJavaScriptレイアウト計算を使わずに、フィルターを読みやすい固定比率にできます。

メインのpure-min.cssロールアップには、レスポンシブグリッドのメディアクエリクラスが含まれていません。grids-responsive-min.cssを読み込まないと、md修飾子は機能しません。この構成では、両方のファイルを明示的に読み込みます。モバイル画面ではサイドバーがテーブルより前に表示され、検索結果のボーダーは削除されるため、ひと続きの読み順になります。

関連する仕様を確認する

## Pure CSS デザインシステム：フィルタリングと選択は別の処理

### フィルタリングと選択は別の処理

縦に並んだフォームには、ラベル付きの検索入力欄、カテゴリのセレクトボックス、在庫状況のチェックボックスがあります。いずれかの入力が変更されると、3つすべての条件を使って表示中の行を再描画します。フォームの送信は防止しているため、検索欄でEnterキーを押してもページ遷移しません。フィルターをクリアすると、ネイティブのresetを実行し、ブラウザーが初期値に戻した後で再描画します。

選択項目は、変更されないキットIDを格納したSetで管理します。フィルターで選択済みの項目が非表示になっても、Setからは削除されません。そのため、常に表示される確認リストが選択内容の基準になります。選択数の横でこの動作を説明しています。説明がないと、ユーザーがフィルターで非表示になった行を選択解除されたものと誤解するおそれがあります。

1. 利用可能なレコーダーまたはカメラを選択してください。

2. 別のカテゴリに絞り込み、選択した項目が確認リストに残ることを確かめてください。

3. フィルターとは別に、選択をクリアしてすべてのIDを削除できます。

関連する仕様を確認する

## Pure CSS デザインシステム：狭い画面でもテーブルの意味を保つ

### 狭い画面でもテーブルの意味を維持する

テーブルではcaption、thead、tbodyを使用し、列見出しにはscope属性を指定しています。「機材」見出しには、名前の順序を切り替えるネイティブのボタンがあります。親のthにはaria-sort="ascending"または"descending"を設定し、画面上の矢印と一致させています。並べ替え後も、すべての行で同じ列構造を保ちます。

最小幅を540pxにすることで、「選択」「機材」「カテゴリ」「利用状況」の意味を保ちます。画面が狭い場合は、ラベル付きのテーブル領域だけを横スクロールできます。この領域はキーボードでフォーカスでき、フォーカス位置も視覚的に示されます。ページ全体の幅は広がりません。各行を、見た目や意味が無関係なカードに変えるのではなく、データテーブルとして意図的にこの方法を採用しています。

関連する仕様を確認する

## Pure CSS デザインシステム：無効、空、フォーカスの状態には実際の動作が必要

### 無効、空、フォーカスの状態には実際の動作が必要

貸出中の機材は利用状況を説明するため一覧に残しますが、選択はできません。ネイティブのチェックボックスを無効にしています。Setが空の場合は、選択のクリアも無効になります。Pureのopacityルールによって無効状態の見た目は伝わりますが、操作を防ぐのはHTML属性です。

フィルターに該当する項目がない場合は、具体的な空状態のメッセージを表示し、ヘッダーは残します。結果件数は、丁寧な通知を行うステータス領域です。元のスタイルシートでは、標準のPureボタンのフォーカス表示がグラデーションで、アウトラインもリセットされるため、強調したfocus-visibleアウトラインを追加しています。この操作ツールでは、キーボードのフォーカス位置をより明確に示すことが役立ちます。

- 無効化されたチェックボックスで、利用できない機材を一覧から削除せずに説明します。

- 空状態のメッセージで、フィルターをクリアして元に戻す方法を説明します。

- ボタン、入力欄、セレクトボックス、スクロール領域にフォーカスアウトラインを表示します。

関連する仕様を確認する

## Pure CSS デザインシステム：カタログ全体をインストールして再現する

### カタログ全体をインストールして再現する

purecss@3.1.0 をインストールし、pure-min.css と grids-responsive-min.css をローカルのアセットディレクトリにコピーして、style.css より前にこの順番で読み込みます。完全な body、アプリケーションスクリプト、CSS は上記にあります。生成されたファイルは静的サーバーで配信できます。カタログ自体にビルドランタイムは不要です。

バンドルサイズを抑えるために選択範囲を絞る場合は、パッケージの各モジュールを個別に利用できます。CSS を縮小する際は、ベースとグリッドの依存関係に一貫性を保ってください。テーブルのスタイルシートだけをコピーして、フォームやボタンのクラスにもスタイルが適用されると思い込まないでください。現行のサンプルでは、説明のない部分的なバンドルより、再現可能な完全なセットアップを優先しています。

関連する仕様を確認する

## Pure CSSデザインシステム：CSSモジュールを依存関係を保ったまま選択する

### 依存関係を保ちながらCSSのモジュールを選ぶ

コンパイル済みのロールアップでカタログのボタン、フォーム、テーブルをスタイルし、grids-responsive-min.css でブレークポイントに応じた幅を設定します。レスポンシブ用ファイルを削除してもエラーにはなりませんが、md クラスによるレイアウトの切り替えが機能しなくなります。読み込むモジュールを絞った場合は、列の動作がどう変わるか確認してください。

グリッドユニットは、インラインレイアウトに合わせてグリッドコンテナが調整するテキストの動作も元に戻します。アプリケーションのフォント指定はユニットに設定し、パディングは border-box の指定を使ってユニットの内側に配置してください。将来カタログにページネーションを追加する場合は、アプリケーションの状態で安定した ID に基づいて選択状態を維持してください。テーブルの CSS もグリッドの幅指定も、その動作を実装するものではありません。

関連する仕様を確認する

## Pure CSS デザインシステムのコンポーネント例

### Pure モジュールを使ったカタログのマークアップ

幅を4分の1と4分の3に分けたレスポンシブレイアウト、縦に並ぶフォーム、横罫線付きテーブル。

```
<main class="catalog"><header><p class="eyebrow">PURE CSS / LENDING DESK</p><h1>A small equipment catalog.</h1><p>Find a kit, select available items, and review the local selection.</p></header><div class="pure-g"><aside class="pure-u-1 pure-u-md-1-4"><div class="sidebar"><h2>Refine the list</h2><form class="pure-form pure-form-stacked" id="filters"><label for="query">Equipment name</label><input id="query" type="search" placeholder="Camera, recorder…"><label for="kind">Category</label><select id="kind"><option value="all">All categories</option><option>Camera</option><option>Audio</option><option>Lighting</option></select><label class="pure-checkbox"><input id="available" type="checkbox"> Available only</label><button class="pure-button" type="reset">Clear filters</button></form><div class="selection"><strong id="selected-count">0 items selected</strong><p>Selection is kept when a filter hides a row.</p><button id="clear-selection" class="pure-button" disabled>Clear selection</button></div></div></aside><section class="pure-u-1 pure-u-md-3-4"><div class="results"><p id="count" role="status"></p><div class="table-scroll" tabindex="0" role="region" aria-label="Equipment table, scroll horizontally on narrow screens"><table class="pure-table pure-table-horizontal"><caption>Studio lending kits — local sample records</caption><thead><tr><th scope="col">Select</th><th scope="col" aria-sort="ascending"><button id="sort" class="sort">Equipment ↑</button></th><th scope="col">Category</th><th scope="col">Availability</th></tr></thead><tbody id="rows"></tbody></table></div><p id="empty" hidden>No matching equipment. Clear the filters to see all six kits.</p><section class="summary" aria-labelledby="selection-title"><h2 id="selection-title">Selected for review</h2><ul id="selection-list"><li>No equipment selected.</li></ul><p>This is a browsing example. Selecting a kit does not reserve it.</p></section></div></section></div></main>
```

コードリファレンス

- grids-responsive-min.css は別途読み込みます。

- 貸出中のチェックボックスは、見た目を薄くするだけでなく無効化しています。

### フィルター、並べ替え、選択の状態

元の動作では、固定のサンプルレコードを6件表示し、安定した ID によって選択状態を維持します。

```
const data=[{id:'c1',name:'Compact camera kit',kind:'Camera',available:true},{id:'c2',name:'Cinema camera kit',kind:'Camera',available:false},{id:'a1',name:'Field recorder',kind:'Audio',available:true},{id:'a2',name:'Wireless microphone pair',kind:'Audio',available:true},{id:'l1',name:'Portable LED panel',kind:'Lighting',available:false},{id:'l2',name:'Softbox lighting kit',kind:'Lighting',available:true}];const selected=new Set();let ascending=true;const $=id=>document.getElementById(id);
function selection(){ $('selected-count').textContent=selected.size+(selected.size===1?' item selected':' items selected');$('clear-selection').disabled=!selected.size;const list=$('selection-list');list.replaceChildren();for(const x of data.filter(x=>selected.has(x.id))){const li=document.createElement('li');li.textContent=x.name;list.append(li);}if(!selected.size){const li=document.createElement('li');li.textContent='No equipment selected.';list.append(li);}}
function render(){const query=$('query').value.toLowerCase().trim();const visible=data.filter(x=>x.name.toLowerCase().includes(query)&&($('kind').value==='all'||x.kind===$('kind').value)&&(!$('available').checked||x.available)).sort((a,b)=>(ascending?1:-1)*a.name.localeCompare(b.name));$('count').textContent=visible.length+' of '+data.length+' kits shown';$('empty').hidden=visible.length!==0;$('rows').replaceChildren();for(const x of visible){const tr=document.createElement('tr');const choice=document.createElement('td');const input=document.createElement('input');input.type='checkbox';input.disabled=!x.available;input.checked=selected.has(x.id);input.setAttribute('aria-label','Select '+x.name);input.addEventListener('change',()=>{input.checked?selected.add(x.id):selected.delete(x.id);selection()});choice.append(input);tr.append(choice);for(const value of [x.name,x.kind,x.available?'Available':'On loan']){const td=document.createElement('td');td.textContent=value;tr.append(td);}$('rows').append(tr);}selection();}
$('filters').addEventListener('input',render);$('filters').addEventListener('submit',e=>e.preventDefault());$('filters').addEventListener('reset',()=>setTimeout(render,0));$('sort').addEventListener('click',()=>{ascending=!ascending;$('sort').textContent='Equipment '+(ascending?'↑':'↓');$('sort').parentElement.setAttribute('aria-sort',ascending?'ascending':'descending');render()});$('clear-selection').addEventListener('click',()=>{selected.clear();render()});render();
```

コードリファレンス

- フィルターを使っても、選択済みの ID は保持されます。

- ユーザーが入力した検索文字列を HTML として扱うことはありません。

### アプリケーションのタイポグラフィとフォーカスの CSS

意図的に最小限に抑えたライブラリを補完する、完全なビジュアルレイヤー。

```
*{box-sizing:border-box}body{font:16px/1.5 Arial,Helvetica,sans-serif;color:#263238;background:#fff}.catalog{max-width:1120px;margin:auto;padding:32px 24px}h1{font-size:34px;line-height:1.15;letter-spacing:-.03em;margin:12px 0}h2{font-size:18px;line-height:1.3}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#435c68}header{border-bottom:3px solid #263238;padding-bottom:24px;margin-bottom:24px}.pure-g [class*=pure-u]{font-family:Arial,Helvetica,sans-serif}.sidebar{padding-right:24px}.results{padding-left:24px;border-left:1px solid #d7dfe3}.pure-form input[type=search],.pure-form select{width:100%;max-width:100%}.pure-form label{margin-top:16px}.selection{border-top:1px solid #d7dfe3;margin-top:28px;padding-top:20px;font-size:14px}.table-scroll{overflow:auto}table{width:100%;min-width:540px}.pure-table caption{text-align:left;font-style:normal;color:#52616a}.sort{border:0;background:none;padding:0;color:inherit;text-align:left;font-weight:700;cursor:pointer}.summary{padding:16px 20px;background:#f3f6f7;margin-top:24px}.summary p{font-size:14px;color:#52616a}.pure-button:focus-visible,.sort:focus-visible,.table-scroll:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #0078e7;outline-offset:3px}#empty{padding:20px;border:1px dashed #83919a}@media(max-width:767px){.catalog{padding:24px 16px}h1{font-size:28px}.sidebar{padding:0}.results{padding:24px 0 0;border-left:0}.selection{margin-bottom:24px}}
```

コードリファレンス

- これらは独自のアプリケーション設定であり、Pure の公式トークンではありません。

## Pure CSS デザインシステムのエージェント設定

### 実装の出発点

CSS と JavaScript の例を style.css と app.js として保存します。レスポンシブグリッドのメディアクラスは別ファイルです。オフラインプレビューでは、公式スタイルシートとオリジナルのアプリケーションコードを両方インライン化しています。HTML のラッパーには body のマークアップ全体が含まれます。指定されたファイル名で、提示されているインタラクションと CSS の例を保存してください。

```
<!-- npm install purecss@3.1.0
mkdir -p assets
cp node_modules/purecss/build/pure-min.css assets/
cp node_modules/purecss/build/grids-responsive-min.css assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Equipment catalog</title>
<link rel="stylesheet" href="assets/pure-min.css">
<link rel="stylesheet" href="assets/grids-responsive-min.css">
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script></head>
<body><main class="catalog"><header><p class="eyebrow">PURE CSS / LENDING DESK</p><h1>A small equipment catalog.</h1><p>Find a kit, select available items, and review the local selection.</p></header><div class="pure-g"><aside class="pure-u-1 pure-u-md-1-4"><div class="sidebar"><h2>Refine the list</h2><form class="pure-form pure-form-stacked" id="filters"><label for="query">Equipment name</label><input id="query" type="search" placeholder="Camera, recorder…"><label for="kind">Category</label><select id="kind"><option value="all">All categories</option><option>Camera</option><option>Audio</option><option>Lighting</option></select><label class="pure-checkbox"><input id="available" type="checkbox"> Available only</label><button class="pure-button" type="reset">Clear filters</button></form><div class="selection"><strong id="selected-count">0 items selected</strong><p>Selection is kept when a filter hides a row.</p><button id="clear-selection" class="pure-button" disabled>Clear selection</button></div></div></aside><section class="pure-u-1 pure-u-md-3-4"><div class="results"><p id="count" role="status"></p><div class="table-scroll" tabindex="0" role="region" aria-label="Equipment table, scroll horizontally on narrow screens"><table class="pure-table pure-table-horizontal"><caption>Studio lending kits — local sample records</caption><thead><tr><th scope="col">Select</th><th scope="col" aria-sort="ascending"><button id="sort" class="sort">Equipment ↑</button></th><th scope="col">Category</th><th scope="col">Availability</th></tr></thead><tbody id="rows"></tbody></table></div><p id="empty" hidden>No matching equipment. Clear the filters to see all six kits.</p><section class="summary" aria-labelledby="selection-title"><h2 id="selection-title">Selected for review</h2><ul id="selection-list"><li>No equipment selected.</li></ul><p>This is a browsing example. Selecting a kit does not reserve it.</p></section></div></section></div></main>
</body></html>
```

### あなたのプロジェクト向けプロンプト

```
提示されている Pure CSS 3.1.0 の機材カタログをもとに構築し、pure-min.css と grids-responsive-min.css の両方を読み込みます。幅を4分の1と4分の3に分けるレスポンシブグリッドユニット、ラベル付きのフィルター、並べ替え可能なセマンティックテーブル、テーブル専用の横スクロール領域を維持してください。検索、カテゴリー、貸出可能状況のフィルターを組み合わせても、選択済みの ID は消去しないでください。貸出中のチェックボックスは無効にし、「機材」列の並べ替え方向を切り替えたら aria-sort を更新します。フィルターで非表示になった機材も、選択内容の確認リストには残してください。選択内容はローカルに保持され、予約として報告してはいけません。
```

## Pure CSS デザインシステムのソースと適用範囲

Pure CSS 3.1.0。セレクターの値は公式パッケージの値です。カタログのタイポグラフィ、色、スペーシング、アプリケーションの動作は独自のものです。予約は行われません。

- 公式リポジトリ モジュールの境界、ビルドファイル、レスポンシブグリッドの読み込み、ライセンス。

- グリッドの実装 グリッドコンテナとユニット内のテキスト処理。

- パッケージのソース インストール済みの 3.1.0 モジュールを確認するためのセレクターレベルのソース。

## Pure CSS デザインシステムの関連リソース

### Quasar

ブランドカラーとスペーシングの値、QFormのバリデーション、3ステップのブリーフ作成、ラジオ形式の選択肢、45分間のアジェンダを備えた、ネイティブのQuasarによるガイド付きワークフロー。

### React Native Elements

React Native Elements 5.0.0を使って、テーマの実際のロール、状態管理された入力と選択、バリデーション、ローカルでの確認、テスト済みのWebビルドを備えた、完全なフォーカスプラン作成画面を構築してください。

### React Suite

検証済みの v6 CSS 変数、日付セルのマーカー、選択日の予定一覧、モーダル内の検証、明示的なローカルスケジュール設定ルールを備えた、標準機能による React Suite の予定確認カレンダー。


- [実装リファレンス](https://github.com/pure-css/pure)
- [ソース](https://github.com/pure-css/pure)
- [関連する仕様を確認する](https://github.com/pure-css/pure)
- [コードリファレンス](https://github.com/pure-css/pure)
- [公式リポジトリ モジュールの境界、ビルドファイル、レスポンシブグリッドの読み込み、ライセンス。](https://github.com/pure-css/pure)
- [グリッドの実装 グリッドコンテナとユニット内のテキスト処理。](https://github.com/pure-css/pure/blob/main/src/grids/css/grids-core.css)
- [パッケージのソース インストール済みの 3.1.0 モジュールを確認するためのセレクターレベルのソース。](https://github.com/pure-css/pure/tree/main/src)