/CSS3.tmbundle

A fork of @desandro’s TextMate bundle for CSS3 properties by @boblet: snippets with vendor prefixes and an updated language file

CSS3 Bundle for TextMate 1

Adds proper syntax highlighting for new CSS3 properties and values, such as transitions, transforms, and animations.

Includes convenient snippets for vendor-specific properties. For example, typing transition then pressing the tab key (⇥) generates:

-webkit-transition: ;
   -moz-transition: ;
    -ms-transition: ;
     -o-transition: ;
        transition: ;

This bundle is a fork of Dave @Desandro’s CSS3.tmbundle. All credit goes to him, any mistakes are mine ;-)

Tab triggers

  • border-radius
  • lingrad = background-image linear gradient
  • bg-clip = background-clip
  • bg-origin = background-origin
  • box-shadow
  • box-sizing
  • transform = shorthand and individual properties (transform-*), plus backface-visibility, perspective, and perspective-origin
  • transition = shorthand, prefixed values, and individual properties (transition-*)
  • animation
  • @keyframes
  • column (a.k.a. multicol) = column-* plus columns shorthand and break
  • hsl and hsla

Several snippets have “extra” versions, with extra information about expected values and optional values.

Browser support

Currently vendor prefix support in these snippets goes back to ~2009 (Safari 4+, Firefox 3.6+). For browser support and use information, refer to:

Install

The quickest way to install the bundle is via the command line. If you have Git installed, you'll probably want to install with Git. With or without, you can simply copy and paste each line one by one into the Terminal instructions:

Install with Git

mkdir -p ~/Library/Application\ Support/TextMate/Bundles
cd ~/Library/Application\ Support/TextMate/Bundles
git clone git://github.com/oli/CSS3.tmbundle.git "CSS3.tmbundle"
osascript -e 'tell app "TextMate" to reload bundles'

Install without Git:

mkdir -p ~/Library/Application\ Support/TextMate/Bundles
cd ~/Library/Application\ Support/TextMate/Bundles
wget http://github.com/oli/CSS3.tmbundle/tarball/master
tar zxf oli-CSS3.tmbundle*.tar.gz
rm oli-CSS3.tmbundle*.tar.gz
mv oli-CSS3.tmbundle* "CSS3.tmbundle"
osascript -e 'tell app "TextMate" to reload bundles'

Install with download

If you'd like to avoid the command line altogether, you can download the bundle and install it:

  1. Download the zip from http://github.com/oli/CSS3.tmbundle/zipball/master
  2. Find the zip file on your local machine and double-click to unzip it
  3. Change the file name from oli-CSS3.tmbundle-really_long_alpha_numeric_sequence to CSS3.tmbundle
  4. Double-click the CSS3.tmbundle file
  5. Open TextMate and select the following menu item: Bundles > Bundle Editor > Reload Bundles
  6. Show the Bundle Editor (Bundles > Bundle Editor > Show Bundle Editor)
  7. Scroll through the list of bundles to confirm that the bundle has been properly installed

Setting as default CSS Bundle

After installing the bundle via the method above, the CSS3 bundle will be available, but the original CSS bundle will remain the default bundle.

Feedback

Ping me on @boblet.