Zen coding is one of the new cool kid presently, if you haven’t heard of it I would suggest your read this article from smashing magazine or look at this video presentation.

Basically it enables you to create HTML from CSS snippet. It might not sound powerful at first, but when you start playing with, some wonderful things happen in your head (with no drugs). Let’s look at a simple example, let’s say you want a header with an id and a class followed by a list element. Here what you would do with zen:

div#header.home>ul>li*3

You do Apple-E (CTRL-E in win) and you get:

  <div id="header" class="home">
  	<ul>
  		<li></li>
  		<li></li>
  		<li></li>
  	</ul>
  </div>

There is much more about Zen, but this is the basic idea. Personally it replaced my basic HTML and CSS bundle. Now if you are on Windows, you are a bit out of luck, beside some IDE Zen is not available, however there is a Textmate bundle for it. Introducing you to E Text-editor, a port from Textmate on Windows. E is a pretty amazing text editor, and if you know nothing about bundle and textmate, I would suggest do a bit of research with Google. You can also get a free trial on the website.

A small problem with Zen, there is “illegal” characters in the HTML bundle, something Windows really doesn’t like. I however successfully extracted the bundle with 7zip, it’s not going to work with you basic winrar or winzip.

Cool, you got all your bundles now, you could put them in the bundle E folder, but this is not recommended, as reinstalling E will cause an erase of your bundles, it is better to put them in the application directory, usually something like “C:\Documents and Settings\[username]\Application Data\e”

Last thing! One problem you might get is that there is no self closing XHTML “/” with your tag, this is a variable you need to put in your settings -> Environnment : TM_XHTML /

Have fun and be Zen!

Share this article: Facebook Twitter

6 thoughts on “Zen HTML and CSS coding, and how to install it on Windows with E Text-Editor”

  1. This isn’t as cool as it looks … also most IDE’s like Aptana Studio, has very well written auto complete features, that makes this just needless and pointless.

    The syntax is interesting, but nevertheless it has to be learned and mastered before it could help me .. or anyone else to.

  2. Hey Martin,

    Well I suppose this isn’t for everyone, I personally use E because of the textmate bundle that I find very powerful, the syntax highlighting and well because it is very light.

    That said, I do a lot of HTML templating and this really improved my speed, even if you do not use the complete functionality, doing div#header.clearfix is a faster way of working, for me anyway.

  3. Zen looks awesome to someone who’s worked with CSS for years, it makes complete sense.. It’s annoying that it isn’t available for Visual Studio already!!

    Dreamweaver/Vis Studio have great autocomplete features.. I particularly like how in VS if you copy/paste from say it will duplicate the empty tag and put in all the white space for you..

    To me it looks useful for those times where you are creating content pages at speed from say a word document where you need to bang out sentences, lists, tables of data etc.. at speed.. I currently flesh out the complete structure of a content page and then copy and paste each paragraph or whatever in between the tags.. This would mean I could code content and paste at the same time..

    Bring it on.. Someone make a Visual studio config file or something!!

Comments are closed.