TextMate CSS Editing

This is just going to be a couple of quick tips for CSS editing in TextMate, including a modification of the Insert Color command that will seriously help with adding colors to your layout.

Intuitive Editing

The language files that come with Textmate do a great job of highlighting the code. You’ll know exactly when you get a tag right and it’s a great way to learn to write proper CSS. You can write shortcuts or full rules and the bundle’s snippets are excellent guides. The first thing I did was shorten the tab triggers for a few commonly used snippets. For example, the background-⇥ trigger opens up a list of 11 choices that are very handy. I just preferred to only have to type back-⇥ to trigger them, so I edited the tab trigger for all 11 snippets to be ‘back’. You can modify the tab triggers to be whatever is most intuitive for you.

Drag and Drop

The next thing I did was add a drag command for inserting image files. I copied the “Insert Image With Dimensions” drag command from the HTML bundle and moved it into the CSS bundle. I renamed the copy to “Insert Image URL” and removed all of the dimension code. I kept the filetype definitions, and changed the scope to source.css. The code for the command is now one line:

<pre>echo -n "'$TM_DROPPED_FILE'"</pre>

Now I can drag a file from the project drawer between the parentheses of a url() definition and it will insert the relative path and filename. I’m planning to work on a command to upload dependent files with Transmit when you use the docksend command.

Color Improvements

Next I went to work on the Insert Color command. I had originally been using Color Schemer Studio to build websmart color palettes and then just drag colors into TextMate, but I found a more convenient (I think) solution. I still create the palettes in Color Schemer, but I add them to the Color Picker using this technique.

1. Create your palette in Color Schemer Studio or any application that lets you drag and drop colors. You could of course, create your palette directly in the color picker, but I like having a color wheel and color mixer handy, as well as the “make websmart” option.

2. Open the color picker in TextMate by creating or opening a CSS file and pressing ⌘-⇧-C and select the third icon at the top (Color Palettes). Drag down the first dropdown and choose “New”, and then rename it. You can remove the first color it creates with the dropdown at the bottom.

3. Arrange your palette creation app and the color picker side by side and drag your colors from the app into the main window of the color picker.

You now have a palette that can be navigated with the keyboard and popped up directly within TextMate!

On to the Command. The command that comes with TextMate doesn’t recognize abbreviated RGB notation (3 character) even though the snippets all use it. That means double pound signs and all of the code it inserts is longhand. This modified command takes care of both problems.

#!/usr/bin/env ruby

string = STDIN.read
string = "#999" if string.empty?
prefix, string = string.match(/(#?)(.*)/)[1,2]
string = $1 * 2 + $2 * 2 + $3 * 2 if string =~ /^(.)(.)(.)$/
def_col = ' default color {' + string.scan(/../).map { |i| i.hex * 257 }.join(",") + '}'
col = `osascript 2>/dev/null -e 'tell app "TextMate" to choose color#{def_col}'`
exit 200 if col == ""
col=col.scan(/\d+/).map { |i| "%02X" % (i.to_i / 257) }.join("")
print prefix
if col.match(/(.)\1(.)\2(.)\3/) then
print $1 + $2 + $3
else
print col
 end

A big thanks to Haris for his help with this one!

I replaced the original ⌘-⇧-C command with this one.

Previewing

There’s a few ways to go about previewing your CSS changes, and it depends on your current workflow. Basically the best way I’ve found is to load up the main page of the site that the CSS file is attached to in Firefox or Safari and use the ⌘-R command within TextMate to refresh running browsers. There’s not, as far as I can tell, a simple way to create a truly live preview. You can use several different methods to refresh your browser at regular intervals, but on any page that has a load time of more than 1 second, I find that to be annoying. So I make the changes, and hit command-R. My command is set up to Save: Current File, and I can’t remember if it came that way or not. Either way, it saves the extra keystroke before previewing.

Feedback

Overall, using TextMate has both sped up my CSS development and refined my skills. If you have any more ideas, I’d love to hear them!

CSS» textmate» webdesign»