Since the initial work on CSSsitemap, Andrew Maier and I have been pretty busy working on an array of other tools that are a bit specific to a project we’re collaborating on presently. The result: almost no time has been invested in CSSsitemap since the first in-house version.
Rather than make an empty promise about how we’re going to build some cool features into it eventually, I’m just going to share the code now (it’s awfully simple at this point). Yes, we’re still working on a pretty cool set of tools for project documentation & UX designers, but it’s still sort of up in the air in regards to when and how we’ll share that system with the world.
Download: CSSsitemap System (.zip, 13.3 KB) | Demo
</li><!-- Fruit -->
<li><span>Leaf Vegetables <a href="linktothisitem">#</a></span>
</li><!-- Leaf Vegetables -->
</li><!-- Root Vegetables -->
</li><!-- Vegetables -->
The system is intended for documenting pages in a website in a visual and functional way. It’s very straight forward: pages are presented in a branched format using unordered lists. URL information can be added to any item in the tree for quickly navigating complex sites.
This system was built for webkit browsers, and will probably not work as-is anywhere else at the moment. We recently used it in part of a documentation process for a 300-page website where it has helped tremendously (a preview of which is shown below, intentionally obfuscated).
To be clear, this isn’t a sitemaps to be used on websites to aid people in their navigation or for SEO purposes. This system is for internal use at the moment, which allows us to visualize the depth of a site, section content appropriately, and create useful flowcharts. Someday, we hope to integrate more powerful functionality directly into this system such as illustrating user flows with color coded paths, and methods for organizing and filtering parts of the sitemap in realtime.
Feel free to use however you’d like. If you do anything cool with it, be sure to let me know :)