Nosy Cat's Page

About this page

Nosy Cat's Page is a template for making compact minisites that are self-contained in a single web page. It uses CSS to make HTML fragments appear as separate pages. That's mostly a gimmick, but has a couple of uses:

• cut down on the boilerplate when making a site with several small pages
• make the result look more appealing even with relatively little text

Prior art: this template is inspired by the older John Doe's Page, but achieves the same effect in a simpler and more obvious way. The markup is more semantic and accessible, too.

Unlike other solutions, this doesn't require JavaScript. Resulting pages can be viewed just fine in text-based browsers for example. Downsides include:

• you have to write HTML by hand (obviously)
• editing fragment structure can be error-prone

Overhead is minimal: this entire template is only a few kilobytes in size, mostly made up of the embedded documentation.

How to use

This page is completely self-contained. That's not strictly needed (you'll probably want an icon and such) but makes it easy to see what you need. The CSS code that makes everything work is at the end: literally just five lines!

Everything else is fluff. You're free to make the page design your own. Even the fade-in animation can be removed or replaced.

Individual fragments go into <article> tags; the :target pseudo-class is used to only show one article at a time, when referred to by a fragment identifier (a.k.a. "bookmark").

Ideally, the size of a fragment should be just enough to fit a screenful of text. On my desktop for example that amounts to around 200-250 words or so.