Idé 08 · Politiken-designmanualen ind i koden

Layoutmål før vi begynder at bygge.

Målet er en fast CSS-baseline, så widgets rammer Politikens artikelkolonner uden tilfældig finjustering i CUE.

Arbejdshypotese

Målene her er en startstruktur, ikke en endelig designmanual. Næste skridt er at måle rigtige artikelskabeloner på politiken.dk og opdatere tallene, før snippet'et gøres til standard i `CLAUDE.md`.

Normal artikel~680 pxGod baseline for tekstnære widgets og forklaringsbokse.
Bred artikel~980 pxRelevant til kort, grafer og interaktive layouts med sidepanel.
Fuld bredde100 vwKun når formatet er scene, spil eller canvas-oplevelse.
Skabelonoverblik
Type
Arbejdsmål
Brug
Normal
max-width: 680px · padding: 18-24px
Tekstnære interaktioner, små beregnere, korte explainers.
Bred
max-width: 980px · padding: 24px
Datavisualisering, kort, filterbare lister, dashboards.
Fuld
width: 100vw · margin-korrektion
Canvas, spil, immersive scener, stærke visuelle åbninger.
CSS-baseline til nye widgets
politiken-widget-baseline.css
/* Brug på widgetens root-element, ikke på body */
.pk-widget {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--pk-widget-max, 680px);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 24px);
  font-family: var(--ui-font);
}

.pk-widget[data-width="wide"] {
  --pk-widget-max: 980px;
}

.pk-widget[data-width="full"] {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
}
Målinger der mangler
ArtikelkolonnerMål normal, bred og fuld artikel på desktop, tablet og mobil.
CUE-varianterFind hvilke layoutvalg i CUE der ændrer max-width, padding og embed-behandling.
BreakpointsDokumentér hvor Politiken skifter fra mobil til tablet/desktop-layout.
CLAUDE.mdNår tallene er verificeret, skal baseline-snippet ind i den globale projektviden.