Zen Coding

Zen Coding 0.
6
http://code.google.com/p/zen-coding
Selectors
Filters0.6
div#name. . . . . . . . . . . . . . <div id="name"></div>

div.name. . . . . . . . . . . . . . . <div class="name"></div>
div.one.two. . . . . . . . . . . . <div class="one two"></div>
div#name.one.two. . . . . <div id="name" class="one two"></div>
div>p . . . . . . . . . . . . . . . . . . <div><p></p></div>
p+p. . . . . . . . . . . . . . . . . . . . <p></p><p></p>
p*3. . . . . . . . . . . . . . . . . . . . . <p></p><p></p><p></p>
p.name-$*2. . . . . . . . . . . . <p class="name-1"></p><p class="name-2"></p>
html. . . . . . . . . . . . . . <html></html>
:xmlxmlns :4tHTML4trans :4sHTML4strict :xtXHTMLtrans
:xsXHTMLstrict :xxsXHTML1.1 :5
Document head & Metadata

head. . . . . . . . . . . . . <head></head>
title. . . . . . . . . . . . . . <title></title>
base. . . . . . . . . . . . . . <base href="">
link. . . . . . . . . . . . . . . <link>
:csscss-link :printprintcss :favicon :touchtouch-icon
:rss :atom
meta. . . . . . . . . . . . . <meta>
:utf :win :compatX-UA-Compatible
style . . . . . . . . . . . . . <style type="text/css"></style>
script. . . . . . . . . . . . . <script type="text/javascript">
:src
noscript. . . . . . . . . . <noscript></noscript>
Sections
body. . . . . . . . . . . . .
section (sect). . . . .
nav. . . . . . . . . . . . . . .
article (art). . . . . . .
aside. . . . . . . . . . . . .
h1h6. . . . . . . . . . . .
hgroup (hgr). . . . .
header (hdr) . . . . .
footer (ftr) . . . . . . .
address (adr). . . . .
div. . . . . . . . . . . . . . .
<body></body>
<section></section>
<nav></nav>
<article></article>
<aside></aside>
<h1></h1>
<hgroup></hgroup>
<header></header>
<footer></footer>
<address></address>
<div></div>
Grouping Content
p . . . . . . . . . . . . . . . . <p></p>
hr . . . . . . . . . . . . . . . . <hr>
br . . . . . . . . . . . . . . . . <br>
ul+. . . . . . . . . . . . . . . . . . . . . . . . . .
table+ . . . . . . . . . . . . . . . . . . . . . .
dl+. . . . . . . . . . . . . . . . . . . . . . . . . .
p.title|e0.6. . . . . . . . . . . . . . . . . . .
p[title]0.6. . . . . . . . . . . . . . . . . . . .
td[colspan=2]0.6 . . . . . . . . . . . .
span[title="Hello" rel]0.6. . . .
pre. . . . . . . . . . . . . . . <pre></pre>
dialog (dlg) . . . . . . <dialog></dialog>
blockquote (bq). . <blockquote></blockquote>
ol+ . . . . . . . . . . . . . . . . <ol></ol>
ul+ . . . . . . . . . . . . . . . . <ul></ul>
li . . . . . . . . . . . . . . . . <li></li>
dl+ . . . . . . . . . . . . . . . . <dl></dl>
dt . . . . . . . . . . . . . . . . <dt></dt>
dd . . . . . . . . . . . . . . . . <dd></dd>
Text-level Semantics
a . . . . . . . . . . . . . . . . <a href=""></a>
:link http :mailmailto
q . . . . . . . . . . . . . . . . <q></q>
cite. . . . . . . . . . . . . . . <cite></cite>
em. . . . . . . . . . . . . . . <em></em>
strong (str). . . . . . . <strong></strong>
small. . . . . . . . . . . . . <small></small>
mark. . . . . . . . . . . . . <mark></mark>
dfn. . . . . . . . . . . . . . . <dfn></dfn>
abbr. . . . . . . . . . . . . . <abbr title=""></abbr>
acronym (acr). . . . <acronym title=""></acronym>
time. . . . . . . . . . . . . . <time></time>
progress (prog). . <progress></progress>
meter. . . . . . . . . . . . <meter></meter>
code . . . . . . . . . . . . . <code></code>
var. . . . . . . . . . . . . . . <var></var>
samp. . . . . . . . . . . . . <samp></samp>
kbd . . . . . . . . . . . . . . <kbd></kbd>
sub. . . . . . . . . . . . . . . <sub></sub>
sup. . . . . . . . . . . . . . . <sup></sup>
span . . . . . . . . . . . . . <span></span>
i . . . . . . . . . . . . . . . . <i></i>
b . . . . . . . . . . . . . . . . <b></b>
<ul><li></li></ul>
<table><tr><td></td></tr></table>
<dl><dt></dt><dd></dd></dl>
<p class="title"></p>
<p title=""></p>
<td colspan="2"></td>
<span title="Hello" rel=""></span>
haml HAML syntax filter

