Colophon

How this site was built and what was used to do it

This site is entirely static HTML, with CSS for styling.

It contains no decorative images, all images are informational (the screenshots of websites).

There’s very little javascript (only used to load the font using google webfont loader and style the code snippets using prism.js), and only one 20kb font file.

How the Minimalism was achieved

The static HTML is rendered using the Liquid templating system and constructed using Jekyll.

That way I can write all the pages using markdown, but have the flexibility of not only including HTML, but of adding commonly used sections as includes, or as page templates.

You can see the framework on github.

To speed up writing any HTML, I’ve used Emmet. I’ve found it invaluable on other projects.

The CSS is rendered using SASS. The scss file contains the variables for colours and mixins for items such as the generated coloured blocks to denote the site section.

The main site HTML template contains all common elements such as the navigation and the footer and the logo, which is four lines of markup and unlike a png image, will scale.

The social icons in the footer are based on Pace social icons, but have been reduced in size, and minified and converted to png data URIs, to avoid additional http requests.

The site will reduce in width easily to fill its container, up to a maximum readable width. The site is fluid, rather than responsive. The only responsive elements are on pages with marginalia, such as this case study on responsive design.