Zen coding, write HTML and CSS faster

Last modified by mediacrea on Fri, November 19, 2010 18:15
Source|Old Revisions  |  Back To Group

This is an old revision of the document!


You just add a line :

 div#page>div.logo+ul#navigation>li*5>a

and expand it with a shortcut key :

 <div id="page">
      <div class="logo"></div>
      <ul id="navigation">
              <li><a href=""></a></li>
              <li><a href=""></a></li>
              <li><a href=""></a></li>
              <li><a href=""></a></li>
              <li><a href=""></a></li>
      </ul>
 </div>

So you have a “css like” structure.

Zen coding support officialy some major editor :

  • aptana/eclipse/zend/
  • textmate
  • espresso
  • komodo edit
  • notepad++
  • Pspad

and some third party :

  • Dreamweaver (Windows, Mac)
  • Sublime Text (Windows)
  • UltraEdit (Windows)
  • TopStyle (Windows)
  • GEdit (crossplatform) — Franck Marcia’s plugin, Mike Crittenden’s plugin
  • BBEdit/TextWrangler (Mac) — external download
  • Visual Studio (Windows) — external download
  • EmEditor (Windows) — external download
  • Sakura Editor (Windows) — external download
  • NetBeans (crossplatform)
  • ntelliJ IDEA/WebStorm/PHPStorm (crossplatform)
  • Emacs (crossplatform)
  • Vim (crossplatform)
  • ReSharper plugin for Visual Studio

You can find more information about zen coding :

http://code.google.com/p/zen-coding/




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs