Design Pattern: Index

Index is a very general class of list. You'll most often see it containing blurbs, or as the content in a listbox, but it isn't restricted to those. Index has very few rules; it's a flexible grouping class; it doesn't have its own css sheet.

The present index style is declared in types-groups.css. Index is the most used example of the polyvalent "types or states of groups"

Index HTML Structure

Rules

An index can be any kind of list. So an index could be:

You can never have any other kind of index.

dl.index

dl.index has some extra rules, which are new, so they might change a lot as we work them out. We use dl.index wherever we have paired (property:value) data, like a list of usernames paired with the fic they wrote, or a list of languages paired with the number of works in each language. dl.index shows up inside forms sometimes, so the present style has a lot of zeroed-out values. Sometimes, dl.index can function as the briefest "blurb" pattern, like in the following example from archiveofourown.org/users/.../works/show_multiple

dl index XHTML Diagram (example)

  1. <dl class="index">
    1. <dt>
      1. <a href="../">Title </a>
      </dt>
    2. <dd>
      1. <span class="fandom">(
        1. <a href="../">Fandom </a>
        )</span>
      2. <ul class="actions" role="menu">
        1. <li>
          1. <a href="../">Deletet</a>
          </li>
        2. <li>
          1. <a href="../">Edit</a>
          </li>
        3. <li>
          1. <a href="../" role="button">Orphan</a>
          </li>
        </ul>
      </dd>
    </dl>

The big mystery of the missing classes

If you've been following the front end design closely, you may have noticed that, logically, and following the Coding Standards, the index classes ought to show what is contained within the group, and that the blurb pattern often has those classes. You're absolutely right; a lot of the codebase is wrong! It should logically go:

<ul class="collection blurb index group">
  <li class="own group">...</li>
   <li class="group">...

But we're stuck with it, really. This is the whiteknuckle experience of coding a massive, live website and supporting user skins before 1.0. Have some Pimms and get over it, is my advice.

Back

Return to the documentation index.