同一份文档，四套设计
One document, four designs
站点新增了主题菜单：Plain、Institute、Desert light 与 Linen and poppy。同一份存储数据，四种外观——以及按照 DOM 契约做出三套真实设计时所发现的问题。
主题
This site gained a Theme menu today. Pick Plain, Institute, Desert light or Linen and poppy, and every page changes its face while the data behind it stays the same bytes in the same store.
That is the demonstration we most wanted a prospective client to be able to do themselves.
Why a menu on a demo site
Every sales conversation about a content system reaches the same worry: what happens to the design after two years of editing. The answer in AIBlog is structural, and a structural answer is hard to show. A theme switch shows it. The client reads the same article in four designs and understands that the words are one thing and the look is another.
How it is built
The package's baseline stylesheet renders every block legibly with nothing else. Above it sits the site's chrome stylesheet for the header, footer and home page, driven by a small set of variables. Above that sits one pack per theme, a single CSS file that sets the variables and overrides selectors under a data attribute on the root element. The menu sets a cookie through the middleware; the root layout reads it and writes the attribute. Fonts for all four designs are self-hosted and exposed as variables, so switching is instant.
The three packs
- Institute is monochrome and geometric, with a burst of hairlines drawn in ink as the hero motif
- Desert light is a warm serif design with a Latin and a Chinese serif paired
- Linen and poppy sets white cards on a linen ground with a single poppy accent
Each pack is a few hundred lines, and most of the difference between them is in the token block at the top.
What it proved
The theme-swap test in the package asserts that the DOM is identical under every theme once class and style attributes are stripped. Building three real designs against that contract turned up a handful of places where the chrome stylesheet had leaked a colour or a width that belonged in a pack. They were moved. The contract is now exercised by four designs rather than one.
For a client
A client site gets one pack. The work of writing it is the same as writing one of these three: a day or two, done once, and never touched by the client.