minimal design

Don’t forget to backup your current CSS bundle before upgrading to this one!

I finally took the time to clean the TextMate CSS bundle I’ve been using for a while. It features a few new additions that should speed up your workflow even more! Here’s a screencast overview of the new features (8.6MB QuickTime). And if you want the details, here it is:

Inclusion of most common CSS property values to tab triggers

More tab triggers of course! The main addition to this 1.1 version is the inclusion of CSS property values right in the tab trigger. For instance: in order to get float: left; you used to type “fl + ⇥ + 1” but now you can get the the value you want by adding the 1st letter of the value to the tab trigger, so the same example becomes “fll + ⇥”. In order to get a sense for how much faster this system is, you need to try it out. I’ve added all common properties and values as additional tab triggers, so none of the previous functionality is gone.

Properties with complete support for new tab triggers (all values available):

• border-style
• clear
• float
• font-style
• font-weight
• overflow
• position
• text-align
• text-decoration
• text-transform

Properties with partial support for new tab triggers (only common values available):

• background-color (transparent)
• display (inline, block, none, inline-block)
• list-style-type (none)
• vertical-align (top, middle, bottom)

CSS image replacement drag command

Drag an image file in your CSS file and the following code will be automatically added with the correct image dimensions:

#selector {
    width: 640px;
    height: 480px;
    background: url('../some_pix.jpg') no-repeat;
}

#selector a {
    display: block;
    width: 640px;
    height: 0;
    font-size: 1em;
    padding-top: 480px;
    text-indent: -2000px;
    overflow: hidden;
    background: url('../some_pix.jpg') no-repeat;
}

Both image replacement and an image replacement as a link (pictured above) are available. You can modify selector name and image path of both declarations at the same time.

Miscellaneous

I reversed the order of min-height and max-height to have the most commonly used option first. I tweaked some of the snippets from the default CSS bundle to make their output more consistent and make them easier to use. I cleaned up the menu, and reorganized stuff around a little. I replace border: none; with border-style: none; which is technically more correct. I also fixed a few small bugs but didn’t keep a tab so I can’t remember what they were… sorry!

Download

You can downloaded the new v.1.1 on the TextMate CSS bundle download page