Front End Help

Preface Pattern

Preface groups together user notes about a work, collection, or challenge. Items that are grouped in preface include: summary, notes, end notes, FAQ, rules, about, description. On a work page, preface is inside #workskin, so it can be styled in work skins as well as site skins.

The preface style is declared in 14-group-preface.css.

Rules

A preface can be any block containing a child that can contain these blocks: h1—6, p, div, ul, ol, dl, blockquote. Normally it’s a div.

A preface always contains a blockquote.userstuff, although the blockquote may be logicked out (e.g. if a work doesn’t have a summary or note but does have associations).

A preface can have lots of child modules. You can have a preface with restricted children: table.preface, ol, ul, or dl.preface, so long as the block children are given the module class.

You can never have an inline preface, or a phrase element preface.

Quick reference

[...]
always included
{...}
sometimes included
[preface]
	{title heading} {byline heading}
	[block module]
	  [heading] {span actions} [/heading]
	  [blockquote userstuff]
	  {p note} {ul actions}
	[block module]
[/preface]

XHTML diagram

This diagram is taken from a challenge profile.

  1. <div class="preface group">
    1. <div id="intro" class="module">
      1. <h3 class="landmark heading">
      2. <ul class="actions">
        1. <li>
          1. <a>
        2. <li>
      3. <h3 class="heading">
      4. <blockquote class="userstuff">
      5. </ol>
      6. <div id="faq" class="module">
        1. <h3 class="landmark heading">
        2. <ul class="actions">
        3. <h3 class="heading">
        4. <blockquote class="userstuff">
        5. </ol>
        6. <div id="rules" class="module">
      </div>