Creating a minimalist blog template

I’ve been meaning to create a new template for this blog. That’s probably not relavant for those of you who read this in a feed reader, it’s more for myself, because I actually look at this thing. I also like reading blogs on their actual sites as opposed to feed readers. I can’t be the only one. The current template is a built-in WordPress theme, and while it’s nice enough, it’s become totally generic and boring to my eyes. It’s also not-invented-here, and we can’t have that, now can we? Well we can, somewhat. I could go full static-blog-generator, use Github pages, or create a brand new blog engine, but WordPress works fine. It has lots of plugins that do everything under the sun. This is just about look and feel.

Another good reason for creating a new template – it’s always good to practice the basics. Like the idea of kata in martial arts, if you continually practice patterns of movement, they become engrained in muscle memory and you’re able to perform them flawlessly without thinking. Or so the theory goes. Master the basics.

Creating the template involves two basic steps: creating the static HTML, and then converting it into a wordpress theme by breaking it into multiple PHP files, adding tags for outputting posts, comments, etc.  For the next few blog entries, perhaps I’ll just live-blog the process.

So, first thing to do is decide what it’s going to look like. In the words of Edward Tufte and as mentioned here previously, “above all else, show the data.” In other words, it should be minimal. It should be easy to read. It should get out of the way. Something along the lines of Alex Payne and Mike Bostock‘s blogs, or Gist.io. A clean, uncluttered, single column of text. 13-14pt font size. Lots of white space.

Next, is deciding what, if any pre-existing tools to use to build it. The Twitter Bootstrap framework is nice because you can put together something decent-looking in a relatively short period of time. I’m not looking to reinvent the CSS framework wheel, so I’ll go with that. Only downside is including a lot of CSS I won’t be using, but that can be trimmed down. One bonus is the built in responsive-design support, so things look readable on mobile, and you don’t end up with microscopic text and need to zoom, which is what I’ve got going on now.

There’s a few ways to use Bootstrap. In the past when, I’ve just downloaded the current zip file and copied the precompiled CSS into my projects. That works and gets you up and running with something in a couple minutes. It’s also possible to customize it online and download the result. Or for ultimate flexibility, you can clone the full git repository, then customize and compile the CSS at the source level. I’m going to go the third route this time, because I’m just curious. Maybe I won’t need it. We’ll see tomorrow…

Comments are closed.