Style Samples
Every Fi3ldMan-specific style, in one place, for visual verification
Each row names a class and shows it applied. A sample that looks like ordinary body text is a styling failure, not a design choice.
Text colours
| Class | Sample |
| colorRed | This text should be red |
| colorPink | This text should be pink |
| colorBlue | This text should be blue |
| colorGray | This text should be gray |
| colorOrange | This text should be orange |
| colorLightBlue | This text should be light blue |
| colorDarkBlue | This text should be dark blue, clearly darker than colorBlue above |
| colorDarkBrown | This text should be dark brown |
Row colours
Here the class is on the row, not the cell. Every cell in a coloured row should take the colour, including empty ones and cells that carry a background class of their own.
| Row class | First cell | Second cell | Cell with its own background |
| colorRed | every cell in this row should be red | including this one | red text on yellow |
| colorBlue | every cell in this row should be blue | including this one | blue text on light gray |
| colorDarkBrown | every cell in this row should be dark brown | including this one | brown text on light gray |
Cell background colours
These are the classes that Oxygen 28.1 silently overrode: its main.css colours every table cell white at a higher specificity, so each of these rules carries !important. If any cell below is white, that fix has been lost.
| Class | Sample cell |
| bkLightGray | Light gray background |
| bkDarkGray | Dark gray background |
| bkYellow | Yellow background |
| bkBlue | Blue background |
| bkRed | Red background |
| bkGreen | Green background |
Text emphasis
bold: this text should be heavier than the surrounding body text
placeholder: this text should sit on a yellow highlight
Heading classes
DITA has no inline heading, so headings are paragraphs carrying h1 or h2. Both render at 2em; the two classes are interchangeable in appearance and differ only in authoring intent.
h1 — this line should be large
h2 — this line should be the same size as the h1 above
Link buttons
enterBtn turns a link into a full-width grey button in 28px bold Arial.
enterBtn — a large button link
Inside a contents-index table the same class is reduced to 20px, because that page carries many of them.
Item list
item-list wraps its links into a row of rounded buttons rather than stacking them.
First item Second item Third item
Sortable table
Click a header cell to sort. The header row is lighter than a plain bkDarkGray cell, and sortable columns show a ▴▾ marker; the column marked sorttable_nosort is darker, shows no marker, and does not respond to a click.
| Sortable | Also sortable | Not sortable |
| Charlie | 30 | no sort marker |
| Alpha | 10 | no sort marker |
| Bravo | 20 | no sort marker |
Related links panel
The related-links panel is not part of the body, so it has no sample table here — it is the floating block at the right of this page, and the five links in it are chosen to exercise one rule each. Check all five:
- Abbrevs, Vanes & Cranes and Contents — all three target pages have a sub-title, and none of those sub-titles must appear beneath its link. DITA emits the target's short description as a block under every link, and li.linklist div.desc suppresses it. Vanes & Cranes is the one to watch: its sub-title runs to sixty-odd characters, which in a 200px panel wraps to several lines and pushes the rest of the list out of shape. If extra grey text appears under any of them, that rule has been lost.
- Britain — the target has no sub-title, so there is nothing for that rule to hide and DITA emits no block at all. It is here to keep the list a mixture: a panel that hides every sub-title and a panel whose links happen to have none look exactly alike until both shapes sit in the same list.
- Style Samples — this page. It should be grey and unclickable. The class that does this is applied at run time by current-handler.js, so a live-looking link here means that script did not run.
- Every link should carry the external-link icon at its right-hand side.
- The panel should sit against the right edge, not inline with the body text.
Full width table and separator rows
fullWidthTable makes a table span the content area. table-separator enlarges a row used to break a table into groups.
| table-separator — this row should be larger than the rows below | |
| Ordinary row | Ordinary row |
| Ordinary row | Ordinary row |
Image link table
ImageLinksTable lays links out as a grid of picture tiles, each with its label centred on its own line. All four tiles should be exactly the same size, and the label should sit above or below its picture rather than beside it — the two rows differ only in whether the label is authored first or second, and both should look the same either way.
Image row
A row of linked images inside a plain div. All three should be exactly the same height and each should keep its own width; three images at the same width would mean the row rule is reaching them as tiles, and three different heights would mean it is not reaching them at all.
