Sheet 02.17 / Components · Figures

Figure

An article illustration on its own sheet: a hairline frame with registration ticks, a mono bar with the figure number and title, the drawing, and the caption under the frame. The title and the takeaway move out of the drawing.

CLASSb-figDRAWNCLAUDECHECKEDBOLUOLICENSEMIT

Fig. 1 — figurelive, from bundle.css

article / figure

Fig. 1From token to page

Fig. 1A component never holds a value of its own; change a token and every page follows.

Anatomy

Parts

Part	Class	Notes
Figure	`figure.b-fig`	The whole figure.
Frame	`.b-fig-frame`	Hairline frame with registration ticks at the corners.
Bar	`.b-fig-bar`	Fig. N on the left, the title in upper case on the right.
Body	`.b-fig-body > svg`	A 640-unit viewBox; scrolls sideways under 520px instead of shrinking text.
Caption	`.b-fig-cap`	One sentence of takeaway, then an optional Source line in meta.

Markup

Code

bundle.css

<figure class="b-fig" style="margin:0;max-width:640px">
  <div class="b-fig-frame">
    <div class="b-fig-bar"><span class="b-caption">Fig. 1</span><span class="b-caption">From token to page</span></div>
    <div class="b-fig-body">
      <svg viewBox="0 0 640 210" role="img" aria-label="Tokens feed classes and drawings; both become a component, and components make the page.">
    <defs>
      <pattern id="f-hatch" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><line class="f-hatch-line" x1="0" y1="0" x2="0" y2="6"/></pattern>
      <marker id="f-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="9" markerHeight="9" markerUnits="userSpaceOnUse" orient="auto-start-reverse"><path class="f-head" d="M1 1.5L9 5L1 8.5"/></marker>
      <marker id="f-arrow-soft" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" markerUnits="userSpaceOnUse" orient="auto-start-reverse"><path class="f-head-soft" d="M1 1.5L9 5L1 8.5"/></marker>
    </defs>
        <text class="f-l" x="60" y="22">LAYER 1 · VALUES</text>
        <rect class="f-n" x="60" y="30" width="200" height="56"/>
        <text class="f-t" x="76" y="54">Tokens</text>
        <text class="f-d" x="76" y="73">Colour, type, space, line</text>
        <text class="f-l" x="380" y="22">LAYER 2 · CLASSES</text>
        <rect class="f-n" x="380" y="30" width="200" height="56"/>
        <text class="f-t" x="396" y="54">b-* classes</text>
        <text class="f-d" x="396" y="73">One stylesheet, no framework</text>
        <path class="f-a" d="M268 58H372"/>
        <text class="f-l" x="320" y="50" text-anchor="middle">READ BY</text>
        <path class="f-a" d="M160 86V112H300V132"/>
        <path class="f-a" d="M480 86V112H340V132"/>
        <rect class="f-n-key" x="200" y="134" width="240" height="56"/>
        <text class="f-t" x="216" y="158">A component</text>
        <text class="f-d" x="216" y="177" style="fill:var(--ink)">Markup that only names classes</text>
      </svg>
    </div>
  </div>
  <figcaption class="b-fig-cap"><span class="b-caption" style="padding-top:2px">Fig. 1</span><span>A component never holds a value of its own; change a token and every page follows.</span></figcaption>
</figure>

Number figures per article.
Say the takeaway in the caption, in one sentence.

Don't

Put colours, fonts or sizes inside the SVG file.
Title the drawing inside the drawing.