Style Guide

Below is a minimal style guide inspired by Dana Byerly's Style Guide.

Table of Contents


All headings within content pages have anchors. Based on their importance, the size can be changed with `data-heading` attribute.




Fourth Level Header

Font sizes can be controlled through the use of the data-heading attribute. For example:

First Level sized like a fourth level heading

Block elements



According to research, web users generally prefer writing that is concise, easy to scan, and objective rather than promotional in style. Why does it matter ? On the web, you have less than 15 seconds to grab somebody's attention when they first arrive on your website. On the average Web page, users have time to read at most 28% of the words during an average visit.


A little learning is a dangerous thing. — Japanese Proverb

Paragraph text

Here's an example of paragraph text that is long enough to show line-height. Here is an example of a link that goes back to the homepage. And here is an example of bold text.


Code within text

Here's an example of mentioning code, like `figure` or `display: flex` within paragraph text.

Code snippets

.wrapper-content {
  max-width: 45rem;
  margin: 0 auto;


Ordered list

Ordered list will be displayed horizontally until the number of items exceed 3 (in which case the rest collapses in a column).

  1. Cats
  2. Dogs
  3. Horses

Unordered list

  • Cats
  • Dogs
  • Horses

List with longer text

  • Here is a list example with more text to illustrate the line-height and spacing between the bullets.
  • In my opinion this nuance is often overlooked, resulting in the same amount of space between lines in a single bullet and between the bullets, making it harder to read.
  • Both ordered and unordered list using this spacing.


The horizontal separator is customized to look like a rugged line.

This is made possible by using an `svg` as the background of the hr tag.