zen coding overview
TRANSCRIPT
ZEN CODING
Get markup done faster.
Friday, March 11, 2011
WHAT IS ZEN CODING?Zen coding is essentially an abbreviation engine and a set of cross-platform plugins for writing HTML faster. Code is written in CSS
selector like syntax and expanded on-the-fly into full-blown HTML.
Zen Code
...becomes...
HTML!
( just by pressing ⌘+ E )
(The Zen Coding engine was invented by awesome random Russian guy Sergey Chikuyonok! and grows thanks to the open-source community.)
Friday, March 11, 2011
Most all IDE’sand editors havea Zen Coding
plugin nowadays.
DOES IT WORK WITH...?
Check the Zen Codingwiki for your editor’s
keyboard shortcuts and instructions.
Friday, March 11, 2011
HOW’S IT WORK?
The quickest way to understand it is to open an editor, type in some Zen Coding snippets or
“abbreviations", and expand them via your editor’s designated shortcut key.
Let’s open up a text editor and try out some live examples...
Zen coding works via a plugin for your text editor triggered with a shortcut key after you type in a Zen Code snippet. It parses the CSS-
like syntax and returns structured HTML.
Friday, March 11, 2011
EXAMPLESSome examples of Zen Coding’s sexiness:
Use an asterisk to “multiply” the element
li*3 →<li></li><li></li><li></li>
Use adjacent selectorsyntax for adjacent sibling tags div>h1.title+h2.sub
<div> <h1 class=”title”></h1> <h2 class=”sub”></h2></div>
→
Use attribute syntaxfor href, src, alt tags, titles, etc
img[src="http://i.imgur.com/G1A50.jpg"][alt="chzburger kitteh"] →
Use the dollar sign to count andappend like 1,2,3,4. to
classnames, etc.select>option#item-$*3
<select> <option id="item-1"></option> <option id="item-2"></option> <option id="item-3"></option></select>
→
Friday, March 11, 2011
FROM DOCTYPE TO DONEYou can use a snippet to get an HTML skeleton for whatever
doctype you need with a few keystrokes:
XHTML 1.0 Transitional:
Scaffolds the entire page for you, hit tab to jump to
<title>, enter a page name, then tab to <body>
and go!
html:xt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <title></title> <meta http-equiv="Content-Type" content="text/html”/></head><body>
</body></html>
↓↓↓
Other doctypes...XHTML Strict, HTML4 Trans,
HTML4 Strict,,and HTML5
html:xs, html:4t, html:4s, html:5
Friday, March 11, 2011
...or you can type your own doctype and do it yourself one at a time like this. Each time you hit tab you can type in your text, tab
again, and move on:
FROM DOCTYPE TO DONE
html → <html></html>
head → <head></head>
title → <title></title>
1)
2)
3)
link:css → <link rel="stylesheet" type="text/css" href="style.css" media="all">4)
script:src → <script type="text/javascript" src=""></script>5)
body → <body></body>6)
. . . and from there you can use zen coding syntax to build the rest.
Friday, March 11, 2011
TRY IT FOR YOURSELFYou can learn by doing without committing to another plugin just
yet by trying out the online version:
http://secretgeek.net/zen/coding.htm
When you’re ready to get started, go here:
http://code.google.com/p/zen-coding/
Friday, March 11, 2011