Home

"Coding Like A Zen Master"

If you’ve ever spent any time at all designing websites, you’ll find, in a few minutes, plugging in HTML and CSS tags can be a chore. Many IDEs and text editors (such as BBEdit and Dreamweaver) have done what they can to help by offering auto-complete features and keyboard shortcuts, but this minimally reduces your typing burden.

But alas! Zen Coding has come to (somewhat) cut out the mundane act of typing (as much).  It’s a powerful abbreviation engine that expands CSS selector-like expressions into HTML code.
For example, assume you need a div with an ID of “content”.  This div contains 3 paragraph tags.  All you would have to type would be:

div#content>p*3

And voila!  You get:


<div id=”content”>

 <p></p>

 <p></p>

 <p></p>

</div>


Is that amazing or what?  OK, want to try something a little more adventurous? Try something like this:

div#page>p.top+ul#nav>li*5>a

and you’ll get something like:


<div id=“page”>

 <p class=“top”></p>

  <ul id=“nav”>

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


Can you imagine how quick one could put an HTML page together this way? A quick download and install of an extension from the Zen Coding website and you’re on your way!

Now, I can tell you, most people will just stick with their slow, out-dated way of doing HTML/CSS, not even knowing there’s a quick and simple way to spit HTML code out left and right.  But, as for me, I’ll be one that will master the ways of Zen coding. Now, if you’ll excuse me… I have to go print out my cheat sheets.

"960px Grid Tutorial"

It’s pretty useful yet easy to figure out how to use.  But most of all it eliminates you having to bring up calculator, pen and/or paper to figure out how your columns are going to be set up  

The template has guide for a three column 20px gutter design. They then have layers of light blocked out colors to help establish both column for using the rule of thirds, and additionally it is broken down into six columns of 20px gutters. You can now flesh out your design on top of the shades thus helping you keep a consistent grid and make placement of elements easier.