docwhat's avatardocwhat's blog

New Look (2)

Every so often, I get bored with my theme. I notice usability issues, things I wished I did differently, etc. and I want to play with new technologies like HTML5, CSS3.

I had been using Thematic which is very nice. It has good semantic markup as well as other nice features. But it isn’t HTML5 and I wanted HTML5.

I tried several themes just to play around, and then found a theme that combined boilerplate, HTML5, compass and sass. Unfortunately, it didn’t really do everything I wanted. I also lost the URL for the GitHub project. sigh. But I hadn’t seen compass nor sass before (or if I had, it was only in passing). This was really cool stuff. I started playing with and deciding I really wanted to use it.

I like my green color and it is a pain to write the color in everyplace. But compass lets me assign the color to a variable $hero-color, and to then alter it by doing things like darken($hero-color, 30%). It also has a saner form of nesting so I can DRY up my CSS.

In addition, compass has mixins so I don’t have to repeat border-radius multiple times to support different browsers. As well as grid support via blueprint support.

I also took the opportunity to manage my wordpress site via Rake and Capistrano. Normally, I’d blog about how I did it, but capifying my wordpress blog was harder than I would have hoped. You can view my Capfile if you want, but you may need a handful of aspirin.

I also made my theme compatible with mobile devices. Previously I used WPTouch. I wasn’t very fond of it because it looked completely different from my site and I don’t think it actually added anything. But my previous theme looked horrible on mobile devices.

I’d love to hear any feedback. And of course, I’ll answer any questions you might have.


Edit on GitHub