html HTML syntax filter
e Escapes XML-unsafe characters: <, > and &
c Add comments around important tags
fc Add whitespace after CSS property name
xsl This filter removes select attribute from <xsl:variable> and
<xsl:with-param> tags if they have child nodes
ruby. . . . . . . . . . . . . . <ruby></ruby>
rt . . . . . . . . . . . . . . . . <rt></rt>
rp . . . . . . . . . . . . . . . . <rp></rp>
bdo . . . . . . . . . . . . . . <bdo dir=""></bdo>
:rrtl :lltr
ins . . . . . . . . . . . . . . . <ins></ins>
del. . . . . . . . . . . . . . . <del></del>
Embedded Content
figure (fig) . . . . . . . <figure></figure>
img . . . . . . . . . . . . . . <img src="" alt="">
iframe (ifr). . . . . . . <iframe src="" frameborder="0"></iframe>
embed (emb) . . . . <embed src="" type="">
object (obj) . . . . . . <object data="" type=""></object>
param. . . . . . . . . . . . <param name="" value="">
video. . . . . . . . . . . . . <video src=""></video>
audio . . . . . . . . . . . . <audio src=""></audio>
source (src). . . . . . . <source>
canvas . . . . . . . . . . . <canvas></canvas>
map+. . . . . . . . . . . . . <map name=""></map>
area. . . . . . . . . . . . . . <area shape="" coords="" href="" alt="">
:d default :c circle :r rect :p poly
Tables
table+ . . . . . . . . . . . . <table></table>
caption (cap). . . . . <caption></caption>
colgroup (colg)+. . <colgroup></colgroup>
col . . . . . . . . . . . . . . . <col>
tbody. . . . . . . . . . . . <tbody></tbody>
thead . . . . . . . . . . . . <thead></thead>
tfoot. . . . . . . . . . . . . <tfoot></tfoot>
tr+ . . . . . . . . . . . . . . . . <tr></tr>
th . . . . . . . . . . . . . . . . <th></th>
td . . . . . . . . . . . . . . . . <td></td>
Forms
form . . . . . . . . . . . . . <form action=""></form>
:get :post
fieldset (fset). . . . . <fieldset></fieldset>
legend (leg). . . . . . <legend></legend>
label. . . . . . . . . . . . . <label for=""></label>
input. . . . . . . . . . . . . <input type="">
:hidden (:h) :text (:t) :search :email :url
:password (:p) :datetime :datetime-local :date
:month :week :time :number :range :color
:checkbox (:c) :radio (:r) :file (:f ) :submit (:s)
:image (:i) :reset :button (:b)
button (btn). . . . . . <button></button>
select+ . . . . . . . . . . . <select id=""></select>
optgroup (optg)+. <optgroup></optgroup>
option (opt). . . . . . <option></option>
Interactive Elements
datagrid (datag). <datagrid></datagrid>
datalist (datal). . . <datalist></datalist>
textarea (tarea). . <textarea id="" cols="30" rows="10"></
textarea>
keygen (kg). . . . . . <keygen>
output (out). . . . . . <output></output>
details (det). . . . . . <details></details>
command (cmd) . <command>
bb . . . . . . . . . . . . . . . . <bb></bb>
menu . . . . . . . . . . . . <menu></menu>
:context (:c) :toolbar (:t)
Conditional Comments
cc:ie. . . . . . . . . . . . . . 
cc:noie. . . . . . . . . . . 
@import url() @i
@media print { } @m
@font-face { ... } @f
!important !
expression() exp
margin-top mt :aauto
margin-right mr :aauto
margin-bottom mb :aauto
margin-left ml :aauto
padding p :04
padding-top pt
padding-right pr
padding-bottom pb
padding-left pl
width w :aauto
height h :aauto
max-width maw :nnone
max-height mah :nnone
min-width miw
min-height mih
border-top-width bdtw
border-top-style bdts :nnone
border-top-color:#000 bdtc
border-right bdr+ :nnone
border-right-width bdrw
border-right-style bdrs :nnone
Positioning
border-right-color:#000 bdrc
position pos :sstatic :aabsolute
border-bottom bdb+ :nnone
:rrelative :ffixed
border-bottom-width bdbw
top t :a auto
border-bottom-style bdbs :nnone
right r :a auto
border-bottom-color:#000 bdbc
bottom b :a auto
border-left bdl+ :nnone
left l :a auto
border-left-width bdlw
z-index z :a auto
border-left-style bdls :nnone
Box behavior & properties
border-left-color:#000 bdlc
border-radius bdrz :w-webkit :m-moz
float fl :nnone :lleft :rright
Color & appearance
border-top-right-radius bdtrrz
clear cl :nnone :lleft :rright outline o+ :nnone
border-top-left-radius bdtlrz
:bboth
outline-offset oo
border-bottom-right-radius bdbrrz
display d :nnone :bblock
outline-width ow
border-bottom-left-radius bdblrz
:iinline :ibinline-block
outline-style os
background bg+ :nnone :ie
:mib-moz-inline-box
outline-color:#000 oc :iinvert
background-color:#fff bgc :ttransp.
:mis-moz-inline-stack
border bd+ :nnone
background-image:url() bgi :nnone
:lilist-item :rirun-in
border-break bdbk :cclose
background-repeat bgr :rrepeat :xrepeat-x
:cpcompact :tbtable
border-collapse bdcl :ccollapse :sseparate
:yrepeat-y :nno-repeat
:itbinline-table
border-color:#000 bdc
background-attachment bga
:ffixed :sscroll
:tbcptable-caption
border-image bdi+ :nnone :w+-webkit background-position:0 bgp
:tbcltable-column
+
:m -moz
background-position-x bgpx & bgpy
:tbclgtable-column-group border-top-image bdti :nnone
background-break bgbk :bbbounding-box
:tbhgtable-header-group border-right-image bdri :nnone
:ebeach-box :ccontinuous
:tbfgtable-footer-group
border-bottom-image bdbi :nnone
background-clip bgcp
:bbborder-box
:tbrtable-row
border-left-image bdli :nnone
:pbpadding-box
:tbrgtable-row-group
border-corner-image bdci :nnone :ccontinue
:cbcontent-box :ncno-clip
:tbctable-cell
border-top-left-image bdtli :nnone :ccontinue background-origin bgo :bbborder-box
visibility v :vvisible :hhidden
border-top-right-image bdtri :nnone :ccontinue
:pbpadding-box
:ccollapse
border-bottom-right-image bdbri :nnone :ccontinue
:cbcontent-box
overflow ov :vvisible :hhidden
border-bottom-left-image bdbli :nnone :ccontinue background-size bgz :aauto :ctcontain
:sscroll :aauto
border-fit bdf :cclip :rrepeat
:cvcover
overflow-x ovx & ovy
:scscale :ststretch
color:#000 c
:vvisible :hhidden
:owoverwrite
:sscroll :aauto
Special content types
:ofoverflow :spspace
overflow-style ovs :aauto :sscrollbar
border-length bdlt :aauto
table-layout tbl :aauto :ffixed
:ppanner :mmove
border-spacing bdsp
caption-side cps :ttop :bbottom
:mqmarquee
border-style bds :nnone :hhidden
empty-cells ec :sshow :hhide
zoom:1 zoo
:dtdotted :dsdashed
list-style lis :nnone
clip cp :aauto :rrect
:ssolid :dbdouble
list-style-position lisp :iinside :ooutside
box-sizing bxz :cbcontent-box
:dtdsdot-dash
list-style-type list :nnone :ddisc
:bbborder-box
:dtdtdsdot-dot-dash
:ccircle :ssquare
box-shadow bxsh+ :n none
:wwave
:ggroove
:rridge
:dcdecimal
:w+-webkit :m+-moz
:iinset :ooutset
:dclzdecimal-leading-zero
Sizing
border-width bdw
:lrlower-roman
border-top bdt+
:nnone
:urupper-roman
margin m :aauto :04
list-style-image lisi :nnone

