日本語

Layouts / Report layout

Report

A spacious report layout that puts the conclusion, evidence, and limits in view.

Start with the complete report below. It contains a title, a before/after hero, labeled sections, a comparison, a caveat, and the counts behind the result. Copy the HTML; no renderer is required.

The sheet owns the page grid. Put the masthead, hero, and sections directly inside it. If a semantic main or article must group them, give that wrapper .sheet-body. Use .field inside a section to establish the content width for its responsive children.

Sections and heroes inside .sheet-inset or an ordinary block keep explicit columns. At 720px or less of the nearest size container, the section label moves above its content and the hero stacks. Use a nested .sheet or .sheet-inset to establish a new report width; an arbitrary wrapper does not create a size container.

A text comparison becomes two columns when its nearest size container is at least 46rem wide (736px at the default root size). A .field measures the report content column. Without a size container, .compare stays in one column, even in a wide window.

Complete report

HTML
<!doctype html>
<html lang="en" data-dd-paper="a4">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Link the sources. Keep the gap visible.</title>
  <link rel="stylesheet"
        href="https://k-kinzal.github.io/document-design/v1.2.1/document-design.css">
</head>
<body>
  <article class="sheet">
    <p class="eyebrow">BISON-PARSER / SOURCE COVERAGE</p>
    <h1>Link the sources. Keep the gap visible.</h1>
    <p class="stand">Coverage rose from 68.97% to 96.67%. The introduction remains unresolved.</p>
    <div class="hero">
      <div class="was">
        <span class="cap">BEFORE</span>
        <span class="fig">68.97</span>
        <span class="unit">% source coverage · 20 of 29 units</span>
      </div>
      <div class="now">
        <span class="cap">AFTER</span>
        <span class="fig">96.67</span>
        <span class="unit">% source coverage · 29 of 30 units</span>
      </div>
    </div>
    <section class="sec">
      <h2 class="label">01 / EVIDENCE</h2>
      <div class="field">
        <p class="lead">The implementation was present; the links were missing.</p>
        <div class="compare">
          <div class="was">
            <h3 class="cap">BEFORE</h3>
            <p class="note">Nine of 29 source units had no interpretation.</p>
          </div>
          <div class="now">
            <h3 class="cap">AFTER</h3>
            <p class="note">29 of 30 source units have an interpretation. The introduction stays open.</p>
          </div>
        </div>
        <p class="caveat">Source coverage does not establish that every behavior is tested. The unresolved introduction is part of the result.</p>
      </div>
    </section>
    <section class="sec">
      <h2 class="label">02 / RECORD</h2>
      <div class="field">
        <p class="lead">Keep the counts behind the percentages.</p>
        <div class="table-wrap">
          <table>
            <caption>bison-parser source coverage</caption>
            <thead><tr><th scope="col">Snapshot</th><th scope="col">Interpreted units</th><th scope="col">Total units</th></tr></thead>
            <tbody>
              <tr><th scope="row">Before</th><td>20</td><td>29</td></tr>
              <tr><th scope="row">After</th><td>29</td><td>30</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>
  </article>
</body>
</html>

Basic usage

Preview

READING ORDER

Give the idea a sequence.

A point, its evidence, its meaning.

Separate type and spacing scales bring the main idea forward, with room for the detail that supports it.

HTML
<article class="sheet sheet-inset">
  <p class="eyebrow">READING ORDER</p>
  <h2>Give the idea a sequence.</h2>
  <p class="stand">A point, its evidence, its meaning.</p>
  <p class="note">Separate type and spacing scales bring the main idea forward, with room for the detail that supports it.</p>
</article>

Direct section content

Preview

01 / EVIDENCE

Keep the unresolved findings visible.

Only 35 of 844 WordPress statements are fully resolved. State the limits alongside the result.

Statements

The catalog contains 844 statements.

Findings

The analysis reports 978 findings. Several may describe the same statement.

HTML
<article class="sheet sheet-inset">
  <section class="sec">
    <h3 class="label">01 / EVIDENCE</h3>
    <div class="field"><p class="lead">Keep the unresolved findings visible.</p></div>
    <p class="note">Only 35 of 844 WordPress statements are fully resolved. State the limits alongside the result.</p>
    <div class="compare">
      <div><h4>Statements</h4><p class="note">The catalog contains 844 statements.</p></div>
      <div><h4>Findings</h4><p class="note">The analysis reports 978 findings. Several may describe the same statement.</p></div>
    </div>
  </section>
</article>

A lead made of words

Preview

WHO IS k_kinzal?

k_kinzal

Turns complex technology into usable tools and knowledge that carries.

Builds usable tools

Documentation generation, deployment, PHP test environments, AI development.

Changes things safely

Platform migration, design through types, automated tests and quality verification.

Passes knowledge on

Articles on Qiita and Zenn, conference talks, Rust and Solana course material.

HTML
<article class="sheet sheet-inset">
  <p class="eyebrow">WHO IS k_kinzal?</p>
  <h2>k_kinzal</h2>
  <p class="stand">Turns complex technology into usable tools and knowledge that carries.</p>
  <div class="hero">
    <div class="figures">
      <figure><h3>Builds usable tools</h3><p>Documentation generation, deployment, PHP test environments, AI development.</p></figure>
      <figure><h3>Changes things safely</h3><p>Platform migration, design through types, automated tests and quality verification.</p></figure>
      <figure><h3>Passes knowledge on</h3><p>Articles on Qiita and Zenn, conference talks, Rust and Solana course material.</p></figure>
    </div>
  </div>
</article>

Classes & attributes

Class / attributePurpose
.sheetA twelve-column grid with the report type and spacing scales.
.sec / .label / .fieldPlace .sec inside .sheet or .sheet-body; .label names the section and .field contains its content. Direct content also uses the reading column. A block wrapper keeps explicit tracks; only grid parents supply subgrid.
.fig / .claim / .unitA short prominent number, a wrapping phrase instead of a number, and a separate unit or explanation. Long numbers scroll locally on screen; they never wrap or become an ellipsis.
.hero > .figuresA lead made of words: three figures in the hero’s slot, for a profile, a project, or a theme with no before and after.
.caveatThe qualifications a reader needs to interpret the result.
.sheet-inset / .sheet-wideAn embedded block frame with a smaller title scale, or a wider cover layout. Use both sheet and sheet-inset on an inset; sections and heroes still arrange their own children.
data-dd-paper="a4"On the root element: the printed sheet size, its margins, and page numbers. Also letter.

Usage notes

Use h1 for a standalone report and h2 when embedding under a page heading. A title says what the report means; a hero is optional. Use .claim for words, .unit for units, and a table for long exact values. Choose and state useful precision for a headline number; the stylesheet does not round, abbreviate, or shrink arbitrary content to fit. Print has no scrolling: check the PDF and keep exact counts in the record.

Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.