Style Guide
A collection of little decisions to help present information consistently.
Keeping a style guide for this website allows me to codify small decisions over time. This style guide is a living document and regularly updated.
Table of contents
Writing Styles
- The Web when it's (waves hands) the whole thing (example: the Web will win)
- The web when it's referring to a location (example: on the web)
- websites, not web sites
- email, not e-mail
- ebook, not e-book (for consistency)
- One can log in to a website using the login form, and sign up for a website using the signup form
- Oxford commas (serial commas) today, always, and forever
- Titles in italics (example: The Murder of Roger Ackroyd)
- Authors/creators in plaintext (example: Agatha Christie)
- Plaintext not plain text
- Blockquotes not block quotes
Visual Styles
Colors
HTML Elements
Asides
Blockquotes
Blockquotes are presented with a normal type size, because they exist in support of the primary text. Blockquotes include an author (linked if appropriate) and a title (a cite element, linked if appropriate).
The powerful lady, respected in the gathering of rulers, has accepted her offerings from her. Inana's holy heart has been assuaged. The light was sweet for her, delight extended over her, she was full of fairest beauty. Like the light of the rising moon, she exuded delight. Nanna came out to gaze at her properly, and her mother Ningal blessed her. The door posts greeted her. Everyone's speech to the mistress is exalted. Praise be to the destroyer of foreign lands, endowed with divine powers by An, to my lady enveloped in beauty, to Inana!
Code (inline)
Inline <code> elements are presented with some padding, monospace font, and background color. (example: PRINT "Hello, World")
Code (blocks)
Block code elements are wrapped in a figure element, make use of a descriptive figcaption, and include a border.
CLS
PRINT "Hello, World"
END
Details
Summary element
Details element paragraphs.
Links
- External links include an ascending arrow (example: Wikipedia)
- Internal links do not include an arrow (example: Purpose)
Lists
Unordered lists
- Unordered have solid, square markers
- Nested unordered lists do, too
- Square markers match the site theme color
Ordered lists
- Ordered lists have monospaced number markers
- Nested ordered lists do, too
- Number markers match the site theme color
Description lists
- Description terms are styled normally
- Descriptions in a smaller type size