Home

Codetaculous. A TextMate Bundle.

Textmate is a light weight text editor for Mac users, built by Macromates.

Today, I’m releasing a TextMate Bundle for front-end coders. I originally wrote this series of code snippets roughly three months ago to speed up my work with XHTML and CSS documents. These snippets have dramatically increased my speed and code craftsmanship.

ยป Download the Codetaculous Bundle.

This Bundle features a variety of helpful tricks for the development of both websites and email marketing templates. I’ve included a table below for reference.

Codetaculous. An XHTML & CSS Bundle for TextMate.
Snippet Keyword Comments Document-Specific?
New Strict XHTML Document (template) new none any
New Email Marketing Document (template, Strict XHTML) em Development of this template is based on the standards as defined by the experts at CampaignMonitor.com. HTML
New Strict XHTML Document new any
Google Chrome Frame chrome Belongs in document <head>. Implement Google Chrome Frame for IE. About: Chrome Frame. HTML
Conditional Comments for IE ie Talks to various IE browser versions. Belongs in document <head>. Handy for use when implementing a stylesheet specific to a version of IE. HTML
<img> Tag img A quick XHTML image tag. HTML
<a> Tag foobarlink An anchor tag for a specific site. You’ll need to change the keyword for this snippet. Most helpful for email templates, where absolute links are needed. HTML
Fahrner Image Replacement fir A text replacement method, driven by CSS. An alternative to Typekit or Sifr. CSS
Width attribute wid Most helpful when coding a table-driven layout for email marketing. A handy tabspace in this one. HTML
Height attribute ht Most helpful when coding a table-driven layout for email marketing. A handy tabspace in this one. HTML
Colspan attribute col Most helpful when coding a table-driven layout for email marketing. A handy tabspace in this one. HTML
Rowspan attribute row Most helpful when coding a table-driven layout for email marketing. A handy tabspace in this one. HTML
A <table> row tr A new table row. HTML
A <table> cell td Best for use with email marketing templates. HTML
Inline margin/padding reset mp For use when developing email marketing templates. Because Gmail defines margin and padding for many of a template’s block-level elements, I’ve found myself resetting margin and padding a lot. any
Inline definition of Vertical Align properties valign For use when developing email marketing templates. It’s best to reset the vertical align to top for

Instructions: To implement any of the following snippets, type the keyword followed immediately by a tab-space. Some shortcuts are document-specific, meaning you must save the document with a file extension before the snippet will work.

A tip for power users: Once your code snippet appears, you’ll be able to tab through it to important parts. For instance, in the New XHTML Document snippet, the first tab-space is the document <title>. Try them out — you’ll catch on quickly.

Thanks everyone. If you find these helpful or you’d like to suggest any additional snippets for this set, reply with a comment to let me know. Any links, tweets or credits are always appreciated.

web development

Wednesday, January 6, 2010 at 8:28 pmSubscribe by reader Subscribe by email

» Subscribe to responses & comments for this article.

Sean Berger is a designer & developer living in Kansas City.

None

recent history


Google & Blogspot users

This is a secure feature built by Google.