April 15, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Zen Coding and the Art of Rapid HTML Authoring, Page 2

  • June 1, 2010
  • By Jason Gilmore
  • Send Email »
  • More Articles »

Adding CSS IDs and Classes

As was demonstrated in the initial example, you can assign CSS IDs and classes when generating HTML by postfixing the element with a hashmark (#) or period (.) followed by the ID or class name, respectively. For instance, the following snippet will assign an ID of navigation to the ul element, and a class name of item to each list item:

ul#navigation>li.item*3


Expanding this snippet produces the following output:

<ul id="navigation"> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul>


Using Filters

Zen Coding isn't limited to mere HTML expansion. In fact, thanks to filters you're able to perform all sorts of interesting post-processing tasks such as converting HTML into its corresponding HTML entities (which I've done throughout this article to render the HTML tags) by appending the |e filter to the end of your Zen Coding syntax. Consider the following example:

ul>li*3|e


Executing this example will produce the following output:

&lt;ul&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;/ul&gt;


Numerous other filters are available, including those that support Haml conversion, the addition of HTML comments, CSS abbreviation expansion, and others.

Conclusion

Like jQuery and Blueprint, Zen Coding is one of those rare tools that offers web developers an immediate productivity boost. In just a few short weeks it has already become an indispensable part of my toolbox. What other developer tools do you use to boost your productivity? Tell us about them in the comments!

About the Author

Jason Gilmore is the founder of EasyPHPWebsites.com. He also is the author of several popular books, including "Easy PHP Websites with the Zend Framework", "Easy PayPal with PHP", and "Beginning PHP and MySQL, Third Edition".





Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel