Front End Help

Diagrams of Regions

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

Regions overview

The five regions are contained within two wrappers. The outer wrapper surrounds all five regions, while the inner wrapper surrounds the main and dashboard regions.

  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 13-group-blurb.css. It contains our branding, the main navigation, and depending on whether or not you are logged in, the log in or greeting block.

  1. <div id="header" class="region">
    1. <h1 class="heading">
      1. <a>
        1. <span>
        2. <sup>
        3. <img>
    2. log in block or greeting block
    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.

Log in block

The log in block consists of a link that summons the small log in 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 style sheets deal with elements found in main; the 05-region-main.css style sheet only covers very basic styles, like how wide it should be when appearing with a dashboard.

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">
      3. </li>