Andy Hulstkamp

about creating online experiences

05. June 2013

Milchglas - a custom Wintersmith template

I created a new custom Wintersmith template called Milchglas for this site (Wintersmith is a great and flexible static site generator, which I use for this blog)

The new template is based on my previous Snowboot - template but is compatible with Wintersmith version 2.0.*. It has some additional features like paging on article pages, further readings, a tag- and timebased index and pays more attention to SEO-stuff and page speed.

Using Wintersmith and optimized Milchglas this site scores

  • ~ 97 out of 100 on Make the Web Faster's - GooglePage Speed. Note that some adjustments like caching, compression, charsets must be set on your server (for example in .htaccess, if you're site is on Apache). HTML5-Bolierplate has some handy configuration blocks you might want to use for that. Sacrificing image scaling to target multiple resolution would give you another 3 points to get 100 out of 100.
  • ~ 98% on SEO-Doctor

Since the whole thing is, well, static and lean, it loads quite fast on mobile devices.

This template uses some lovely SVG-Icons licensed from ikonome1 and nice and clean pure-css to base its styles on. A little template-scripting provides the additional features and a couple of media-queries make it (hopefully) adapt well to mobile devices (this still needs testing though).

NOTE Read my post on how to customize a Wintersmith based blog, if you want further information on how to customize the template. The notes provided there still apply.

1 due to licensing terms I'm not allowed to include the icons on GitHub.

further reading

Copy Maven Dependencies to a target folder

A Quick note to myself on how to copy all maven dependencies to a target folder.

SASS and Compass

About using SASS and Compass for cleaner styles, better maintainability and productivity.