Skip to content
Cognate Press

Portable network components

Built to live in footers we don't control.

Three components ship inside every publication, in this order: the network bar, which recovers the cross-traffic the network gives up by keeping separate domains; the footer grid, which gives every publication the same footer in five, three and four of twelve columns — identity, its own links, and the articles it wants read first; and the footer signature. All three are self-contained HTML + CSS — no JavaScript, no framework, no fixed color. They inherit the host's font and text color, and expose a few custom properties for overrides.

Source: network-bar.html · footer-grid.html · footer-signature.html

In two hostile hosts — nothing below is styled by us

Light host · Georgia serif, warm paper · ElephantPHP, which is on no social network, so the grid's optional row carries RSS and llms.txt alone; legal links sit in the host's bottom line
Dark host · system sans, cool grays · SQLPress, which is on two, so the same row carries four links; host overrides --cpn-rule and --cpg-rule

At 360px

Light host · 360px
Dark host · 360px

Integration

  • Paste the network bar above the host footer and remove the host's own entry from the list. The grid reflows as the network grows, and down to 360px, without changes.
  • Paste the footer grid beneath it and fill its four slots: the logo, the about line, the page links, and the picks. The columns hold 5/3/4 at every width and wrap when the row runs out of room, so no breakpoint has to be chosen. The logo keeps its own palette — it is the one thing the component does not recolor.
  • The picks are three or four articles chosen by hand, with the archive link under them. A reader who reached the footer of one piece is looking for the next one, and no list a script can derive answers that as well as the editor does. The social row is optional — drop the items for networks the site is not on, or the whole list if it is on none. The link column carries what a reader is looking for — about, archive, contact; Privacy, Cookies and Terms belong in the host's own bottom line, under the signature.
  • Paste the signature inside the host footer. It is one line and stays quieter than anything around it.
  • All three inherit font and color; secondary tones derive from the host's own text color. Overrides, if a host wants them: --cpn-rule, --cpn-muted, --cpn-accent, --cpn-pad, --cpg-rule, --cpg-muted, --cpg-accent, --cpg-logo, --cpg-pad, --cpg-gap, --cps-size, --cps-muted.