Templating Tools For TYPO3


April 28, 2011

After completing my first large TYPO3 project, I thought I would share a brief overview of some of my favorite tools I used to make HTML/CSS templates.

First off, the backbone to any website project is a strong code editor. My text editor of choice is Coda (http://www.panic.com/coda). Coda has many features such as built in FTP, split screen views, code clips, ssh terminal, books? the list goes on. I hear Textmate is awesome too but I’ve found a tool I work well with and I’m sticking with it.

First thing I do when jumping into coding my pages is apply a CSS reset. A reset will apply standard rules across most browsers? default css styles. Out of habit, I prefer the resets bundled with the 960 gridsystem (http://960.gs) but there are many solid alternatives such as Blueprint CSS (http://www.blueprintcss.org/) or Eric Meyer’s reset (http://meyerweb.com/eric/tools/css/reset/).

Then I dig in and start writing code. Pretty soon after that, I’ll begin to run into floating and clearing issues. That’s when I turn to the trusty clearfix. This clearfix solution (http://www.webtoolkit.info/css-clearfix.html) always does the trick for me.

While developing, I’m constantly using the Firefox extension, Firebug. Firebug allows you to edit and test your site live inside the browser. This is similar to the Web Developer mode in Safari and Chrome. If you are developing websites and don’t use Firebug, try it out and prepare to have your mind fully blown.

After coding my HTML/CSS template, I begin to test my code in different browsers. Netrender (http://ipinfo.info/netrenderer/) is a great tool for getting quick screenshots of what your website looks like in Internet Explorer browsers. There is also a Firefox extension to quickly get screenshots with Netrender (https://addons.mozilla.org/en-US/firefox/addon/ie-netrenderer/).

Pretty soon into testing, you’ll see that any transparent PNGs you may have used are now blue in IE6. A solution for this is to apply an IE6 PNG fix. Twin Helix (http://www.twinhelix.com/css/iepngfix/) has created a very solid PNG fix which is easy to implement.

Then you run your site through a validator (http://validator.w3.org/), drop it into TemplaVoila and you?re done.

Please ask for clarification on any of these tools in the comments. Which text editor do you use and why? What other methods, tools, or tricks do you religiously use when developing sites?