Skip to content

Instantly share code, notes, and snippets.

@hileon
Forked from palimadra/gist_template
Created March 27, 2012 05:33
Show Gist options
  • Save hileon/2212834 to your computer and use it in GitHub Desktop.
Save hileon/2212834 to your computer and use it in GitHub Desktop.
ZenCoding Cheatsheet

syntax

  • ID and CLASS attributes: div*page.section.main.
  • Custom attributes: div[title], a[title="Hello world" rel], td[colspan=2].
  • Element multiplication: li*5 will output <li> tag five times.
  • Item numbering with $ character: li.item$*3 will output <li> tag three times, replacing $ character with item number.
  • Multiple $ characters in a row are used as '''zero padding''', i.e.: li.item$$$li.item001
  • Abbreviation groups with unlimited nesting: div*page>(div*header>ul*nav>li*4>a)+(div*page>(h1>span)+p*2)+div*footer. You can literally write a full document markup with just a single line. *Filters support div tag name can be omitted when writing element starting from ID or CLASS: *content>.section is the same as div*content>div.section.
  • (v0.7) Text support: p>{Click }+a{here}+{ to continue}.

sublime text 2 plugin

  • Ctrl+Alt+Enter to enter zencoding mode

reference

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment