Design Pattern: Preface

Preface groups together user notes about a work, collection, or challenge. It's a bit like listbox, but it has some differences: preface always contains a blockquote. Modules 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 workskins as well as site skins.

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

preface HTML Structure

Quick Ref: [always] {sometimes}

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

Rules

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.

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.

preface XHTML Diagram (example)

1. <div class="preface">
   1. <div class="faq module">
      1. <h3 class="heading">FAQ
         1. <span class="action">
            1. <a class="open">↓</a>
            </span>
         </h3>
      2. <blockquote class="userstuff">
         1. <p>...</p>
      </blockquote>
   </div>

Back

Return to the documentation index.