Rabidgremlin's soapbox

Well, it has been a while since I posted something meaty, I’ve been kinda doing a lot of micro-blogging and tinkering with other things like my Privacy Check for Facebook, so haven’t really had time to sit down and write a decent post.

Of course as soon as I did sit down to write something, I got hideously distracted with the idea of creating a new theme for my blog…

Luckily due to some very handy tools, it did not take nearly as long to finish off my new theme as it could have.

First up Blueprint CSS, this is a fantastic CSS framework. I used it for contactprotocol.org and for my Privacy Check for Facebook app so it was a no brainer to use for the theme. If you are not a hard-core webcoder then this is the easiest way to put together a good looking website that just works.

Next up: jQuery, which, is a fantastic Javascript framework. I’m really getting to grips with it and there is no way I would ever build another site without using a Javascript framework of some kind.

For instance I have a lot of code examples on the blog. These I  format into <pre> blocks so that they are easier to read. Problem is that they are often very wide and would get cut off with this new theme. A bit of digging around on the web and little bit of Javascript and we have the following; a code block that expands when you hover the mouse over the it. Here is an example (and the actually code):

//this code finds all pre tags and makes them expand on hover
//code has been formatted to be extra wide to demonstrate the effect
$('div.entry').find('pre').wrapInner('').hover(function()
                                               {
                                                 var contentwidth = $(this).contents().width();
                                                 var blockwidth = $(this).width();
                                                 if(contentwidth > blockwidth)
                                                 {
                                                   $(this).animate({ width: '950px'}, 250);
                                                 }
                                               }, function()
                                                  {
                                                  $(this).animate({ width: '640px' }, 250);
                                                  });

I also used Fancybox to create a lightbox effect for images and image galleries. For example try clicking on one of  the images below:

Lastly I used the new Google Font API (that was released this week) to embed the cool font I used for the blog & post titles in a cross browser compatible way. The font is Reenie Beanie by James Grieshaber.

So what do you think? Leave a comment :)