A collection of css3please based snippets for snipmate
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
readme.md a start Apr 28, 2012


CSS3 Please snippets for SnipMate

This is a collection of CSS snippets for the SnipMate VIM plugin, based on the wonderful css3please website.

I'm using css3-please nearly every day, this is an essential part of my CSS authoring workflow. As a lazy-developer, everytime I go there to copy and paste some awesome CSS rules I feel like I could stay in the comfort of my VIM session. and simply start typing something like transition<TAB>.

And then I would have the according snippet from css3-please automatically, copy-pasted into my buffer, with appropriate placeholder. That would make me a happy developer.


Put the css directory in your ~/.vim/snippets directory and you're done.

For the snippets to work, the filetype needs to be css.


├── 3dtransforms.snippet
├── animation.snippet
├── bgsize.snippet
├── boxshadow.snippet
├── columns.snippet
├── font.snippet
├── gradient.snippet
├── opacity.snippet
├── rgba.snippet
├── rotate.snippet
├── round.snippet
├── scale.snippet
├── tabsize.snippet
├── textshadow.snippet
└── transition.snippet


Typing the transition trigger word followed by a <tab>


will expand the following CSS snippet:

  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;

To go to the next item placeholder, simply <tab> over to it; if there is repeated code, such as the "all" variable in this example, you can simply start typing once it's highlighted and all the matches specified in the snippet will be updated.


  • rotate

rotate snippet ommits filter for ie6-ie9. Requires conversion from deg to appropriate matrix (=/)

filter: progid:DXImageTransform.Microsoft.Matrix(
       M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
  • same goes for the scale snippet

  • same goes for the rgba snippet