動作するアクティビティディレクトリを使って、Poncho の Bootstrap 3 グリッド、セマンティックなアクションカラー、クリック可能なサービスパネルを確認できます。
ネイティブのパネルグリッドを絞り込み、詳細を開いて、選択したアクティビティに戻ります。
ar-poncho 2.0.320 CSS と Bootstrap 3.4.1。計算値は 1440、768、390px で検証済みです。フォントのフォールバックを明示しています。
| 名前 / ルール | 値 / 設定 | 用途 |
|---|---|---|
Package inspected | ar-poncho 2.0.320 | 古い v0.3.3 のバナーをパッケージのバージョンとして使わないでください。 |
Font documentation | Lora headings / Montserrat body | 現在のタイポグラフィページと CSS のフォント読み込み。古いリポジトリの README には、引き続き Encode Sans と記載されています。 |
Body | 16px / 1.42857143; weight 500 | Bootstrap 3.4.1 と Poncho を使って測定。ローカルプレビューでは Arial を使用しています。 |
H1 | 2.5rem = 40px / 44px | モバイルでもプレビューの見出しは 40px のままです。 |
H2 / H3 | 2rem / 1.75rem | 基本の見出しスタイル。パネル固有の見出しルールがこれらを上書きします。 |
Panel H3 | 20px / 26px | コンポーネント内での使用例。ネイティブの CSS を測定しています。 |
Lead | 18px / 1.2; weight 500 | 見出しではなく、短い紹介文です。 |
| 名前 / ルール | 値 / 設定 | 用途 |
|---|---|---|
--primary | #242C4F | メインリンク／アクションのネイビー。 |
--secondary | #45658D | セカンダリブルー。 |
--success | #2e7d33 | 主要／成功アクションの役割。装飾目的で使うものではありません。 |
--danger | #c62828 | 破壊的アクションまたはエラーの役割。 |
--warning | #E7BA61 | 注意喚起の役割。テキストのコントラストも確認が必要です。 |
--gray-base | #333333 | 標準のテキスト。 |
--gray-lighter | #f2f2f2 | 明るいニュートラルな背景面。 |
| 名前 / ルール | 値 / 設定 | 用途 |
|---|---|---|
Grid | 12 columns; 30px gutter | Bootstrap 3.4.1：各カラムの左右に 15px のパディング。 |
Breakpoints | 768 / 992 / 1200px | sm、md、lg。col-sm-4 は 768px 以上で3列になります。 |
Containers | 750 / 970 / 1170px | 各ブレークポイントに応じて変化し、768px 未満では幅が可変になります。 |
Panel body | 15px 20px | Poncho コンポーネントの上書き。 |
Panel radius / spacing | 10px / 30px bottom margin | この例で使用しているネイティブの CSS。 |
Button | 16px; 8px 20px padding; 3px border; 30px radius | Poncho の角丸アクションスタイル。Bootstrap の標準的な形状ではありません。 |
Section spacing | 30px default; 20px small; 40px large | section、section-sm、section-lg のルール。 |
実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。
詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。
Poncho は Bootstrap 3.4.1 の上に、アルゼンチンの公共サービス向けスタイルを重ねています。インストールページには実験的な Bootstrap 4 の方針も記載されていますが、それによって Bootstrap 5 のクラスが公開済みの実例と互換になるわけではありません。このリソースでは ar-poncho 2.0.320 と Bootstrap 3.4.1 にバージョンを固定し、パネルの構造とレスポンシブ動作をあわせて確認できるようにしています。
CSS のバナーには v0.3.3 とありますが、インストールされているパッケージは 2.0.320 です。バナーだけを見ず、パッケージマニフェストとロックファイルを確認してください。独立したプレビューでは、パネル、ボタン、グリッドにネイティブの CSS を使用しています。アクティビティの絞り込みは独自の JavaScript であり、Poncho の検索コンポーネントではありません。
現在のタイポグラフィのドキュメントでは、見出しに Lora、本文に Montserrat を指定しています。ダウンロードしたスタイルシートはこれらのフォントを読み込みますが、古い Encode Sans の宣言も含まれています。リポジトリのセットアップ README では、今も Encode Sans が推奨されています。これは実際のバージョン／ソース間の不整合です。本番環境への移行時は、過去の記述がすべて一貫したテーマを示していると決めつけず、採用するリリースの最終的なカスケードを確認してください。
プレビューでは、オフラインで確実に表示できるよう Arial と Georgia のフォールバックを明示し、外部フォントの読み込みを削除しています。ネイティブのサイズ設定はそのまま確認できます。本文は 16px、H1 は 40px、リード文は 18px です。パネルの見出しには独自の 20px を使用するため、基本の H3 のサイズをカードに適用すると、コンポーネントの見た目が変わります。
ボタンのドキュメントでは、標準のリンクアクション、セカンダリリンク、主要または成功のアクション1つ、破壊的アクションを区別しています。btn-primary は標準的な強調リンクアクション、btn-link はセカンダリアクションに使用します。btn-success は主要な次のステップを示すもので、ガイドラインでは1ページにつき1つに限られています。btn-danger は破壊的、または取り消せない意図のアクションに限定します。
アクティビティ一覧では、セカンダリのリセット操作と、詳細を開いた状態での主要な戻る操作を使用しています。登録機能はないため、緑色の登録ボタンはありません。訪問者がローカルのパネルを開いただけで、成功したかのように表示してはいけません。
Bootstrap 3 は、ガター幅 30px の 12 カラムグリッドを使用します。各列の 15px のパディングと釣り合うように、行には負のマージンが設定されています。col-sm-4 により、幅 768px 以上では 3 つのアクティビティパネルが均等な幅で並び、それより狭い画面では全幅のブロックになります。コンテナ幅は、記載されたブレークポイントに応じて 750px、970px、1170px に変わります。
Poncho は、これらの基本設定にコンポーネントの余白を加えます。パネル本文には縦 15px、横 20px のパディングがあり、パネル下部には 30px のマージンがあります。ボタンには半径 30px の角丸、3px のボーダー、縦 8px・横 20px のパディングが設定されています。これらの値が、変更していない Bootstrap ページとの見た目の違いを生みます。汎用的な角丸カードのテーマに置き換えないでください。
公式のパネル例では、パネル全体をアンカーで囲み、その内側に panel-body を配置して、見出しと補足文を本文内に収めています。これにより、コンパクトな一覧項目全体を 1 つの遷移先にできます。このアンカーの内側に別のリンクやボタンを入れないでください。操作対象が競合します。
本番用のスニペットでは、実際のアクティビティページにリンクしています。一方、ローカルプレビューでは、同じ意味を持つアンカーの動作を差し替え、元の詳細テキストを表示します。開いた要素を記録し、新しい詳細領域にフォーカスを移し、訪問者が閉じるとフォーカスを元に戻します。これは、ドキュメントに記載されたパネルのマークアップに重ねて実装するアプリケーションの動作です。
<div class="row">
<div class="col-sm-4">
<a class="panel panel-default" href="/activities/repair-cafe/">
<div class="panel-body">
<h3>Repair café</h3>
<p class="text-muted">Skills · Saturday, 10:00</p>
</div>
</a>
</div>
</div>アクティビティの種類を選ぶセレクトには、明示的なラベルと 3 つのカテゴリがあります。選択が変わると、一致しないパネルのラッパーを非表示にし、新しい件数をステータスメッセージで知らせます。この件数が示すのは表示中のアクティビティ数であり、登録数や空き状況ではありません。リセットすると 3 件すべてを再表示し、フィルターにフォーカスを戻します。
カテゴリを変更したときに詳細表示が開いていれば閉じることで、非表示になったアクティビティの内容が結果から切り離されたまま残らないようにします。パネルを開いてもフィルターは変わりません。これらのルールは意図的にシンプルですが、操作部、結果、詳細の関係をテストするには十分な内容です。
公式のボタン一覧では、無効状態の CSS クラスが紹介されています。HTML の実際のボタンを無効にする場合は、disabled 属性も必要です。クラスだけではキーボード操作を防げません。リンクについては、無効なスタイルを完全な操作モデルと見なすのではなく、有効な遷移先があるかどうかを判断してください。
H1 は 1 つだけ使用し、見出しの階層を一貫させてください。この一覧では、展開した詳細が H2 のセクションであるため、パネル内では H3 を使用しています。中間のセクション見出しがない独立した一覧の場合は、実際のドキュメント構造に合わせて見出しレベルを調整してください。装飾用アイコンライブラリの使用は任意です。ここではテキストラベルだけですべての操作を伝えられるため、省略しています。
Bootstrap CSS を Poncho CSS より先に読み込み、テーマが基盤の設定を上書きするようにします。基本的なグリッドとパネルに、Bootstrap JavaScript や jQuery は必要ありません。アプリケーションで Bootstrap のインタラクティブなウィジェットを追加する場合は、Bootstrap 3.4.1 JavaScript より前に互換性のあるバージョンの jQuery を読み込み、実際に使用するウィジェットをテストしてください。
これは、互換性の範囲が定められたレガシーな依存関係の構成です。これと並行して最新の Bootstrap をインストールしても、移行にはなりません。リポジトリの MIT ライセンスに基づくコードの再利用と、政府機関のページに表示される政府機関のアイデンティティ、公式ロゴ、コンテンツライセンスは分けて考えてください。このプレビューでは架空のコミュニティアクティビティを使用しており、アルゼンチン政府のサービスであるとは主張していません。
アンカー 1 つでパネル本文を囲みます。操作可能な要素を内側に入れないでください。
<div class="row">
<div class="col-sm-4">
<a class="panel panel-default" href="/activities/repair-cafe/">
<div class="panel-body">
<h3>Repair café</h3>
<p class="text-muted">Skills · Saturday, 10:00</p>
</div>
</a>
</div>
</div>ネイティブな Poncho パネルに、動作するカテゴリフィルターと、フォーカスを元に戻す詳細表示を組み合わせています。
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Community activities</title><link rel="stylesheet" href="vendor/poncho-2.0.320/bootstrap.min.css"><link rel="stylesheet" href="vendor/poncho-2.0.320/poncho.min.css"><style>html,body{height:auto}body{padding:30px 0;font-family:Arial,sans-serif!important}h1,h2,h3{font-family:Georgia,serif!important}.container{max-width:100%}.panel{display:block}.filter{display:flex;gap:15px;flex-wrap:wrap;align-items:end;margin:30px 0}.filter>div{flex:1;min-width:180px}.panel:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #333;outline-offset:3px}#detail{border-left:5px solid var(--secondary);padding-left:20px;margin:25px 0}footer{font:14px/1.5 Arial;border-top:1px solid #ddd;padding-top:20px}[hidden]{display:none!important}</style><main class="container"><p class="text-muted">COMMUNITY PROGRAMME · INDEPENDENT EXAMPLE</p><h1>Find a local activity</h1><p class="lead">Browse practical sessions at the community centre.</p><div class="filter"><div><label for="category">Activity type</label><select id="category" class="form-control"><option value="all">All activities</option><option value="skills">Skills</option><option value="outdoors">Outdoors</option><option value="arts">Arts</option></select></div><button id="reset" class="btn btn-link" type="button">Reset filter</button></div><p id="count" role="status">3 activities</p><div class="row"><div class="col-sm-4" data-category="skills"><a class="panel panel-default" href="#detail" data-title="Repair café" data-copy="Bring one small household item to a supervised repair session. This demonstration does not reserve a place."><div class="panel-body"><h3>Repair café</h3><p class="text-muted">Skills · Saturday, 10:00</p></div></a></div><div class="col-sm-4" data-category="outdoors"><a class="panel panel-default" href="#detail" data-title="Community garden" data-copy="Meet at the garden gate for a planting session. Wear suitable footwear; tools are provided in this fictional programme."><div class="panel-body"><h3>Community garden</h3><p class="text-muted">Outdoors · Sunday, 09:30</p></div></a></div><div class="col-sm-4" data-category="arts"><a class="panel panel-default" href="#detail" data-title="Printmaking workshop" data-copy="Explore simple printing techniques in the studio. This local example has no registration service."><div class="panel-body"><h3>Printmaking workshop</h3><p class="text-muted">Arts · Tuesday, 16:00</p></div></a></div></div><section id="detail" hidden tabindex="-1"><h2 id="title"></h2><p id="copy"></p><button id="close" class="btn btn-primary">Back to activities</button></section><footer>Native Poncho 2.0.320 CSS with Bootstrap 3.4.1. Arial / Georgia fallbacks. Original activity data and filtering; no government identity or booking service.</footer></main><script>let opener;const select=document.querySelector('#category');function filter(){let n=0;document.querySelectorAll('[data-category]').forEach(x=>{x.hidden=select.value!=='all'&&x.dataset.category!==select.value;if(!x.hidden)n++});document.querySelector('#count').textContent=n+' activit'+(n===1?'y':'ies');document.querySelector('#detail').hidden=true}select.onchange=filter;document.querySelector('#reset').onclick=()=>{select.value='all';filter();select.focus()};document.querySelectorAll('[data-title]').forEach(a=>a.onclick=e=>{e.preventDefault();opener=a;document.querySelector('#title').textContent=a.dataset.title;document.querySelector('#copy').textContent=a.dataset.copy;document.querySelector('#detail').hidden=false;document.querySelector('#detail').focus()});document.querySelector('#close').onclick=()=>{document.querySelector('#detail').hidden=true;opener.focus()};</script></html>ネイティブな CSS の設定です。このプレビューではフィルターと詳細のロジックを独自に実装しているため、Bootstrap JavaScript は不要です。Sources にある、動作するサンプル一式の ZIP には、プレビューに必要な依存関係とドキュメント全体も含まれています。展開したディレクトリで python3 -m http.server 8080 を実行し、http://localhost:8080/poncho.html を開いてください。モジュールベースのサンプルを file:// から開かないでください。
npm install [email protected] [email protected] # Copy the following package assets into your site's public vendor directory: # node_modules/bootstrap/dist/css/bootstrap.min.css # node_modules/ar-poncho/dist/css/poncho.min.css # Load Bootstrap first, then Poncho. # Optional Bootstrap JS components also need jQuery before bootstrap.min.js.
Bootstrap 3.4.1 で ar-poncho 2.0.320 を使用してください。12 カラムグリッドと、単一のアンカーで囲んだパネルカードを使って、アクセシブルな一覧を構成します。ネイティブなボタンの役割に応じた色、パディング、角丸を保ってください。ラベル付きのフィルタリング、結果件数の通知、フォーカスの復帰を実装してください。固定されたパッケージに基づいてフォントの継承を確認してください。Bootstrap 5 の API を混在させたり、登録が成功したと偽ったりしないでください。
政府機関のアイデンティティを使わず、ネイティブな CSS を使用した独立した OpenDesign の例です。現行のドキュメントと古い README ではフォントファミリーの記載が異なります。このプレビューでは固定された CSS と明示的な代替フォントを使用しています。
