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">
</video>HTML5 template by html5
<!DOCTYPE html>
<html>
<head>
<title>$1</title>
<meta charset="UTF-8">
</head>
<body>
$0
</body>
</html>jQuery include by script:jq
<script src="//code.jquery.com/jquery-${1:latest}.min.js"></script>Example: @f+ will be expanded into
@font-face {
font-family:${1:FontFamily};
src:url(${2:font}.eot);
src:
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;There are two variables that controls CSS formatting:
-
ZC_CSS_AfterColonit could be empty or contains space, resulted output respectively:color:#000;orcolor: #000;. -
ZC_CSS_BeforeLastBraceit could be empty or contains tab symbol, output of the last bracket will change respectively:
@font-face {
font-family:;
}
@font-face {
font-family:;
}To add variables to TextMate:
- Go to Preferences — Advanced — Shell Variables;
- Press plus button, add variable and its value.