Below is a list of Zen Coding short codes that you can use in your Morph powered site's content. These will not only rapidly increase the time it takes you to markup advanced layouts in your content, but also ensure that your content is well structured, clean and semantic.

Headings

h1

Headings. h1 to h6 can be used.

h1>span

Headings. h1 to h6 with alt color.

h1+p

Heading with paragraph directly after.

Equal split grids

div.yui-g>div.yui-u*2

Two column equal split grid.

div.yui-g>div.yui-u*3

Three column equal split grid.

div.yui-g>div.yui-u*4

Four column equal split grid.

div.yui-g>div.yui-u*5

Five column equal split grid.

div.yui-g>div.yui-u*6

Six column equal split grid.

Ratio grids

div.grid.yui-gc>div.yui-u*2

Two column grid with a 66%/33% ratio.

div.grid.yui-gd>div.yui-u*2

Two column grid with a 33%/66% ratio.

div.grid.yui-ge>div.yui-u*2

Two column grid with a 75%/25% ratio.

div.grid.yui-gf>div.yui-u*2

Two column grid with a 25%/75% ratio.

Grids with content placeholders

div.yui-g>div.yui-u*2>h3+p

Example of a equal split grid with a h3 heading and paragraph in each.

div.grid.yui-gc>div.yui-u*2>h3+p

Example of a ratio grid with a h3 heading and paragraph in each.

Basic lists

ul+

This outputs a basic unordered list, with a single list item.

ul>li*5

This will give you a basic unordered list with five list items.

ul.none>li*3

This is an undordered list with a class of "none" and three list items.

ul.circle>li*5

This is an undordered list with a class of "circle" and five list items.

ul.square>li*10

This is an undordered list with a class of "square" and ten list items.

ol>li*5

This will give you a basic ordered list with five list items.

ol.decimal-leading-zero>li*5

This is an ordered list with a class of "decimal-leading-zero" and five list items.

ol.lower-roman>li*5

This is an ordered list with a class of "lower-roman" and five list items.

ol.upper-roman>li*5

This is an ordered list with a class of "upper-roman" and five list items.

ol.upper-alpha>li*5

This is an ordered list with a class of "upper-alpha" and five list items.

Styled lists

ul.bullet.style1>li*5

This is an example of a styled list, with the classes "bullet" and "style1" set.

ul.compound>li*4>h3+p

This outputs a compound list, which is essnentially an unordered list with a heading and paragraph in each.

Definition lists

dl+

This outputs a basic definition list, with a single list item.

dl>dt*5+dd*5

This outputs a definition list with five definition terms and descriptions.

dl.listHorizontal>dt*5+dd*5

This outputs a definition list with a class of "listHorizontal" and five definition terms and descriptions.

dl.listVertical>dt*5+dd*5

This outputs a definition list with a class of "listVertical" and five definition terms and descriptions.

dl.listVertical.zebra>dt*5+dd*5

This outputs a definition list with a class of "listVertical zebra" and five definition terms and descriptions.

dl.listFlat.dt10>dt*5+dd*5

This outputs a definition list with a class of "floatFloat" and five definition terms and descriptions.

Quotes

blockquote>p

Outputs a standard blockquote with a paragraph.

blockquote.quote>p

Outputs a blockquote with "quote" class and paragraph.

blockquote.quote>p+p.last>cite.author

Outputs a blockquote with "quote" class, paragraph placeholder and author.

blockquote.pullquote>p

Outputs a blockquote with "pullquote" class and paragraph.

Code

code>pre

This outputs a code and pre tag.

code.xhtml>pre

This outputs a code and pre tag with a class of "xhtml".

code.css>pre

This outputs a code and pre tag with a class of "css".

code.php>pre

This outputs a code and pre tag with a class of "php".

code.js>pre

This outputs a code and pre tag with a class of "js".

Horizontal rules

hr

This outputs a basic horizontal rule.

hr.dotted

This outputs a basic horizontal rule with the class "dotted".

hr.dashed

This outputs a basic horizontal rule with the class "dashed".

hr.cut

This outputs a basic horizontal rule with the class "cut".

Notices

p.alert

This outputs a paragraph with a class of "alert".

p.notice

This outputs a paragraph with a class of "notice".

p.info

This outputs a paragraph with a class of "info".

p.download

This outputs a paragraph with a class of "download".

p.help

This outputs a paragraph with a class of "help".

p.error

This outputs a paragraph with a class of "error".

p.buy

This outputs a paragraph with a class of "buy".

Tables

table+

This outputs a basic table with a single row and table data.

cap

This outputs a table caption.

thead

This outputs a table head.

tbody

This outputs a table body.

tr

This outputs a table row.

tr+

This outputs a table row and table data.

th

This outputs a table header column.

td

This outputs a table data column.

thead>tr>th*5

This outputs a table header block with five columns.

tbody>tr>td*5

This outputs a table body block with five columns.

tfoot>tr>td*5

This outputs a table footer block with five columns.

Images

img

This outputs a basic image.

img.img-left

This outputs a basic image with the class "img-left".

img.img-right

This outputs a basic image with the class "img-right".

img.img-left.caption

This outputs a basic image with the class "img-left" and "caption".

img.img-left.img-border.style1

This outputs a basic image with the class "img-left", "img-border" and "style1".

Inline elements

a

Outputs a basic link.

a:link

Outputs a basic link with the href pre-populated with http://.

a:mail

Outputs a mailto link.

q

Outputs an inline quote.

cite

Outputs a cite, which used to indicate a quote author.

em

Outputs emphasized (italic) text.

str

Outputs strong (bold) text.

small

Outputs small text.

dfn

Outputs an inline definition.

abbr

Indicates an abbreviation.

sup

Adds a sup.

sub

Adds a sub.

ins

Indicates inserted text.

del

Indicates deleted text.

Additional info

We are sure that once you get the hang of using these shortcodes it will dramatically reduce the time it takes to create sexy page layouts using Morph's built in Typography.

Supported apps:

These applications which have full Zen Coding support built-in:

• Espresso
• Coda
• Aptana

Partial support:

These applications only have partial Zen Coding support built-in:

• TextMate
• Topstyle
• Sublime Text
• GEdit
• editArea

Further reading:

Want to know more about Zen Coding? We thought you might ;) The Smashing Mag post is a really comprehensive introduction to everything you need to know about Zen Coding and the second is a link to the actual Zen Coding project on Google Code.

• Smashing Magazine Write-up
• Zen Coding project on Google Code