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
.sassversion) 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:
- Compiles LESS to CSS.
- Merges all my CSS files into one file (
all.css) and compresses it.
all.js) and minifies it.
- Every time a file is edited, do all of the above again (very fast).
- 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: