The GOPHER layout

This page describes the pre-defined CSS styles of GOPHER. It serves both as a layout example and as documentation for non-standard elements and CSS classes.

Text formatting & colour schemes

Web page authors can select one of the pre-defined font sets and colour schemes by linking the appropriate top-level CSS stylesheet in the HTML header (e.g. css/gopher_web_rgb.css for standard Web fonts and the RGB colour scheme). With the GopherPHP framework, the default stylesheet is specified in the XML configuration file and users can be allowed to select other stylesheets and font sizes (see display preferences).

Fig. 1: Richardson's Ground Squirrel, also known as gopher. Photograph © Martin Pot (licensing information).

Each font set specifies a set of matching sans-serif, serif and monospace fonts, including some size adjustments and multiple fallback fonts.

The default text font is sans-serif, which should look good in regular, italic, bold, and bold italic variants.
Serif text (class="serif") should also look good in regular, italic, bold, and bold italic variants. Any HTML element can be formatted in serif font with the class attribute, e.g. <p class="serif">serif text</p>.
A matching Typewriter font is automatically used for <code> elements.
Narrow text (class="narrow") allows you to squeeze more text in a single line, but is not guaranteed to have italic or bold variants. A suitable narrow font may not always be available, causing the GOPHER style to fall back on a regular-width font.

A colour scheme defines matching colours for various page elements, including the banner, navigation bar and section headers. Hyperlinks also match the selected colour scheme. Use <a href="..." target="_blank" class="external"> for external links, which open the new page in a separate window and display a small arrow next to the hyperlink (this feature is not supported by all Web browsers, though). In order to match their original page content to the currently selected colour scheme, Web page authors can use pre-defined primary and secondary highlight colours for text and/or background (e.g. of table cells). The following CSS classes are available for this purpose:

primary:		text (`class="fg1"`)		background (`class="bg1"`)		both (`class="fg1 bg1"`)		inverse (`class="inv1"`)
secondary:		text (`class="fg2"`)		background (`class="bg2"`)		both (`class="fg2 bg2"`)		inverse (`class="inv2"`)

Figures can be inserted in the left or right margin with <div class="figure-left" style="width:...;"> (or figure-right, respectively), as demonstrated by Figure 1. It is important to specify the precise width of the figure in order to ensure correct layout. Figure captions should be typeset with <p class="caption"> within this <div>.

The GOPHER styles also set up indentation and bullets for unordered lists (<ul>):

first item
second item
- with a sublist
third item

Spacing between list elements can be reduced with class="compressed", e.g. for lists of names:

Arthur Dent
Ford Prefect
Zaphod Beeblebrox
Tricia McMillan

Pre-formatted text (<pre>) is typeset in an indented box with a coloured frame:

foreach $x (1..9) {
    print "This is sample line $i\n";
}

Make sure that the closing tag (</pre>) is not indented with blanks, otherwise there will be an empty line at the bottom of the box. Important text passages can be highlighted by typesetting them in a block element with class="box" (e.g. <div class="box">):

This is a very important remark.

Highlighted boxes may also contain lists and any other structured layout!

Note that the last line of text should be immediately adjacent to the bottom border.

Page structure: sections & subsections

GOPHER pre-defines styles for section and subsection headers (<h1>, <h2> and <h3>). You can add a link back to the top of the page by following the header immediately with <p class="backlink"><a href="#top">back to top</a></p> The link should appear immediately below the coloured bar, in a small font and right-justified. Make sure that an anchor named top is set somewhere near the top of the page. Of course, you can use such paragraphs to display any other information as well (e.g. the copyright message in the default page footer).

Section (and possibly subsection) headers should be labelled with IDs or named anchors for page-internal navigation. A simple navigation bar (as seen at the top of this page) can be inserted with <p class="navigation"> and – separators between the links.

Subsection header (`<h2>`)

Section (<h1>) and subsection (<h2>) headers form the main divisions of a GOPHER page. Subheadings within a thematically connected paragraph can be inserted with <h3> elements.

Subheading (`<h3>`)

Note that there is no coloured bar below a <h3>-level header.

Subsection with backlink

The position of the following paragraph is adjusted automatically for headers with backlinks.

	Introduction	Documentation	Download
Page skeleton — Configuration files — Header & Footers — Special features — GOPHER layout