The author

Dullroar
a heaping plate of rambled eggs

Style Guidelines

This lays out my general approach to writing in raw HTML for the purpose of moving forward with a website requiring minimal tooling, what I call the SKABS system. This document is meant to be self-referential, i.e., it "practices what it preaches."

General Rules

Each main topic or standalone article should be wrapped in an <article> tag. Each article should have a major heading, using a <h2> tag. Further sub-headings can use <h3> and the like as needed. Articles and sub-sections are collapsed under <details> tags.

Note: An explicit goal of this site is to use little to no Javascript. The fastest framework to load is none at all!

When mentioning titles of books, movies, songs and such, use <cite>, such as, "1984 was written by George Orwell." Do not include the author or artist in the citation. When quoting a block of text, use the <blockquote> element, as follows:

A screaming comes across the sky...

When wanting to make a main point but also have an aside, first, wrap the main point in a <section> element, as this text has been. Note that an aside is different than a footnote, which is handled by two anchor elements, one on the superscript (<sup>) footnote marker 1, and the other at the end of the corresponding paragraph that comprises the actual footnote, which should also have an ending anchor pointing back to the internal id of the footnote. View source on this page for an example. The footnote should almost always be within the <article> section to which it belongs.

After an aside, since it uses float: right;, the float needs to be cleared, either by certain block elements that have been set to do so in the CSS (e.g., <h2>), or by using the clear class, as this paragraph does.

Don't use special fonts, rely on the "built-in" font families, which at this time I've limited to serif, sans-serif and monospace (Firefox on Linux Mint doesn't seem to do anything different for cursive or fantasy anyway). Don't use fonts for glyphs, either. Use Unicode characters, which tend to have everything needed (if not the most pretty stylings). For example, see the envelope "icon" in the footer.

You can always "view source" to see what is going on. Ctrl+U is your friend!

1This is a footnote. The arrow at the end of the paragraph will take you back to the originating line. At this time I am deprecating footnotes in favor of asides because footnotes are a PITA.

Elements for Formatting

Following are some guidelines I use for formatting. They are meant to be "semantic but not pedantic."

  • <b> is used for bold, even though it is frowned upon and I should be using <b>, but I don't want to type that much.
  • <i> is used for italics, for similar reasons.
  • <u> for underlines, ditto.
  • <s> for strikethrough, again, ditto.
  • <mark> is for highlighting phrases.
  • Internal links, whether on the same page or to a different page on the site, should all be relative URLs.
  • External links (starting with http or with target="_blank") are styled via CSS to have a ➥ following them, e.g. Don't Be Evil.
  • I have set up many "header" block elements to clear floats, but there is also a clear class that can be applied to anything to clear floats.
  • However, I am trying to use display: grid; more for left/right positioning more, too.
  • <code> is used for inline code snippets, e.g., printf("Hello, world!\n");
  • <pre> is for block-level code, although <samp> and <kbd> can be used for more complex examples.

Figures, Images and Tables

Large code samples should be laid out within a pre element within a figure element. It looks best to make sure the code lines within the block are all left-justified in the source file. The figcaption should precede the code sample.

An example with some code!
// Enough to handle about 100 characters wide without overflowing.
var x = y + 1;
var m = "12345678901234567890123456789012345678901234567890123456789012345678901234567890";

Images should have at least two sizes - a full-size image for larger screens, and a "small" image, typically 640 pixels wide or less, for smaller (mobile) screens. Some work is needed to make sure all images aren't downloaded when the page is first opened, since I plan on all articles being on the main page. Instead, by wrapping content in an article in the details element and then using some CSS chicanery, we can forestall downloading images until the summary element is clicked and the article is expanded. View source for more details. Images should be wrapped in a figure element with the figcaption following the image.

Some attitude!

Tables will be used rarely because they generally look like crap on phones, and pretty much follow MDN styling advice. View source for more details. For non-tabular layout use CSS display: grid instead—see the footer for an example.

Ten highest 14ers I have climbed
# name elevation (feet) range # summits
1 mt. elbert 14,­433 sa­watch 1
2 mt. massive 14,­421 sa­watch 2
3 mt. harvard 14,­420 sa­watch 1
5 la plata peak 14,­336 sa­watch 1
8 mt. lincoln 14,­286 mos­qui­to 1
9 grays peak 14,­270 front 2
10 mt. antero 14,­269 sa­watch 1