TextMate CSS bundle

Version History

Check out the HTML and CSS TextMate Bundle Screencast (25.8MB/19:22) to get an idea of what these bundles can do for you. It’s too long, and English is definitely not my first language… But it should give you a better idea on how to use those bundles.

The basic idea behind this CSS bundle is to access everything through tab triggers. You can access every CSS property by typing its initials. This system eliminates almost all typing… Here are a few examples:

property

tab trigger

color

c

padding-top

pt

border-right-width

brw

To avoid triggering properties that have similar initials, they’re a few exceptions to this rule:

property

tab trigger

background

bg

clear

cl

cursor

cu

float

fl

outline

ol

position

po

The biggest change from the previous version is po instead of p for “position.” I changed that so that I don’t get padding-right and position: relative at the same time anymore.

But it doesn’t stop there… Keyword based property values can also be directly accessed by adding the first letter of the value to the tab trigger. For instance:

property

tab trigger

display: block;

db

font-style: italic;

fsi

vertical-align: middle;

vam

Once you use it, you’ll see how fast this system really is.

Installation

Download the zip file and uncompress it. You’ll get a TextMate bundle called “mCSS” which you can simply double click to install. If you’re updating, check the release info… Also, make sure you save your own CSS bundle first if you’ve customized it so that you have a clean backup of your own setup (just drag and drop it from the bundle editor). Check out the TextMate manual for more info on TextMate bundles.