Style Guide
Below is a minimal style guide inspired by Dana Byerly's Style Guide.
Table of Contents
Headings
All headings within content pages have anchors. Based on their importance, the size can be
changed with data-heading
attribute.
TOP LEVEL HEADER
Here's some example text with h1
.
SECOND LEVEL HEADER
Here's some example text with h2
.
THIRD LEVEL HEADER
Here's some example text with h3
.
Fourth Level Header
Here's some example text with h4
.
Font sizes can be controlled through the use of the data-heading
attribute. For example:
<h1 data-heading='4'>Top Level sized like a fourth level heading</h1>
Block elements
Blockquote
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
Code within text
Here's an example of mentioning code, like <figure>
or display: flex
within paragraph text.
Code snippets
/* CSS */
.wrapper-content {
max-width: 45rem;
margin: 0 auto;
}
Lists
Ordered list
Ordered list will be displayed horizontally until the number of items exceed 3 (in which case the rest collapses in a column).
- Cats
- Dogs
- 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.
Buttons
This is made possible by using an svg
as the background of the <hr>
element.