A style guide helps to define a common visual language for the components of a website. Everything should be as consistent and responsive as possible, accessible, and enjoyable both in light and dark modes.

Grid system

A cross-browser 12 column fluid grid system from my bullframe.css Sass framework.
All columns have width set to 100% by default if the browser viewport is ≤ 1099px. There are one standard breakpoint at 1100px and several ones depending on the layout.

@media (max-width: 1100px) { 
  [class^="bf-col"] { 
    width: 100% 
  } 
}

100%

91.66%

83.33%

75%

66.66%

58.33%

50%

41.66%

33%

25%

16.66%

Colors

#fbfbfb

#bebebe

#999

#666

#333

#111

#ffe28c

#ffc107

#f95c1f

#d8450b

#96310a

Quick, reusable and customisable color palette via Sass variables.

// _variables.scss

$white:              #fff;
$light:              #fbfbfb;
$gray-light-extra:   #e9e9e9;
$gray-light:         #bebebe;
$gray-mid:           #555353;
$gray:               #999;
$gray-dark:          #666;
$gray-dark-extra:    #444;
$dark:               #333;
$dark-extra:         #222;
$black-light:        #111;
$black:              #000;

// _variables.scss

$yellow-light-extra: #f7e4ab;
$yellow-light:       #ffe28c;
$yellow:             #ffc107;
$orange-light:       #ffa500;
$orange:             #f95c1f;
$orange-mid:         #f03d09;
$orange-dark:        #d8450b;
$orange-dark-extra:  #96310a;

Text elements

Every text element should be responsive on every browser and viewport size. Avoid a horizontal scrollbar as much as possible.
Some elements (e.g. headings) could change in size based on the width of the viewport.

Headings

Custom classes

.headline

.sub-title

Standard HTML elements

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Inline text elements

The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The ~~del element~~ example
The dfn element and dfn element with title examples
The em element example
The i element example
The img element placeholder image example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The ~~s element~~ example
The samp element example
The small element example
The span element example
The strong element example
The _{sub element} example
The ^{sup element} example
The u element example
The var element example

Paragraphs

This a default paragraph:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

This a serif font-family paragraph:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

This a monospace font-family paragraph:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

This is a leading paragraph:
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable.

This a truncated paragraph at 275px width:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

pre

L          TE
  A       A 
    C    V
      R A
      DOU
      LOU
    REUSE
    QUE TU
    PORTES
  ET QUI T'
  ORNE O CI
    VILISÉ
  OTE-  TU VEUX
    LA    BIEN
  SI      RESPI
          RER       - Apollinaire

pre code

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>...</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
  <script src="app.js"></script>
</body>
</html>

blockquotes

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.
Tom Whatever

Even better philosophical quote marked up with just a <blockquote> element.

Ordered list

list item 1
list item 1
1. list item 2
2. list item 2
  1. list item 3
  2. list item 3
3. list item 2
4. list item 2
list item 1
list item 1

Unordered list

list item 1
list item 1
- list item 2
- list item 2
  - list item 3
  - list item 3
- list item 2
- list item 2
list item 1
list item 1

Styled list

list item 1
list item 1
1. list item 2
2. list item 2
  1. list item 3
  2. list item 3
3. list item 2
4. list item 2
list item 1
list item 1

Emoji

This the official UNICODE Emoji list of 1,874 emojis.
Copy and paste them directly in the code or use a codepoint replacing U+1 with &#x. This is an hamburger & # x 1 F 3 5 4 (spaced for documentation only) 🍔.

The first cell has a codepoint inside, the others have a copied and pasted emoji.
🔥	😁	🤣	😍	😝	😴	😵	😎
🙉	💘	💯	💥	👋	👌	...	...

Embedded content

All these elements must be 100% responsive but the UI could be inconsistent between browsers and platforms.

Video and audio with controls

Progress and meter

Progress

Meter 350 degrees

Linked image in a figure with a caption

placeholder image — The image above is 800x400 pixels

YouTube iframe

Forms

100% width for <input>, <select> and <textarea> elements by default. In most cases, a container should be used to avoid cross-browser inconsistencies and accessibility issues.
The UI of some elements (e.g. <select> and checkboxes) could be inconsistent between browsers.

If needed, could be used some advanced CSS selectors to have more power without loosing accessibility.

Inputs

This a legend

Text input as sibling of label

Email input

Tel input

URL input

Date input

Datetime-local input

Range input

Number input

Output 60

Password input

Search input

Radio input

Checkbox input

Selects

Select field

Select drop-down [size="3"] Select multiple [size="10"]

Textareas

The buttons could be made with <button> (preferred), inputs or anchors. In all cases, the UI should be the same.

Buttons

<a> button

(bf-btn--ghost)

(bf-btn--large)

Disabled buttons