My Design System

This page serves as a showcase for the components used on my website, mainly used for visual testing.

Most of the components on my website are pure HTML and CSS; there is no heavyweight JavaScript library performing dynamic rendering. They are designed for simplicity, akin to Markdown. CSS generally adheres to the BEM pattern.

---

Page Title

Section Title

Title elements are used to divide content into sections.

Subsection Title

Ideally, text-heavy content should be divided up into bite-size chunks. "Walls of text" should be avoided.

Subsubsection Title

Subsections can be divided even further.

Bold Text

If needed, bold text can also be used to introduce new content.

Section Title (Block)

The block modifier is useful for creating sections that are clearly identifiable and distinct. Generally, either all sections on a page should use this modifier, or none of them.

Subsection Title (Block)

The same can be applied to subsections. All subsections within a section should use this modifier, or none of them.

Subsubsection Title

Further levels of headings can be used, but without a block modifier.

Bold Text

Bold text can be used as before.

Additional Elements

Section Breaks

---

Section breaks (as shown above) can be used to create an obvious break between sections, where headers alone are not sufficient.

Taglines

Taglines should be used to provide a summary of the surrounding text, or to highlight a key point.

Asides

Quotes

Block quotes should be used when quoting an external source.

Code

Code blocks should be used
  to display blocks of code...

Whitespace
  is
    preserved!

Shorter snippets can be written inline.

Lists

Lists are more or less unchanged from the browser defaults.

• An
• unordered
• list
  • with
  • sub-items

1. An
2. ordered
3. list
   1. with
   2. sub-items

However, an alternative style is available for pros and cons lists.

• Plus
• Plus
• Minus
• Minus

Emphasis

Emphasised text can have further emphasis within it.

Spoilers

Use spoilers to hide content from view.

Show Spoilers

Action Links

Use action links for prominent actions such as download buttons.

Action Link

Images

Images can be made to fill the page.

Captions should be used to describe the content, if no other context is provided.

Alternatively, they can be made a little smaller.

Embedded Videos

Embedded videos will fill the page while preserving a 16:9 aspect ratio.

Chips

Chip Chip Chip

Chips are used to convey small tidbits of information, such as tags.

Checkboxes

Checkboxes are designed to be easy to click, without requiring the usual precision of the default browser checkboxes.

Datestamp

Finally, articles should end with a datestamp.

Published 20/09/2020