Do you use any tools for rapid html/css development?

Question

I just heard about zen-coding, which basically is just a script that generates markup based on a css-esque selector, ex:

div#foo > p*6

generates

<div id="foo">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

Edit: Here's a more advanced example..

And PS - I'm not even going through any API, I'm totally guessing based on my CSS selector knowledge, this is very easy and intuitive for me.

ul#nav > li[id] * 6 > a

Generates

<ul id="nav">
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
</ul>

when you hit a shortcut such as Ctrl-E. Very very useful if you do a lot of front end development. I had the idea of the exact opposite, a CSS selector generator which basically parses markup and generates selectors so one can go in a tool such as Firebug and rapidly see live changes on the dot, I just never bothered to actually finish the script I had started.

It's currently supported in TextMate, Dreamweaver, Aptana, NetBeans, unfortunately not vim/emacs however there is a fork named sparkup which works on vim ( I use that now ).

I'm wondering if anyone has come across such plugins or tools in the past - I'm aware that there are snippet scripts in Vim/Textmate/Emacs and other powerful editors, just curious of what else is out there in the wild.

Answer 1

The Blueprint CSS framework has a Rapid HTML/CSS Development-like tagline:

Spend your time innovating, not replicating.

Answer 2

Hm. I write a lot of HTML and CSS every day and I am not excited. The paragraph you mention I write in five seconds, and six times Ctrl+C and Ctrl+V. Granted, there may be scenarios when a meta language will save more time but I have never felt the need for one. When there are really massive amounts of HTML - or SQL, or arrays - to produce, I will write a small PHP or VB script for the task. I wouldn't want another meta-language to produce something in another language.

Maybe useful for others but not for me.

If discussion about the general usefulness was what you were looking for. Reading your post a second time, I'm not that sure any more. Anyway. :)

Answer 3

I think it's a cool idea, and could be useful, but I don't think it'll become too popular.

However, feel free to prove me wrong!

Answer 4

If you are developing rails, check out Sass and Haml

Sass can do use variables and do basic math:

// Sass

!blue = #3bbfce
!margin = 16px

.content_navigation
  border-color = !blue
  color = !blue - #111

.border
  padding = !margin / 2
  margin = !margin / 2
  border-color = !blue

renders:

/* CSS */

.content_navigation {
  border-color: #3bbfce;
  color: #2aaebd;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Haml uses indentation instead of divs and matches the css # and . system for labeling classes and divs:

#profile
  .left.column
    #date= print_date
    #address= current_user.address
  .right.column
    #email= current_user.email
    #bio= current_user.bio

renders to:

<div id="profile">
  <div class="left column">
    <div id="date"><%= print_date %></div>
    <div id="address"><%= current_user.address %></div>
  </div>
  <div class="right column">
    <div id="email"><%= current_user.email %></div>
    <div id="bio"><%= current_user.bio %></div>
  </div>
</div>

Answer 5

I'm really amazed that you guys are having this conversation.

I've been doing Web Development for 4 years and I can not remember the last time that I've had to write something like

<li>some text</li>

more then once in single instance.

The most html that I would write in any given point is something like

<ul>
<?php foreach ( $menu as $item ) : ?>
 <li><?php echo $item->title ?></li>
<?php endforeach; ?>
</ul>

Needless to say, I really don't see the point in learning a tool to speed up writing of stastic HTML. It's like getting a bigger shovel, you're only going to dig yourself into a bigger whole.

I think you should be asking yourself, how can I eliminate the amount of static html that I generate?

The answer to that question is to use CMSs like Joomla, Drupal or Wordpress. If you absolutely have to write static html sites, then look at something like Sphinx.

Sphinx completely eliminates the need to write HTML and it allows you to create static sites with multiple pages without ever writing a single hard coded html link.

Sphinx uses reStructuredText markup. I will show you how you would generate your code in reStructuredText.

- `Joomla`_
- `Drupal`_
- `Wordpres`_
- `Sphinx`_
_ :doc:`Some intermal Page <internal/file>`

.. _Joomla: http://joomla.org
.. _Drupal: http://drupal.org
.. _Wordpress: http://wordpress.org
.. _Sphinx: http://sphinx.pocoo.org/

I tried to show how this would work with reStructuredText, the example that you have doesn't exactly make sense in Sphinx context because you would never create a tags without providing links to them. But you get an idea I hope.