Skip to main content

Zen Coding – Speedy way to write HTML and CSS code

A typical CSS/HTML code for a page contains lots of redundant codes such as repeating DIV tags, A tags, attributes etc. You can minimize the amount of work by copy pasting most of these stuff, or if your code editor has auto-completion feature, but still you have to do a lot of typing.

Zen Coding is a set of plug-ins for popular code editors that will change the way you code. Zen Coding consists of two core components: an abbreviation expander which allows you to expand expressions similar to CSS-like selectors, and context-independent HTML-pair tag matcher. This allows you to write HTML, XML, XSL and any other structured code format in super high speed.

For example, if you write:

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

… it gets magically expanded into

<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>

Let’s look at another example. Suppose you want to generate three <div> elements with ids i1-test, i2-test and i3-test and item1, item2 and item3 classes. You can write this as:

div#i$-test.item$*5

and this would be transformed into

<div id="i1-test" class="item1"></div>
<div id="i2-test" class="item2"></div>
<div id="i3-test" class="item3"></div>

Zen Coding officially supports a majority of popular coding editors such as

  • Aptana/Eclipse (cross-platform)
  • TextMate (Mac)
  • Coda (Mac)
  • Espresso (Mac)
  • Komodo Edit/IDE (cross-platform)
  • Notepad++ (Windows)
  • PSPad (Windows)

Support through third-party plug-ins are available for

  • Dreamweaver (Windows, Mac)
  • Sublime Text (Windows)
  • UltraEdit (Windows)
  • TopStyle (Windows)
  • GEdit (crossplatform)
  • BBEdit/TextWrangler (Mac)
  • Visual Studio (Windows)
Labels:

Comments

Post a Comment

Popular posts from this blog

How to Schedule Changes to Your Facebook Page Cover Photo

Facebook’s current layout, the so called Timeline, features a prominent, large cover photo that some people are using in a lot of different creative ways. Timeline is also available for Facebook Pages that people can use to promote their website or business or event. Although you can change the cover photo as often as you like, it’s meant to be static – something which you design and leave it for at least a few weeks or months like a redesigned website. However, there are times when you may want to change the cover photo frequently and periodically to match event dates or some special promotion that you are running or plan to run. So, here is how you can do that.
1 comment
Read more

69 alternatives to the default Facebook profile picture

If you have changed the default Facebook profile picture and uploaded your own, it’s fine. But if not, then why not replace that boring picture of the guy with a wisp of hair sticking out of his head with something different and funny?
332 comments
Read more

How to remove watermark from an image or picture

A watermark is any recognizable text, logo or pattern that appears over an image to identify the owner of the image and generally used to prevent unauthorized reuse of the image. Watermarks are usually transparent and can be difficult to remove. The difficulty or ease of removal depends on the content of the image and the position, color, size etc of the watermark.
210 comments
Read more