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 four links in it are chosen to exercise one rule each. Check all four:
- Abbrevs and Vanes & Cranes — both target pages have a sub-title, and neither sub-title 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 either link, that rule has been lost.
- 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 |