Zen coding – fast html and css

Zen coding is a sort of a shortcut library for writing html and css, so when you write your code it is faster and more efficient. In addition it help with writing errors like closing tags and so on.

Zen is full with those shortcuts and i do not intend to go over all of them (i do not even remember all), i will only go through what seem to me to be the most common or useful. At the end of this i will add  PDF file that you can download, it contains all you need to know about the shortcuts.

creating an html 5 page : html:5

linking an external CSS file : link:css

linking an external javascript file: script:src

link: a:link

image tag: img

We are not talking just about html elements. If for example in our css file we want that the font will be bold: fw:b

It is that simple and great, and its not all

we can nest elements in a sibling relation: div#one+div#two

this short line will produce two divs with the appropriate ids.

we can create a parant-child relations: div#three>div#four

this will create a div with id three and a nested div with an id of four.

we can also designate a number for creating a certain element several times: ul#menu>li.menu-item*5

this will create a list with five list items.

for a final and more complex example, lets create a form (this is just F***** amazing): form:post>fieldset>legend+input:email+textarea+input:submit

With just a short line we create a simple form. Obviously this is just a simple example but you can see how fast and efficient this is.

Zen Coding CheatSheet

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.