How clean is this mustache template for a listing page?

Question

This was our old site that I am redesigning.

Someone else hardcoded with inline CSS and javascript in tables.

I wanted to make it dynamic, so I added Mustache and made this template:

{{#labs}}
  <div class="lab">
    <h4>{{{lab}}}</h4>
    <p>
      {{#stadt}}
        <span><i class="fa fa-building-o"></i></span><span>{{{stadt}}}</span>
        <br />
      {{/stadt}}

      {{#telefon}}
        <span><i class="fa fa-phone"></i></span><span>{{{telefon}}}</span>
        <br />
      {{/telefon}}

      {{#webseite}}
        <span><i class="fa fa-desktop"></i></span>
        <span>
          <a href="http://{{{webseite}}}" target="_blank">{{{webseite}}}</a>
        </span>
      {{/webseite}}
    </p>
  </div>
{{/labs}}

Here is some of the JSON file:

{ "labs" : [
{ 
    "lab":"Rißmann Zahntechnik GmbH",
    "stadt":"D-06917 Jessen",
    "telefon":"+49 (0) 3537 21 38 61",
    "webseite":"www.rissmann-zahntechnik.de"
  },

Would it make a big enough difference to not have the full word as the name? So maybe like "l" instead of "lab" and "w" instead of "webseite", etc.

Here is the result of the listings:

The even spacing between the icon and the values was achieved by this CSS rule:

.lab i { width: 27px; }

Also, does it make sense to have it in a single <p> tag, or should I consider placing each value in its own <div>?

Answer 1

By using excessive markup for presentational purposes, the template is the exact opposite of clean.

<span><i class="fa fa-phone"></i></span><span>{{{telefon}}}</span><br />

vs.

<span class="fa fa-phone">{{{telefon}}}</span>
<!-- span set to `display: block` with a `:before` pseudo element to contain the icon -->

If you're not able to do this because of a library you're depending on, my recommendation is to find a better library.

By moving away from tables, you've committed a sin that's just as bad as using tables for layout: you're using non-tabular markup for tabular data. It is understandable that you don't want it to look like a table (either for aesthetic or responsive reasons), but tables don't have to look like tables any more than a list has to look like a list.

Go back to using tables and make adjustments to your CSS instead:

http://jsfiddle.net/SGK8Q/

What the markup should end up looking similar to this:

<table>
    <thead>
        <tr>
            <th>Lab</th>
            <th>Contact</th>
            <th>Phone</th>
            <th>Website</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td class="name">ABC</td>
            <td class="contact">Johnny</td>
            <td class="phone">555-1234</td>
            <td class="url">http://abc.example.com/</td>
        </tr>

        <tr>
            <td class="name">DEF</td>
            <td class="contact">Billy</td>
            <td class="phone">555-1234</td>
            <td class="url">http://def.example.com/</td>
        </tr>

        <tr>
            <td class="name">GHI</td>
            <td class="contact">Dave</td>
            <td class="phone">555-1234</td>
            <td class="url">http://abc.example.com/</td>
        </tr>
    </tbody>
</table>

The CSS:

table, tbody, tr, td, th {
    display: block;
}

thead {
    display: none;
}

/* everything past here is optional */
tr + tr {
    margin-top: 1em;
}

.name {
    font-size: 1.2em;
    font-weight: bold;
}

.url {
    color: blue;
    text-decoration: underline;
}

Answer 2

As megawac said, do not give up readability for a few bytes.

Your template looks heavy because you deal with missing data thru {{#xx}} and because those icons take up space. I am not a big fan of logic in templates, but in this particular case you made the right call.

I think one paragraph tag is better than many, so I would keep it that way.

Still, I wonder if you can replace <span><i class="fa fa-building-o"></i></span> with <i class="fa fa-building-o"></i>, I can't tell why you need the extra enclosing span.

Finally, I think you should indent your stadt and telelephon blocks over a few lines like you did for#webseite, it becomes more readable for me.