I have to admit, I hate not writing things from scratch. I can’t stand those text editors that try to outsmart you, by completing your HTML tags for you for instance. Just about the only thing I can handle is automatic indenting, and even that took some getting used to.
Of course there are a few bits of HTML and CSS files that you are always going to be repeating every time you make a new document. Not only that, but there are a few things that are nearly impossible to remember (like DOCTYPE statements). So, I made a few templates, and I thought I would share them. Not because it’s a novel idea, but because it took so long before I actually thought to do it–maybe I would have sooner if I’d seen someone else do it.
The first two are for HTML files–one for HTML, and one for XHTML. I use the first unless I have to use the second (the explanation for that will be another post).
Then I have a “flat” HTML file. When I code a layout, the technique I use to achieve pixel-perfection is to flatten the design file into a jpeg, and then place it in an HTML file that positions the image the same way the final layout will be positioned. Placing it in the background works better than using an image tag for a number of reasons. Once my “flat” file is ready, I put it in a tab next to the actual layout I’m working on. Then I can just flip between tabs to make sure everything is aligned perfectly. Since the designers I work with usually center their layouts, my flat file centers the image by default, but it’s easy enough to change.
Finally, my CSS template is not much to speak of … a couple comment lines for structure, and a .clear class (which is almost always exactly the same and is annoying to have to rewrite when you need it)