YUI Grids on Movable Type

So, as anyone who’s ever read my blog before, you’ll see that over the weekend I upgraded my blog template to use YUI Grids and YUI3 for the JavaScript. By switching away from the MT templates (or, the templates that were standard when I installed the first versions of MTOS 4), I was able to reduce the HTML pageweight by damn near half. The old templates were really div-heavy, and had a ton of extra markup. Mostly, the decision was driven by a desire to redo the visual feel of my blog, and I felt that I may as well rewrite under YUI Grids while I do it.

I chose to use the YUI 2.7 CSS Reset-Fonts-Grids, since I was more familiar with the Foundation in 2.x, and I don’t think things changed much for Reset and Fonts in 3.x anyway. Actually, rewriting the HTML templates was pretty simple, and I’m planning to share them, if I can figure out how to share them easily (the templates don’t seem to export well).

As for how I got the color scheme, I used the excellent Color Scheme Designer, specifically with this key, and I’m pretty happy with it. This color scheme designer is awesome, including letting you simulate the colors if a user was color-blind. If you don’t have this bookmarked yet, you should. Especially if you are, like me, not much of a designer. It provides me with a collection of colors that I can play with and tweak to try to get things right, and I do think I’ve got some tweaking I still need to do.

For the JavaScript, I used YUI 3, and mostly was trying to redo the absolutely necessary functions from the Movable Type javascript, and I’m pretty sure I got it right. I further plan to migrate the Y! Buzz, StumbleUpon and Flattr sections to be dynamically added via JavaScript. The Flattr in particular has proven to be really slow, so I need to move that to deferred loading.

I also upgraded to the latest version of the Syntax Highlighter script from Alex Gorbatchev, which is a ton better, and didn’t require any of the hacking I did to the old version to let it generate standards-compliant markup. I may do some deferred execution work on that, and try to build it to load only the brushes needed, but I haven’t determined how best to do that (or if it’s worth it).

In all, I’m really glad to have the visual refresh done, and mostly to be done with the rebuilding of my skins. I think things are greatly improved in this way, and I hope that people enjoy the new look and feel. I also plan to do some more posts in the coming weeks detailing some of the JS work that I’ll be doing on the blog, so that other people can take advantage of those techniques.