As a part of the “Discovery Phase” for some projects, creating a sitemap can be a useful tool for visualizing how different pages relate to one another. Some software exists to take care of the task (ie: Omnigraffle), but I was interested in building my own cross-platform solution.

Using CSS, I’ve built a super easy to use system with very simple syntax. In fact, the entire system is based on unordered lists. No classes required, just a list.

Here’s a sample of the code, and a preview of how it renders:

<ul>
  <li><span>Fruit</span>
    <ul>
      <li><span>Apples</span></li>
      <li><span>Oranges</span></li>
      <li><span>Watermelons</span></li>
    </ul>
  </li><!-- Fruit -->
 
  <li><span>Vegetables</span>
    <ul>
      <li><span>Leaf Vegetables</span>
        <ul>
          <li><span>Arugula</span></li>
          <li><span>Cabbage</span></li>
          <li><span>Lettuce</span></li>
          <li><span>Spinach</span></li>
        </ul>
      </li><!-- Leaf Vegetables -->
 
      <li><span>Root Vegetables</span>
      	<ul>
          <li><span>Beets</span></li>
          <li><span>Carrots</span></li>
        </ul>
      </li><!-- Root Vegetables -->
    </ul>
  </li><!-- Vegetables -->
</ul>

Currently, I’m only supporting webkit based browsers. Since this is primarily for internal use at the moment, there are some bugs that need squashing before I’m ready to release this to the public. I’ll post an update when the system is available for download.