Develop Faster with Zen Coding and Sublime Text 2

If you haven’t discovered Sublime Text 2 by now its about time you checked it out. Among all the other brilliant things that Sublime Text 2 does to make you code faster and more efficient, there is a sweet little plugin for Zen Coding that is a must… let me repeat… Zen Coding and Sublime Text is a must. Now that I’ve talked you into it, lets get started.

(Also, if you haven’t installed “Package Control” for Sublime Text yet — do so now… I’ll wait)

What is Zen Coding?

Simply put, Zen Coding is a freaking awesome way to simply your development process. Instead of hand coding out each html element and/or tags, Zen syntax is like a short cut that you can use to write large blocks of code. Essentially, if you use Zen code there is really no use for generic snippets anymore. For example, if you need to write out a navigation ul with 7 li’s, a wrapper div, short paragraph description paragraph and of course links,  you’d normally have to write out and indent everything by hand or use some generic snippet then modify it.

With Zen Coding, to accomplish this, all you would have to do is write this:

1

div#navWrapper>p.navText+ul#navigation>li*7>a

which creates this in Sublime:

1

<div id="navWrapper"></div>

Installing Zen Coding in Sublime Text 2

Installing and enabling Zen Coding in Sublime Text 2 couldn’t be any easier. If you haven’t installed “Package Control“ for Sublime Text 2 then do it right now so we can install ZenCoding — I’ll be patient…

Done yet?….

Okay, now that Package Control is installed…

  • press (on Mac) ‘command’ + ‘shift’ + ‘p’ to open package control
  • in the search box, start typing package (its okay if you misspelled it like me)

 

  • select ‘Package Control: Install Package’ – wait for packages to populate
  • then in the search box, start typing Zen Coding
  • select ‘ZenCoding’ from the list

Aight, now its time to get Zen Coding.

 

Using Zen Coding with Sublime Text 2

Awe, now that you have ZenCoding installed your life is about to get slightly easier and more Zen-like. With a doc open (on Mac) click ‘control’ + ‘option’ + ‘return’ and the little Sublime input box will pop un in the bottom of the screen. Then just start typing your ZenCode away and like magic your code will write itself – kind of. If you can’t think of anything to practice with, try these little pieces:

1

html:5
 
1

link:favicon
 
1

div#name.one.two
 
1

select&gt;option#item-$*3
 
1

div#navWrapper&gt;p.navText+ul#navigation&gt;li*7&gt;a

Play around with it for a minute until you get the hang of it. Then if you want to learn more Zen Coding techniques download this PDF reference chart, print it out and staple it all over you cubicle wall. You’ll be so Zen you might even have to time to take a little nap a work every once in a while.

For more information and a fuller description of the power of Zen Coding, go directly to the Zen Coding project.

About the author

Patrick Cox wrote 98 articles on this blog.

Patrick is a UX Designer and the co-creator of Payba.cc and Aplethora (a two man interwebs design firm). He also enjoys family, snowboarding, sports and sugar free water mix ins and.... this is his blog.

One comment