What a skin is, and what it is not

Skinning — part 1 of 9

Two sites in the wild wear a look the engine never shipped: one dressed as a Hugo theme, one as Ghost. Neither forked the engine, neither edited a template, and both survive git pull untouched. This guide is what those two cost to build -- the mechanism first, then the three places where a skin and the engine can quietly disagree, and last the checks that would have caught every mistake made along the way.

It is not a CSS tutorial. Everything here is specific to this engine.

A skin is one stylesheet of yours, loaded after the engine's own, that repaints what is already on the page.

Before writing one, spend ten minutes with ./style.sh. A surprising amount of what looks like skinning is a setting: the colour palette (seven shipped, or your own), the banner and what is written over it, the menu, the sidebar and its widgets, whether a post opens with a lead image. A site that only wants different colours does not want a skin at all -- it wants a palette, and the palette keeps working when the engine changes.

Reach for a skin when the answer is "the same site, drawn differently": other typography, other spacing, cards instead of rules, a masthead that looks like somebody else's masthead. That is what a stylesheet loaded last can do without owning anything.