ドキュメントレイアウト

ドキュメントレイアウト

ドキュメントレイアウトは、左に説明、右にコードの2カラムパターンで、モバイルでは1カラムに縮小します。

構造

.docを外側のラッパーとして、各行に.doc-sectionを使用します。各セクションには.doc-section--descriptionと.doc-section--codeのカラムがあります。

基本セクション

典型的なセクションは、説明ブロックとコードスニペットを組み合わせます。

デモコンテンツ 
<div class="doc">
  <div class="doc-section">
    <div class="doc-section--description">
      <h3>Title</h3>
      <p>Description</p>
    </div>
    <div class="doc-section--code">
      <!-- code snippet -->
    </div>
  </div>
</div>

コードブロック付き

.doc-section--code内にコードブロックのパーシャルを使用して、構文強調表示された例を作成します。

デモコンテンツ 
{{ include('@Bundle/partials/code-block.html.twig', {
  lang: 'bash',
  code: 'curl https://api.example.com/resource'
}) }}
v1.0.29