HTML and CSS snippets for Zen Coding project

Zen Coding Snippets

HTML and CSS snippets for Zen Coding project, follow @zen_coding for updates.

Special repository for creating new snippets and polishing old ones. Syntax of the snippets is compatible with TextMate snippets.

Bug reports and suggestions are welcome.


Example: video+ will be expanded into

<video width="${1:640}" height="${2:480}"${3: controls}>
	<source src="${4:video}.mp4" type="video/mp4">
	<source src="$4.webm" type="video/webm">
	<source src="$4.ogv" type="video/ogg">

HTML5 template by html5

<!DOCTYPE html>
	<meta charset="UTF-8">

jQuery include by script:jq

<script src="//${1:latest}.min.js"></script>


Example: @f+ will be expanded into

@font-face {
		url($2.eot?iefix) format('eot'),
		url($2.woff) format('woff'),
		url($2.ttf) format('truetype'),
		url($2.svg#$2) format('svg');

Cross-browser gradient by bgi:lg

background-image:-webkit-linear-gradient(${1:top}, ${2:#000} ${3:0}, ${4:#FFF} ${5:100%});
background-image:-moz-linear-gradient($1, $2 $3, $4 $5);
background-image:-ms-linear-gradient($1, $2 $3, $4 $5);
background-image:-o-linear-gradient($1, $2 $3, $4 $5);
background-image:linear-gradient($1, $2 $3, $4 $5);

Cross-browser transition by tr

-webkit-transition:${1:all} ${2:linear} ${3:1s};
-moz-transition:$1 $2 $3;
-ms-transition:$1 $2 $3;
-o-transition:$1 $2 $3;
transition:$1 $2 $3;

TextMate Specific Options

There are two variables that controls CSS formatting:

  • ZC_CSS_AfterColon it could be empty or contains space, resulted output respectively: color:#000; or color: #000;.

  • ZC_CSS_BeforeLastBrace it could be empty or contains tab symbol, output of the last bracket will change respectively:

@font-face {
@font-face {

To add variables to TextMate:

  • Go to Preferences — Advanced — Shell Variables;
  • Press plus button, add variable and its value.