What tools do you use when generating markup from mockups?

Question

So I endeavor to spend most of time on the app server side of things but time to time I need to get my hands dirty and generate markup/css/js from a wireframe or mockup. As far as tools go, Ive found browsershots and Litmus app helpful and of course, vm's as well for checking things out live in ie-{6,7,8}. Otherwise I do the heavy lifting in vim.

For generating new markup thats not tied to a target design I think some of the css frameworks & tools like sass look useful but Im skeptical of their utility when needing to generate markup to match a photoshop design.

So what tips / tools do you keep in your markup generating utility belt when building solid markup from designs?

My list so far:

• Browsershots
• Browserlab.adobe.com
• Haml / Less / Sass (not used but will probably explore)

Answer 1

I use the 960 Grid System (with Meyer's reset, and text-reset). I design my layouts in photoshop in such a way that I can use the 960 Grid System. This doesn't require boxy layouts, but it does require thought and order as opposed to arbitrary distances between grahical elements, etc.

My code is always hand-written; I don't trust software to think for me. This way I have complete control over what takes place. I never use IE-only hacks. If I can't do what I want one way, I'll look for another. Hacks put a form of instability into a design/layout/functionality, and I'm not a big fan of that.

I run all modern browsers, along with IETester for testing IE6, but I'm certain that I'll be dropping support for IE6 pretty soon. You can only address its PNG-issues so much before you want to bash your monitor against the wall.

And my number-one tool, StackOverflow. Without the wonderful minds and altruistic personalities here I would be left all alone to address each and every problem that I meet. That's a depressing idea.

Answer 2

• TextMate/Firebug/MAMP Pro is my general toolkit
• CSS resets (Eric Meyer's and Aardvark.legs are my favorites)
• xScope
• VMs in various combinations to support A-grade browsers
• Smush.it and YSlow in general
• The concepts of OO CSS

Since I still may be required to use the occasional CSS hack, I will normally build out my CSS in several passes. Colors first, followed by typography, followed by layout. Checking everything (specifically IE6) after each pass. Better to nip the problems in the bud rather than trying to trace through everything later!

Although it's not necessarily markup related, jQuery and TYPOlight are invaluable time savers. I never deploy a site without a CMS in place anymore. The extra afternoon to set up a working site in TYPOlight and train the client saves days of update headaches in the long run.