quotes q :nnone :ru :en
content ct :nnormal :oqopenquote :noqno-openquote :cqclose-quote
:ncqno-close-quote
:aattr() :ccounter()
:cscounters()
counter-increment coi
counter-reset cor
Text
word-wrap wow :nnormal

:nonone :uunrestricted
:ssuppress
letter-spacing lts
font f+
font-weight fw :nnormal :bbold
:brbolder :lrlighter
font-style fs :nnormal :iitalic
:ooblique
font-variant fv :nnormal :scsmall-caps
font-size fz
font-size-adjust fza :nnone
font-family ff :sserif :sssans-serif
:ccursive :mmonospace
font-effect fef :nnone :egengrave
:ebemboss :ooutline
font-emphasize fem
font-emphasize-position femp :bbefore :aafter
font-emphasize-style fems :nnone :acaccent
:dtdot :ccircle :dsdisc
font-smooth fsm :aauto :nnever
:awalways
font-stretch fst :nnormal :ucultracondensed :ecextracondensed :ccondensed
:sesemi-expanded
:eexpanded :eeextraexpanded :ueultraexpanded
vertical-align va :supsuper :ttop

:tttext-top :mmiddle
:blbaseline :bbottom
:tbtext-bottom :subsub
text-align ta :lleft :ccenter :rright
:jjustify
text-align-last tal :aauto :lleft
:ccenter :rright
text-decoration td :nnone :ooverline
:lline-through :uunderline
text-emphasis te :nnone :acaccent
:dtdot :ccircle :dsdisc
:bbefore :aafter
text-height th :aauto :ffont-size
:ttext-size :mmax-size
text-indent ti :--9999px
text-justify tj :aauto :iinter-word
:iiinter-ideograph :icinterVisual properties
cluster :ddistribute
:kkashida :ttibetan
opacity op :ie :ms
text-outline to+ :nnone
resize rz :nnone :bboth
:hhorizontal :vvertical
text-replace tr :nnone
text-transform tt :nnone :uuppercase
cursor cur :aauto :ddefault
:ccrosshair :hahand
:ccapitalize :llowercase
text-wrap tw :nnormal :nonone
:hehelp :mmove
:uunrestricted :ssuppress
:ppointer :ttext
text-shadow tsh+ :nnone
Print
line-height lh
page-break-before pgbb :aauto
white-space whs :nnormal :ppre
:awalways :lleft :rright
:nwnowrap :pwprepage-break-inside pgbi :aauto :avavoid
wrap :plpre-line
page-break-after pgba :aauto
white-space-collapse whsc :nnormal
:awalways :lleft :rright
:kkeep-all :lloose
orphans orp
:bsbreak-strict
widows wid
:babreak-all
word-break wob :nnormal
:kkeep-all :lloose
:bsbreak-strict
:babreak-all
word-spacing wos
Cheatsheet by Alexander Shabunevich [aether.ru]

Zen Coding

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Zen Coding

Uploaded by

Copyright:

Available Formats

Zen Coding 0.

div#name. . . . . . . . . . . . . . <div id="name"></div>

Document head & Metadata

haml HAML syntax filter

list-style-image lisi :nnone

word-wrap wow :nnormal

vertical-align va :supsuper :ttop

You might also like