Saturday, February 9, 2013

HTML productivity booster: zen-coding

Over the last week I've written an API for my business and needed to created some documentation for it. Using Twitter bootrap, some of it looks like this:

Which looks like this in HTML:
Startdate of the subscription
Enddate of the subscription ( nullable )
Type ID of the subscription
Subscription type. Typically 'Business' or 'Compleet'
The Business Compleet User ID
Profile initials
Which is formatted by Twitter Bootstrap. What I did was copy-paste a bunch of
and filled those out. What I should have done was get a zen-coding plugin for my environment ( NetBeans at the time, but it's also available for Visual Studio and Sublime text ) and use that. Zen-coding allows you to quickly generate HTML in your favorite IDE. With the plugin installed in Sublime, I type:
Hit TAB and it results in:
BOOM! Done.

So you start out by defining you element type ('dl' in my case). The '.horizonal' sets the class very intuitively ( for id - use '#' ... obviously ). The '>' denotes the child elements. The I want a 'dt' with a 'dd' sibling - hence the '+', and that 5 times.

1 comment:

  1. This comment has been removed by a blog administrator.