PragmaticWeb

Style Guide

I think a style guide is a good thing to have for two reasons: a) it acts as a library of your components to showcase, and b) you can test new designs and functionality on this page, essentially making it a kind of debug page in disguise. I first saw a style guide on Zach Leatherman’s personal website and immediately wanted one for myself.

Typography

What is Web Accessibility

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can:

  • perceive, understand, navigate, and interact with the Web
  • contribute to the Web

Web accessibility encompasses all disabilities that affect access to the Web, including:

  • auditory
  • cognitive
  • neurological
  • physical
  • speech
  • visual

Web accessibility also benefits people without disabilities, for example:

  • people using mobile phones, smart watches, smart TVs, and other devices with small screens, different input modes, etc.
  • older people with changing abilities due to ageing
  • people with “temporary disabilities” such as a broken arm or lost glasses
  • people with “situational limitations” such as in bright sunlight or in an environment where they cannot listen to audio
  • people using a slow Internet connection, or who have limited or expensive bandwidth

— https://www.w3.org/WAI/fundamentals/accessibility-intro/#what

A few more headers to test (h3)

This is an h4

Let’s test some other elements. What about…

Here is how links look in regular text.

Links text can have descenders like g or p or q.

Blockquotes

Blockquotes could use a shortcode for citation (TODO)

An example for a blockquote

Or with citation:

Another example with a citation source.
— Citation Source

Markdown Tests

Markdown is used for the content of this site, so let’s test some of the most common elements used in markdown and how they appear in HTML.

Horizontal Rules

Typographic replacements

These symbol notations should be replaced by their respective symbol:
© © ® ® ™ ™ (p) (P) ±

Here the punctuation symbols should all be normalized to three no matter how many there are in the markdown:
test… test… test… test?.. test!..
!!! ??? , , – —

And a test of smart quotes:
“Smartypants, double quotes” and ‘single quotes’

Emphasis

This is bold text via asterisks and this is bold text via underscores.
This is italic text via asterisks and this is italic text via underscores.
Strikethrough

Emojies

Classic markup: 😉 😳 😢 😔 😆 😋
Shortcuts (emoticons): 😃 😦 😎 😉

Subscript / Superscript

<ins>

Inserted text

<mark>

Marked text

Footnotes

Footnote 1 link[1].
Footnote 2 link[2].
Inline footnote[3] definition.
Duplicated footnote reference[2:1].

Abbreviations

This is the HTML abbreviation example.
It converts “HTML”, but keeps intact partial entries like “xxxHTMLyyy”.

Demo Boxes

Demo Boxes should be used to demonstrate the effect/appearance of code snippets, e.g. how specific CSS styles could look.
TODO: make some demo boxes.

Code

Inline Code

Tesing of inline code with the default, but also with a specifically defined language like Javascript const someVariable = 10; {language=js}. Code uses PrismJS for syntax highlighting and should display the proper syntax highlighting depending on the language used.

CSS

body {
+  background: limegreen; 
-  background: red; 
}

JavaScript

function () {
  console.log("Something happens.");
}

PHP

<?php
public static function something()
{
  $result = false;

  if ($thisWorks) {
    $result = true;
  }

  return $result;
}
?>

Python

class SomePythonClass:
  """
  Let's throw in a doc string for good measure.
  """

  def something(self):
    if self.is_true:
      return True

    return False

Lists

Ordered List

  1. Lorem ipsum dolor sit amet

  2. Consectetur adipiscing elit

  3. Integer molestie lorem at massa

  4. You can use sequential numbers…

  5. …or keep all the numbers as 1.

Ordered List With Offset

  1. foo
  2. bar

Unordered List

Fluid Media

Image

Images are displayed via a custom image shortcode that takes care of generating different resolutions and fallback formats for each image. They should be displayed at 100vw or their full width, whichever is smaller.

Sample Image

WIP Styles

Footnotes

  1. Footnote can have markup
    and multiple paragraphs. ↩︎

  2. Footnote text. ↩︎ ↩︎

  3. Text of inline footnote ↩︎