Regions

As discussed in Stylesheets & Views, there are four major regions on the Archive, three of which are included on every page. They are contained within outer and inner wrappers.

While the regions aren’t themselves reusable patterns – each region appears a maximum of once per page – they do make use of patterns.

Table of contents

Quick reference

[...]
always included
{...}
sometimes included
[outer wrapper]
  [header region]
  [inner wrapper]
    {dashboard region}
    [main region]
  [/inner wrapper]
  [footer region]
[/outer wrapper]

HTML diagram

A note on skip links

Skip links are not considered a region and are not visible. However, they are included on every page to allow users of some assistive technology to jump directly to the main content, so we’ve included them in our diagram.

Because the page in our diagram has a #dashboard region, the #main region is given the .dashboard modifier class.

  1. <body>
    1. <div id="outer" class="wrapper">
      1. <ul id="skiplinks">
      2. <div id="header" class="region">
      3. <div id="inner" class="wrapper">
        1. <div id="dashboard" class="region">
        2. <div id="main" class="dashboard region">
      4. <div id="footer" class="region">

Header region

The header is the first region, styled in 03-region-header.css. It contains our branding, the main navigation, and depending on whether or not you are logged in, the login or greeting block.

  1. <div id="header" class="region">
    1. <h1 class="heading">
      1. <a>
        1. <span>
        2. <sup>
        3. <img>
    2. <div id="login or greeting">
    3. <h3 class="landmark heading">
    4. <ul class="primary navigation actions">
      1. <li class="dropdown">
        1. <a class="dropdown-toggle">
        2. <ul class="menu dropdown-menu">
          1. <li>
            1. <a>
          2. <li>
            1. <a>
          3. ...
      2. <li class="search">
        1. <form id="search" class="search">
          1. <fieldset>
            1. <legend>
            2. <p>
              1. <label class="landmark">
              2. <input id="site_search" class="text" type="text">
              3. <span class="tip">
              4. <span class="submit actions">
                1. <input class="button" type="submit">
    5. <div class="clear">

The hyphenated class names are not in the view files and are only applied when the user has JavaScript enabled; therefore, they should not be used for styling the header elements.

Login block

The login block consists of a link that summons the small login form when the user has JavaScript enabled or that takes the user to the log in page when they have JavaScript disabled.

  1. <div id="login" class="dropdown">
    1. <p class="user actions">
      1. <a class="dropdown-toggle">
    2. <div id="small_login" class="simple login">
      1. <form id="new_user_session">
        1. <dl>
          1. <dt>
            1. <label>
          2. <dd>
            1. <input class="text" type="text">
          3. <dt>
            1. <label>
          4. <dd>
            1. <input class="text" type="text">
        2. <p class="submit actions">
          1. <label class="action">
            1. <input type="checkbox">
          2. <input type="submit">
        3. <ul class="footnote actions">
          1. <li>
            1. <a>
          2. <li>
            1. <a>

Greeting block

The greeting block contains the user’s icon and navigation items that are only available to logged in users.

  1. <div id="greeting">
    1. <h3 class="landmark heading">
    2. <ul class="user navigation actions">
      1. <li class="dropdown">
        1. <a class="dropdown-toggle">
        2. <ul class="menu dropdown-menu">
          1. <li>
            1. <a>
      2. <li class="dropdown">
        1. <a class="dropdown-toggle">
        2. <ul class="menu dropdown-menu">
          1. <li>
            1. <a>
          2. <li>
            1. <a>
      3. <li>
        1. <a>
    3. <p class="icon">
      1. <a>
        1. <img class="icon">

Dashboard region

The dashboard is the second region, styled in 04-region-dashboard.css. It does not appear on every page, but when it is on the page, it comes after the header and before the main region.

  1. <div id="dashboard" class="region">
    1. <h4 class="landmark heading">
    2. <ul class="navigation actions">
      1. <li>
        1. <a>
      2. <li>
        1. <a>
      3. <li>
        1. <span class="current">
    3. <h4 class="landmark heading">
    4. <ul class="navigation actions">

Main region

The structure of #main varies significantly from page to page. Most of the remaining stylesheets deal with elements found in main; the 05-region-main.css stylesheet only covers very basic styles, like how wide it should be when appearing with a dashboard (#main.dashboard).

The structure of an individual page’s main region is commented in the views. Each section is announced by a heading, although many of these headings are not displayed in the Archive default style; these are called landmarks. Like the skip links, they are designed to help users of assistive technology jump around on the page.

<!--Descriptive page name and system messages, descriptions, and instructions.-->
<h2> </h2>

<!--Subnavigation, sorting and actions.-->
<h3 class="landmark"> </h3>

<!--main content-->
<h3 class="landmark"> </h3>

<!--Subnavigation, sorting and actions.-->
<h3 class="landmark"> </h3>

Example structure

Here’s a brief look at the structure of a filterable work index, like the work index for The X-Files:

  1. #main
    1. h2
    2. h3 .landmark
    3. ul .navigation
      1. li a
      2. li span .current
    4. h4 .landmark
    5. ol .pagination
      1. li .previous a
      2. li span .current
      3. li a
      4. li...
      5. li .next a
    6. h3 .landmark
    7. ol .work index
      1. blurb
      2. blurb
      3. blurb
      4. blurb...
    8. form .filters
      1. h3 .landmark
      2. fieldset
        1. legend
        2. dl .filters
          1. dt .landmark
          2. dd .submit input
          3. dt
          4. dd
          5. dt...
          6. dd...
          7. dt .landmark
          8. dd .submit input
    9. h4 .landmark
    10. ol .pagination
      1. li .previous a
      2. li span .current
      3. li a
      4. li...
      5. li .next a
    11. div .clear

Other indices on the Archive, such as a tag’s bookmark index and the collections index, follow the same pattern. There are also variations of it that don’t have filters, such as the main works index, or that have filters and a dashboard, such as a user’s bookmark index.

The footer is the final region, and its styles are in 06-region-footer.css.

  1. <div id="footer" class="region">
    1. <h3 class="landmark heading">
    2. <ul class="navigation actons">
      1. <li class="module group">
        1. <h4 class="heading">
          1. <ul class="menu">
            1. <li>
              1. <a>
          2. <ul class="menu">
      2. <li class="module group">