Systems
Security
Data
Python

PLEXData Engineering for people and agents that act on systems

Permissions, Limits, Evidence & eXecution.

No. 013 Latest feature

Wednesday, 30 September 2026

plexdata.online

013

Published
Author
Dorian Sotpyrc
Reading
6 minutes · Build log
Status
Live CSS · outputs render in your browser

Build log · CSS

Steal These 3 CSS Snippets That Turn Any Website Into a Newspaper

The grid, the tokens and the typesetting behind PLEXData’s newspaper layout. Each snippet is the real CSS from this site, and each one runs live in the article so you can see exactly what it does.

References

Animated drawing of the PLEXData front page set like a newspaper, with a CSS settings panel beside it. The page builds itself: the PLEXData masthead and its rules, the lead headline 'Steal These 3 CSS Snippets That Turn Any Website Into a Newspaper', a dark figure block and a coral newsletter block in the right column, and a list of earlier articles. In the panel, the tokens paper F4EFE4, ink 11110F and coral F05E43 sit above two knobs. The first, --t-display, turns from 42 to 76 pixels and the headline grows with it. The second, --sp-3, turns from 8 to 24 pixels and the gap above the earlier list opens with it.

Fig. 1 · Building the front page

The classic newspaper front page, brought back with modern CSS.

In this article · 4 sections
  1. 01The newspaper grid
  2. 02Tokens
  3. 03Typesetting
  4. 04What else holds it up

The pieces of mine people read most are about CSS. And readers of those pieces have told me what they want: real examples of what the CSS actually does. Not a description of it. The thing itself.

So this is the CSS behind the page you are reading. PLEXData looks like an old newspaper on purpose: cream paper, black ink, one coral, a rule under the masthead and plenty of empty space. Most of that comes from three snippets. Each one below is copied from the live stylesheet, and each one is followed by its output, rendered by your browser from the same rules.

§ 01The newspaper grid in six lines

The old homepage was a paginated list of posts, built from templates. It worked, but every post looked as important as every other one. A newspaper front page does the opposite. One story leads and is clearly bigger. A picture holds the right-hand side. A few earlier stories sit in a tidy list. You can tell what matters before you read a word.

CSS grid lets you write that layout almost as a sentence. You name the areas, then draw the page in a string.2

front.cssListing 1 · The front page grid
.front-in{  display:grid;  grid-template-columns:minmax(0,1fr) clamp(420px,40vw,600px);  grid-template-areas:"lead dark" "earlier dark";  column-gap:clamp(32px,4.4vw,72px);}@media (max-width:1080px){  .front-in{grid-template-columns:1fr;    grid-template-areas:"lead" "dark" "earlier"}}
Trimmed from the live stylesheetLines 4 and 9: the whole layout, in words
Output 1The grid, at two widthsRendered live by your browser

PLEXData

Featured · Build log

Bringing back the classic front page with modern CSS

One lead story, a picture, a list. You can tell what matters before you read a word.

Fig. 1

009Sonnet 5.5 Turns the Mid-Tier into the Default

008NVIDIA Moves Agent Safety Below the Model

PLEXData

Featured · Build log

Bringing back the classic front page with modern CSS

One lead story, a picture, a list. You can tell what matters before you read a word.

Fig. 1

009Sonnet 5.5 Turns the Mid-Tier into the Default

008NVIDIA Moves Agent Safety Below the Model

The same grid rules running in this page, scaled to fit the column. The first copy is wide enough for two columns. The second is narrow, so the areas stack. The demo switches on its own width with a container query instead of the site’s 1,080px media query, so you can see both states side by side.

Three details do the work. grid-template-areas is the page plan you can read: lead and dark side by side, earlier under lead, dark running down both rows. minmax(0,1fr) instead of plain 1fr stops a long word or a wide figure from pushing the column past the edge of the screen. And clamp(420px,40vw,600px) keeps the right column between 420 and 600 pixels, so the picture never shrinks to a thumbnail or swells into a billboard.3

The stacking order is a decision too. Below 1,080 pixels the same names drop into one column: lead first, then the picture, then the list. Change the order of three words and the phone layout changes with it.

§ 02Three colours, six sizes, six gaps

The second snippet is the one I would steal first. It is a short list of custom properties, and almost every colour, size and gap on the site comes from it.

