Punctuation

For dashes, use long m-dash, not two hyphens, with a space on either side — makes lines break better on the web.

Use shorter n-dash only for ranges: May–July or 2020–2022, otherwise.

Use hyphens only for joining, like compound-modifier phrases and suffix/prefix combos that aren’t common words: That DJ has a super-sonorous voice but radio-ish face.

Use ellipsis… with a space afterwards, not three dots.

Use serial comma in to separate the final and (or or) clause: A rabbi, a priest, and an imam walk into a bar. The bartender looks up and says, “Is this some kind of joke?”

Links

Telephone format: 406-994-3001. All phone numbers should be linked, so people can click/tap to call. To do that, enter the number in the URL field like this: tel:4069947091 — no hyphens, just the numbers, preceded by “tel:“.

Link format: Use meaningful text for link-text, not generic “click here.” It’s an accessibility issue.

Colors: KGLT site palette colors are…

Time

Date format???

Typography: HTML Elements

Below is most everything we’ll need to style our theme (check the source code to see all the embedded elements). We’ll start with headings, levels 1–3 (our site does’t use 4–6), The H1 tag is reserved for the document/page tite and isn’t used in the body of the article.

Heading 1

The H1 tag is used only as the page/article title.

Heading 2

Sub-headings get an H2 tag.

Heading 3

Links (and their states)

A great reference making styling decisions is Practical Typography. Link-text is are best identified in at least two ways (for accessibility). Browsers underline link-text and color it red. Visited links can be styled differntly, but aren’t for this site (this link cannot be visited so stays the same). Mouseover a link to see its hover styles (rmoved underline); click/touch it to see it active (background-color changes). All the states of a link can be styled: default, visited, hover, and active.

Text styles

This text has strong emphasis compared to this with regular emphasis. Emphasis can be different than bold and italic text, or a cite, as in A Magazine Name.

Let’s not forget to style subscripts, like H₂O, and the superscripts in E = MC² or an endnote.¹

We should check that an abbreviation, like HTML, has styling (maybe with a “?” cursor on hover). We may want to define what code looks like with a variable. We may use one style for deleted text and anothe for insertions. And here’s some big text next to some text in a small tag.

We should determine the characters-per-line of our paragraphs: a CPL of 50-90 is considered optimum. It’s wise to decide on the spacing between lines, usually a 1.25–1.5 multiple of font-size.

The above are two-line paragraph breaks.
This is after a single line break. And below is a heading rule.

List types

Unordered list

• List items are usually indented.
• And start a list-style character, like a disc.
  • Nested lists are often further indented.
  • With a different list-style, like a square or open circle.
• Check the vertical spacing between list items.

Blockquotes

Take care to style our quote blocks differently than regular body text. Common choices are margins and a different font:

Good afternoon, gentlemen. I am a HAL 9000 computer. I became operational at the H.A.L. plant in Urbana, Illinois on the 12th of January 1992. My instructor was Mr. Langley, and he taught me to sing a song. If you’d like to hear it I can sing it for you.

HAL 9000

Note this quote’s last line is within a <cite> tag, indicating the quote’s attribution — again, often styled differently that the quote itself.

Form: Jetpack block

This is built with Jetback’s Feedback Form, with Jetpack styles and field blocks.

Form elements

This form uses HTML without added styles. The code come straight from the WebAIM accessibility site, so it has the proper labels, legends, and fieldsets.

Checkboxes

Form control buttons

Table

A basic default table with caption, headings, body, and footer (no colgroups, scopes, or spacings specified):

Preformatted Text

often rendered with a <pre> tag. This text is in the Preformatted block:

"Beware the Jabberwock, my son!
    The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
    The frumious Bandersnatch!"

Most browsers default render preformatted text in a monospace font like Courier. This is the same text in the Verse block.

"Beware the Jabberwock, my son!
    The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
    The frumious Bandersnatch!"

Code

Code can be presented inline, like <?php bloginfo('stylesheet_url'); ?>, or within a <pre> block:

#container {
	float: left;
	margin: 0 -240px 0 0;
	width: 100%;
}

Text, one more time

This is: an abbrev. This sentence is within a q tag with cite and title attributes.

This sentence is italic.
This sentence has emphasis.
This sentence is bold.
This sentence has strong emphasis.
This sentence is small.
This sentence is big.

This number is superscript¹.
This number is subscript₂.

Experiments

• Ark archive
• Donate form