March 3, 2008

This is the sixth post in my series, Themery : Blogged, where I blog about each step of a WordPress theme design.

This post marks the start of the build process, and so I am going to share some of the tools that I am using to design and layout the content. There are a lot of really interesting, and most importantly, free, tools around that can really make life easier.

Aptana Studio

Aptana Studio is a free, open source, development environment. It is primarily intended for ajax applications but it comes with plugins for PHP.

I’ve been using it for a little over a month now and I find it really easy to use. One of the key features for me is the auto complete that pulls through IDs from the HTML when editing stylesheets, and class, variables, and function names when you are editing PHP.

It is based on Java and so is not limited by your OS.

You can download it from http://www.aptana.com/studio

Alan Jardine’s Design Bookmarklet

This Javascript bookmarklet is something I don’t think I could do without. It has four different functions that are available from the floating menu once activated.

For layout, and essential for creating a regular rhythm is the grid tool. This lets you set the the size of the grid, grid margins, gutters, columns, and even overlay colours.

Also included is a ruler which allows the origin point to be reset, a measuring tool, that measures distances in both X and Y between two points, and a crosshair that shows the mouse position at all times.

You can get the bookmarklet here http://www.sprymedia.co.uk/article/Design

James Whittaker’s Vertical Rhythm Calculator

This is a great tool that can be used online, within the article, or downloaded as an Adobe AIR application. It provides a really quick and easy way of calculating the CSS for sizing multiple text elements in EMs. It even includes the option to size relative to a containing element.

You can donwload, or use, the calculator at James’s article on EM based layouts.

Phiculator

In the third post of this series I explained that I intended to use multiple overlapping golden ratios as the basis for the layout. while these are not difficult to calculate this quick calculator can save you the trouble of dusting off your calculator.

You can download the flash tool or use it on the website.

Eric Meyer’s Reset Stylesheet & Diagnostic Stylesheet

Eric Meyer has produced two utility stylesheets that can save you a heap of time. The first is his reset stylesheet. This resets all the elements so that you can have a predictable start point and not have to worry about variations in the default styles applied by different browsers.

It does mean that you need to add more styling because you can’t rely on some default behaviour, but this generally just reinforces the things you should already be thinking about.

The second is a diagnostic stylesheet that makes your site look awful to identify potential problems. This highlights empty list items and div tags, images without alt attributes, links without titles or hrefs.

These can be downloaded form the CSS Toolbox section at Meyerweb.com

Firebug

Finally we have Firebug. I don’t know how I ever managed to produced anything without Firebug. Firebug is a Firefox plugin that lets you debug layout, css, javascript, and connection issues, alter the css and see the results without reloading

This example shows the line height and margins of the header, the total offset from the top of the page, any padding, and I am changing the title itself and seeing the results in real time.

For laying out websites this tool is essential.

You can get Firebug at http://www.getfirebug.com/

Tomorrow I’m going to explain the html layout, why I have written the html and the CSS the way I have, and what that brings to the theme.