David Leggett (TheLeggett)

CSSsitemap System

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

Code example:

<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 <a href="linktothisitem">#</a></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>

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 :)

Leave a Reply

Comments

This is a great tool that you have provided. I’m not too concerned about the lack of IE support since it is used by our web development team that uses IE only for testing purposes. Thanks for your contribution to the community.

i am trying to install sitemap plugin in my blog, but is it need a css file for this plugin? i hope you can help me. my algorithm program so bad.. :)

Hey Friiitz,

It’s made for webkit browsers. We may eventually build out a set of tools for other browsers, but nothing is planned at this time. I’m actually surprised to hear that it works well in Fx!

Actually Mervin, this is built to work without any javascript :)

There seems to be a bug with webkit browsers and the new(ish) flex box model. If all of your labels/titles in the sitemap system don’t contain spaces, app.js isn’t needed. For some reason, the introduction of space characters introduces rendering bugs when the size of the sitemap gets past a certain width.

Give webkit another year and I think the flex box model will have a few of its kinks worked out!

I thought that it is a css only trick initially but I see app.js in download zip. Probably there are no nice css example without js pixie dust these days!

Just my 2 cents. I do not think this will work very well for sites having a huge span for navigation. WordPress sites are a good example.

Perhaps the expanding section could have a higher z-index to avoid the jerky move-down action?..

Sorry, I now appreciate it would be daft to have a 300 page site with only 3 or 4 levels displayed within a 1000px width window! Scratch that. I’ll add this to my quiver

Thanks Jordan, Dozza.

Dozza, definitely can make the layout fluid with a few tweaks, but it only works well to a certain point. One of the things that’s great about this system is that it will work for a 10 page site, or 500 page site. At larger numbers of pages, fluid layout that is limited to the initial viewport just isn’t enough to have the text be legible.

That’s not to say it would be impossible to build a more robust solution, but this system will remain pretty lightweight if possible. I’d love to see (or eventually develop) a system with more advanced viewer navigation controls that allows for smooth zooming/panning. Have a feeling such a solution will make use of technology like svg.

Good stuff! I’ve been using Slickmap CSS for my sitemapping, but I think I’m going to try this out – looks a little bit more hierarchy friendly.

Hey Joe,

Andrew has also mentioned the idea of including those patterns into this system for fleshing out user flows. I think it’s an awesome idea :) Notes would also be great to have (and easily implemented with a few changes).

The biggest problem with integrating more complex flowchart patterns into the system would be laying out the diagrams automatically. Currently, the map moves left to right, top to bottom very systematically. When additional flowchart features are implemented, additional directions would also have to be considered. I wouldn’t say it’s impossible, but in order to keep the sitemap as simple as possible for the creator to build, I would want to handle the directional pieces of the diagram using a clever algorithm (rather than the designer manually placing the pieces with classes or position styles). At this point, it’s not planned but it’s definitely an outstanding goal.

Just confirming cross-browser support as is:

- Windows XP + Mozilla Firefox 4.0.1 = Working 100%.
- Windows XP + Google Chrome 11.0.696 = Working 100%.
- Windows XP + Opera 11.10 = Broken layout without fallback.
- Windows XP + Internet Explorer 8.0 = Broken layout without fallback.
- Windows XP + Internet Explorer 7 (via compatibility mode on IE8) = Broken layout without fallback.
- Windows 7 + Internet Explorer 9 = ??? :(

I don’t have IE9 on my PC but I guess that it should work since Internet Explorer 9 does support CSS3.

Really interesting this. I like the layout style – it’s really easy to read

Any plans for supporting the Garrett IA patterns?

Would also be nice to add notes to each of the pages too (as well as the link)

Very interesting! I’m gonna be working on a medium-sized project this summer and this is definitely something I’ll look into and see if I can adapt it for my needs! Thank you David!

This is great. I was looking for something just like this the other day. This could make doing a site audit really fast. Rather than building everything out in illustrator, just code out a list and edit the CSS to match a brand/client’s colors. Sweet. The perfect solution would be the ability to pull in a Google Sitemap and style it with this. That would even take the step of coding out of the picture. Thanks!

Hey Ian, thanks!

This takes advantage of the new display: box; attribute, and was specifically built for webkit browsers only. It could definitely be made to work in mozilla, I just haven’t spent any time working on that (very unlikely that it works in -moz 100% as is, I probably need to make a few tweaks).

We want to do some neat things with this in the future, including building a CMS into it (along with other similar systems) that will allow people to create beautiful documentation with ease. Right now, we’re just using it for documentation on projects, and since Andrew and I both are running webkit browsers, that’s where it’s at right now, heheh.

If someone wanted to make a solid build of this for Mozilla/Opera/IE, I’d be happy to share the updated version here :) otherwise it will have to wait until a future date.

(One other quick note: I’m using display: box; for a few reasons, but display: table-row; also get’s the job done… while dropping a few benefits of box. Might be necessary to use table-row for IE builds. Either that, or some fancy javascript.)

Thanks Daniel :)

I originally started work on the system for my own personal use, but Andrew Maier and I are using it in at least one of our collaborative client projects at the moment.

This client has a very big website (while it is heavily trafficked, I mean this in a literal sense that there are many unique types of pages). Part of our job is to make sure that the entire site makes sense, and is usable. Being completely new to the site ourselves, we had to spend a lot of time learning about hundreds of different pages. In a way, this sitemap system is our documentation for all of those pages.

We now have an easy to share HTML page that illustrates visually different levels of content, groups of pages, and a system that also allows us to hop to any one of 300ish types of pages on the site. It’s a lot easier for us to hop directly to a specific page from the sitemap than try to search around the site everytime we want to take a look at a certain type of page (often times being 5+ levels deep, and not always where you would expect to look.

This is intensely cool. On non-webkit are there fallbacks, or does it just break?

I foresee an awesome wordpress plugin. :)