col•o•phon

This site should hopefully validate as XHTML5. There is also a chance that it won’t. The temptation to try something new is always present and what better site to screw up than your own . . .

My site isn’t large, edited by hundreds of people or populated by thousands of chunks of data. Was there a content management system that was open source, customizable, fast and well-supported? Most important, was there something set up so I could easily extract the content from the delivery system? The next time a move beckoned, I wanted to pick up my data and move on, without having to weed through hundreds of database entries.

A animated image of a folder dragged in and out of the Grave file structure

Grav

Enter Grav, an open source flat file content management system originally developed by Trilby Media. Grav uses Markdown as the primary text formatting method, This added simplicity, since most of the writing I do is in Markdown already. It is a flat file CMS. Each page on the site is held in a folder or set of folders containing standalone plain text files, written in Markdown, and images, if they are part of the content. You can remove and add blocks of content by dragging them in or out of the folder structure.

CSS animation on navigation

What, no JavaScript?

No JavaScript. As an intellectual exercise, I kept things as simple as I could. Ten years ago, if you wanted animation or transitions you needed to reach into your JavaScript toolbag. Today it is possible to just use CSS on your HTML. There is some JavaScript built into the form on the contact page, I think, but since that is a plugin, I don’t count it on my intellectual exercise score.

No hamburger

At least for now, there is no collapsing hamburger style (☰) navigational widget at the top of each page with a list of all the galleries or posts appearing at the click or hover of a hamburger icon. No list of visual thumbnails on the gallery pages either. You can create these effects in CSS, but I want readers to slow down and discover the content in a staged fashion.

Mockup of mobile screen

Responding to the screen

I tried to keep the media queries lean, and I have played with flexbox, grid and clamp() to enable things to appear reasonably well on large and small screens using the same style definitions. This is a work in progress, more fiddling around will be done, I am sure.

Typefaces

The serif typeface used for headings and some subheadings are in Cyan, a typeface derived from the Roman square capitals on the inscription at the base of Trajan's Column. Robbie de Villiers, who started Wilton Foundry, designed letters with both upper and lower case variations. Lower case letters are not common in the other variations of Trajan that exist.

The san-serif headlines and details are set in Noto Sans, part of Noto, a font family commissioned by Google, with over 100 individual fonts, which are, together, designed to cover all the scripts encoded in the Unicode standard.

Body copy is set in Palatino or failing that Times New Roman or whatever typeface with serifs you have set as default on your viewing device.

If you have read through this article and ended up here, I hope you have taken some time to navigate over to frederickyocum.com and had a look around. If you have any thoughts, negative or positive, reach out and share them.