The Single Most Critical Thesis Theme Development Tool

Yes, there is a tool so important to Thesis development that it is nearly impossible to unlock the power of Thesis without it. In fact, I think it is fair to say that without this tool you will never use Thesis to its fullest. What is this crucial tool? Firebug.

I know you want it.

Everybody that purchases Thesis deserves to take full advantage of its unprecedented design power. By using custom.css and custom_functions.php, you are able to make nearly infinite changes to Thesis. In fact, I challenge every person to find websites that they believe cannot be recreated using Thesis and, hopefully, I will prove them wrong [more on that later]. I digress. The issue at hand is that I know you want to use all software you purchase to its fullest. But, how does Firebug help with Thesis development? What the heck is it anyway? Let’s further examine these questions.

What the heck is Firebug?

Firebug allows you to “edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.” It is a plugin for Firefox which, if you don’t have Firefox, get it right freaking now. Once installed, Firebug puts a little icon in the far right in your status bar. All you have to do is click the tiny bug. After that, you can inspect almost any area of your website. Firebug will show you the HTML on the left and the corresponding CSS on the right. You can also choose to inspect the layout of your site, which means no more 1px alignment issues [those drive me nuts]. There are almost as many ways to use Firebug as there are ways to use Thesis. Almost…

Firebug + Thesis = Web Pwnership.

Of course I use the word pwn; I’m cool like that. But seriously the two combined are like Bill and Ted: most excellent. One of the most advantageous aspects of using Firebug is that it helps you perfectly calculate ems. Yes, the dreaded ems. So many designers are opposed to ems. The problem is that a pixel on computer A may not be a pixel on computer B. So declaring sizes in pixels is a massive FAIL. How does Firebug show you em calculations? Well, the first thing to know is that ems are calculated by default in Thesis with a base 10. That means to calculate ems in most areas of Thesis, you divide the number of pixels by 10. If you inspect #content_box with Firebug and scroll down the CSS, you will see something that says font-size: 62.5%. Why do you see that? Because most browsers’ default font size is 16pt and Chris Pearson, in his infinite wisdom, decided that 10pt is better. I agree. Now, if you were to use Firebug to inspect #header #logo you would immediately see font-size: 3.6em;. That means the logo area has a base of 36. Therefore, to declare ems in this area you would divide the number of pixels by…you guessed it: 36.

Firebug is also useful for alignment problems, which are rampant on the web these days. Nothing makes me more disgusted than when I go to a website that looks like a 10 piece puzzle my one year old nephew put together. When inspecting areas in Firebug, you can use a feature called “Layout” which shows you measurements of any area on the site.

The last massive advantage I want to cover is the live CSS editing. Using Firebug you can experiment on your site with no ramifications whatsoever. I know that experimenting in your custom.css is cumbersome. Firebug allows you to make whatever changes you desire to the CSS. Add borders, change margins or adjust padding. Basically, whatever you want to do with custom.css can be tested with Firebug first.

The conclusion I want you to draw is that you are nuts if you don’t get Firebug. Both Mozilla and Firebug are 100% free so there is absolutely no excuse to not have them. Of course, I know you are nuts if you develop websites with anything other than Thesis. But, that is a topic for another day

Oh, be sure to check back soon for a better explanation of ems.

GET THESIS HERE!