Shiki

Affable Aerith: a minimalist Wordpress theme inspired by Svbtle and Medium

Jul 26, 2013
2 minute read

I made a new Wordpress theme to brush up on my frontend skills. I’m calling it Affable Aerith for no specific reason. As usual, it’s a minimalist theme. The design is inspired by Svbtle and Medium with some touches taken from the default theme of Octopress. It’s also mobile-ready.

The theme is based on the excellent Bones Wordpress Starter Theme. The following is a list of some of the tools I used to make all these interesting.

  • LESS. A superset of CSS. CSS is just too awesome if you have functions, variables, and element nesting. These are made possible through LESS. There are also lots of available extensions (mixins) like Elements that adds more helpers like drop-shadows and rounded borders. For the record, I still prefer the syntax of SASS (the .sass version) but LESS seems to be what’s mostly used right now. We use LESS at Lifebit.

  • CoffeeScript. It’s been a long time since I’ve coded in pure JS. Writing in CoffeeScript just always felt faster.

  • Grunt. The hero. Grunt automates all the things I need for frontend development. Here’s what Grunt does automatically for me in this project:

    1. Compiles LESS to CSS.
    2. Compiles CofeeScript to JavaScript.
    3. Merges all my CSS files into one file (all.css) and compresses it.
    4. Merges all my JavaScript files into one file (all.js) and minifies it.
    5. Every time a file is edited, do all of the above again (very fast).
    6. Every time a file is edited, refresh the Chrome (Canary) browser. I can’t stress enough how much time this saves me. I could just keep the browser open in my secondary monitor and just keep editing files and the browser just refreshes without me doing anything.

    All these automations are done through a single Gruntfile config.

A library that should be mentioned:

  • Prettify for auto-syntax highlighting. There are many Wordpress plugins that does syntax highlighting but I find Prettify to be the easiest to manage. That’s because there’s not much to manage but a single JavaScript call on page load. There are many themes for it available here.

The theme is available at Github. It’s not really that finished yet. I still have to do some styling for the comments. I left it like that because I’m using Disqus for comments.