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-*
), plusbackface-visibility
,perspective
, andperspective-origin
transition
= shorthand, prefixed values, and individual properties (transition-*
)animation
@keyframes
- column (a.k.a. multicol) =
column-*
pluscolumns
shorthand andbreak
- 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:
- When can I use…
- HTML5 Please CSS info
- Mozilla Developer Network
- CSS Coloratum (for color conversion)
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:
- Download the zip from http://github.com/oli/CSS3.tmbundle/zipball/master
- Find the zip file on your local machine and double-click to unzip it
- Change the file name from oli-CSS3.tmbundle-really_long_alpha_numeric_sequence to CSS3.tmbundle
- Double-click the CSS3.tmbundle file
- Open TextMate and select the following menu item: Bundles > Bundle Editor > Reload Bundles
- Show the Bundle Editor (Bundles > Bundle Editor > Show Bundle Editor)
- 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.