tokens.cssListing 2 · Colour, type and spacing tokens
:root{  --paper:#F4EFE4; --ink:#11110F; --muted:#655F57;  --coral:#F05E43; --coral-text:#C4391F;   --t-display:clamp(42px,5.3vw,76px);  --t-xxl:clamp(38px,4.6vw,68px);  --t-xl:clamp(32px,3.5vw,50px);  --t-m:clamp(24px,2.2vw,32px);  --t-s:clamp(20px,1.7vw,24px);  --t-xs:18px;   --sp-1:8px;  --sp-2:16px; --sp-3:24px;  --sp-4:40px; --sp-5:64px; --sp-6:96px;}
Exactly as shipped, shades trimmedLine 3: one coral for shapes, a darker one for words
Output 2The tokens, using the real valuesRendered live by your browser

Aa coral text

#F05E43 on paper · 2.87:1 · fails

Aa coral text

#C4391F on paper · 4.63:1 · passes

Ink on coral

#11110F on #F05E43 · 5.75:1 · passes

--t-displayNewsprint

--t-xxlNewsprint

--t-xlNewsprint

--t-mNewsprint

--t-sNewsprint

--t-xsNewsprint

--sp-18px

--sp-216px

--sp-324px

--sp-440px

--sp-564px

--sp-696px

Every swatch, size and bar here is set with the site’s own custom properties. Contrast ratios are computed with the WCAG formula from the hex values.

Look at the first two swatches. The bright coral, #F05E43, is the colour people remember, and it is too light for small text. On the paper background it reaches 2.87 to 1. The accessibility guideline asks for 4.5 to 1 for normal text and 3 to 1 for large text, so it fails both.1 So coral has two tokens. The bright one fills shapes: buttons, bars, the rule on top of a box. Every word that needs to be coral uses #C4391F, at 4.63 to 1. Buttons go the other way, with ink text on a coral fill.

The type ramp is six clamp() values, each running from a phone size to a desktop size, so a headline scales smoothly with the window instead of jumping at breakpoints. Resize this page and the ramp above moves with it. The stylesheet still shows why the limit was needed: an older rule gives the hero headline its own clamp(46px,7vw,108px), and a later rule overrides it with var(--t-display).

Space works the same way: 8, 16, 24, 40, 64 and 96 pixels, every step a multiple of 8, the steps further apart as they grow. Newer rules take their gaps from that ladder. Older ones still carry their own numbers, like a 44-pixel gap in the article grid.

§ 03Let the browser set the type

Some of the best typesetting on this site is done by the browser, with two lines of CSS and one selector.

type.cssListing 3 · Typesetting
.hed{text-wrap:balance}.prose p{text-wrap:pretty} /* a thin rule between byline items, never before the first */.byline>*+*::before{  content:""; display:inline-block;  width:1px; height:12px; margin:0 12px;  background:var(--soft); vertical-align:-2px;}
Exactly as shippedLine 5: the owl selector draws the separators
Output 3Balanced headlines and the byline ruleRendered live by your browser
text-wrap: wrap

Bringing back the classic front page with modern CSS

text-wrap: balance

Bringing back the classic front page with modern CSS

Both headlines have the same text, font and width. The only difference is text-wrap. Browsers without balance support show two identical boxes. The byline underneath is the site’s real byline class.

text-wrap: balance evens out the line lengths of a heading, so a title does not leave one short word stranded on its last line. It only works on short blocks, a handful of lines, which is exactly what a headline is.4 text-wrap: pretty asks the browser to take more care over paragraphs and avoid a lonely last word. Browsers that do not support either value wrap as normal, so there is no fallback to write.

The byline separators come from the selector >*+*, which means every item that follows another item. A thin rule appears between items and never before the first. Add a fourth item to a byline and it gets its separator for free.

§ 04What else holds the page up

Three snippets carry the look. A few other habits keep it from breaking.

The figures at the top of each article respond to their own width, not the screen’s, using container queries.5 That is why the drawing at the top of this article looks right both here and in the narrower column on the front page.

Before anything ships, a script opens every page at 1,440, 1,024, 390 and 320 pixels wide and checks one number: is the page wider than the window? The last time it fired was in the release this article belongs to. A long piece of inline code in an older article refused to wrap and pushed the whole page sideways on phones. The fix was four lines.

And the whole site is one HTML file, under a megabyte, which the server serves at a real address for each article. The same plain structure makes it easier for AI agents to read, which I wrote about in Agent Surfing.

§References

  1. 1W3C — Understanding WCAG 2.2: Contrast (Minimum)w3.org
  2. 2MDN — grid-template-areasdeveloper.mozilla.org
  3. 3MDN — clamp()developer.mozilla.org
  4. 4MDN — text-wrapdeveloper.mozilla.org
  5. 5MDN — @containerdeveloper.mozilla.org

Free to read. No ads.

Was this worth your time?

One click tells us it helped. It costs you nothing.