Style Guide

Protocols for formatting content on KGLT webpages.

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???

Time 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

H2s and H3s appear amongst paragraphs, so we should check their before./after spacings. The separation between sections (above the heading) is set greater than between a section’s heading and its first text. KGLT doesn’t use heading below level 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 H2O, and the superscripts in E = MC2 or an endnote.1

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.

Ordered list

  1. The ordered list might also be indented.
  2. And have a number as its list-style.
    1. With more indention for a nested list.
    2. And a different numbering style (e.g., letters or roman).
  3. Again, check spacings.

Definition list

The definition list has a term then its description, which is often indented under the other or side by side with the term emphasized.

Definition list term
This is a definition list division.
Definition
An exact statement or description of the nature, scope, or meaning of something.

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.

Paragraph.

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.

Text and textarea


Checkboxes

Select your pizza toppings (input: checkbox, w/in fieldset):


Radio buttons

Choose a shipping method:

Select menus

This menu groups the options (<optgroup>):

Form control buttons

Table

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

Column 1 HeadingColumn 2 HeadingColumn 3 Heading
Row 1 cell 1 dataRow 1 cell 2Row 1 cell 3
Row 2 cell 1Row 2 cell 2Row 2 cell 3
footer cell1foot 2foot 2
This is the table’s figcaption

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 superscript1.
This number is subscript2.

Experiments

Audio

Audiofile

Montana Medicine Show (audio caption)

Podcasts

1,003 – Rosanne Cash, Loudon Wainwright III, Molly Tuttle & Golden Highway, and Ali McGuirk NPR's Mountain Stage

This episode was recorded on December 4th, 2022, at the Berklee School of Music in Boston. MA. The lineup includes Rosanne Cash, Loudon Wainwright III, Molly Tuttle & Golden Highway, and Ali McGuirk. Podcast support is provided by Diversified Energy. https://bit.ly/40fqyAQ
  1. 1,003 – Rosanne Cash, Loudon Wainwright III, Molly Tuttle & Golden Highway, and Ali McGuirk
  2. 1,002 – The War and Treaty, The Commonheart, The Nth Power, The A’s, and Deni Bonet
  3. From 2014: Del McCoury Band, The Travelin' McCourys feat. Keller Williams, Susan Werner, and more
  4. 1,001- John Fullbright, Willi Carlisle, Matt the Electrician, Jesse Milnes & Emily Miller, and more
  5. 1,000- Sonny Landreth and Cindy Cashdollar, Parker Millsap, Lucy Kaplansky, and more