Patrons d'article

Avisos

Quatre indicadors per a un parany, un consell, una advertència o una nota neutra, cadascun amb el seu color i la seva icona. Extreuen un únic punt important del flux sense trencar-lo.

Cita en bloc

Una cita destacada, separada per una línia verda a l'esquerra sobre un panell amb tint. S'utilitza per a una citació real, no per emfatitzar; per emfatitzar hi ha la negreta.

Codi

El codi en línia va dins d'un xip amb tint. Els blocs tenen una capçalera amb el llenguatge i els controls de Copia i Amplia, amb ressaltat de sintaxi fet amb Shiki en un tema clar i un de fosc, i s'estenen fins a les vores de la pantalla en un telèfon perquè una línia ampla tingui espai.

const tokens = getDesignTokens();
renderTable(tokens.colors);

Un bloc de codi pot portar a més una capçalera amb la ruta del fitxer: una franja mono sobre el codi que anomena el fitxer al qual pertany. Al mòbil, un tercer control s’uneix a Copiar i Expandir: Ajustar, que plega les línies llargues en comptes de desplaçar-les.

Taules

Un article mai fa servir una taula HTML nua. Una taula clàssica va dins d'una targeta amb vora, amb la primera columna fixa i una franja de capçalera en monospace; i on les files es barallarien amb la columna del mòbil, les dades es converteixen en una targeta a mida. Els cinc patrons, renderitzats a partir de les classes reals:

Taula senzilla

La taula lleugera d’aquesta documentació: una franja de capçalera en mono majúscules sobre el tint de distintiu, separadors molt fins i una targeta arrodonida amb desplaçament. Per a dades de token i valor que caben en tres o quatre columnes; el que és més ample pertany als patrons de taula a mida de dalt. Les classes table-mini.

Quan una fila porta més de tres o quatre columnes, no la deixis desplaçar-se de costat: afegeix table-stack i dona a cada cel·la un data-label. Des de 700 píxels és la mateixa taula; al mòbil la fila de capçalera s’amaga i cada fila s’apila en parelles etiqueta-valor: l’escala tipogràfica de la pàgina de Tipografia es llegeix així. Marca la cel·la de títol de la fila amb stack-lead i una nota final amb stack-end. I quan fins i tot les parelles queden amples, renuncia a la taula: les mostres de color es dibuixen com una llista que flueix.

<div class="table-mini-wrap">
  <table class="table-mini table-stack">
    <thead>…</thead>
    <tbody>
      <tr>
        <td class="stack-lead"><code>--fs-h1</code></td>
        <td data-label="Escriptori">34px</td>
        <td data-label="Mòbil">30px</td>
      </tr>
    </tbody>
  </table>
</div>

Targetes de consell

Van néixer en aquesta documentació i s’han promocionat al web: una parella de targetes Fes-ho / No ho facis per donar consell sense un mur de text. Cada targeta és una figure amb capçalera etiquetada, un escenari d’exemple i un peu. Disponible per als articles com a HTML pla amb les classes dodont.

<div class="dodont-grid">
  <figure class="dodont dodont-do">
    <p class="dodont-head">Fes-ho</p>
    <div class="dodont-stage">…exemple…</div>
    <figcaption class="dodont-caption">Per què funciona.</figcaption>
  </figure>
  …
</div>

Columnes comparades

Dues columnes amb vora, l’afavorida coronada en verd i l’altra en neutre: què es tradueix davant de què es conserva, què dona una llibreria davant del que costa. Les classes compare, disponibles per als articles.

• Fes

  • compare-yes

• No facis

  • compare-no

Separadors i llistes de punts

Una regla horitzontal en un article es dibuixa com una barra verda curta i centrada, el separador de secció. I la llista de punts verds, el pic de les descripcions de rol i la pàgina de reserves, està disponible per als articles com a dot-list.

• Separadors i llistes de punts
• Columnes comparades

Diagrames

Els diagrames d'arquitectura són imatges estàtiques dibuixades amb els mateixos tokens del web: al lector no li arriba cap llibreria de diagrames. Els tokens donen tema al resultat (nodes verds, fletxes neutres), així que es recoloreja amb el tema com tota la resta, i el control de la cantonada l'obre a pantalla completa. Aquest és un diagrama real d'un article publicat:

Sumari

Un article llarg porta el seu sumari: el component Toc real es renderitza com una targeta lateral fixa a partir de 1024 píxels, i els mateixos encapçalaments alimenten el full de sumari darrere de l'anell de progrés de la barra de lectura per sota d'aquesta amplada.

Navegació de sèrie

Un post que pertany a una sèrie s'obre amb una lleixa horitzontal de targetes de part numerades: la part actual amb contorn verd, la resta enllaçant a la resta de la sèrie. En mòbil la lleixa es desplaça lliurement; a escriptori s'hi afegeixen controls de fletxa.

Subscripció

La franja de butlletí que tanca una entrada: un reclam breu, un camp de correu electrònic i una nota sobre la doble confirmació. Aquest és el component real, renderitzat en directe.

On es troba

global.css: .prose blockquote.callout-*, .code-block-* i .prose pre, la família .dt-card, i també SubscribeForm.astro.