I’ve redesigned my site for the umpteenth time now. One big phase has always been the work on the basic visual appearance. Up until now, I scavanged my archive for posts that have the elements that needed to be styled: code blocks, quotes, etc. This was a tedious process. Now, I use this document containing all basic forms of content my site uses. My personal style guide.
What I mean with “basic forms of content” can be summarized by listing the set of elements on a page that can be styled with plain CSS element selectors (i.e. without any classes). If you’re familar with Harry Roberts’ Inverted Triangle CSS methodology, the style guide deals only with the elements layer.
The most common forms of emphasis are italic and bold. Mostly seen in handwritten notes, another form is a mark. It tends to stick out of its context in a rather attention-grabbing fashion.
Rarely, you see abbreviations like MDN marked up with the
<abbr> element. Edits made to a text can be
repersented by marking up the parts that were deleted (with
<del>) and inserted (with
Sometimes I need to represent keyboard shortcuts. For most cases, simple
<kbd> elements suffice and require no extra markup. When using symbols (e.g. →) instead of words (e.g. rightwards arrow), providing the
aria-label attribute with the word description of the symbol as its value enables screen readers to read out the shortcuts correctly.
One of my favorite shortcuts in Sublime Text is Ctrl+D. It adds the next occurence of the current selection to the selection. For Visual Studio Code it would be F2 to rename a symbol, simply because it brings functionality often only found in full-blown IDEs to the world of text editors.
- Mozilla Developer Network
- Sara Soueidan: Migrating from Jekyll+Github Pages to Hugo+Netlify
- Manuel Matuzovic: Writing CSS with Accessibility in Mind
- Una Kravets: Locally Scoped CSS Variables: What, How, and Why
- First list item
Second list item
with content spanning
Third list item
- More creativity
- Even more creativity
Whenever accessibility is really hard, it’s usually just an over-complex component and should be dumped anyway.Heydon Pickering
As my grandma used to say
Remember, there is a .
proper HTML element for when one wants to quote inline
Code & User Input
By default, code blocks work well but are rather limited compared to what we see in our text editors. It would be nice to have automatic line numbers. Maybe this can be done with CSS counters and by wrapping each line of code in its own
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
A figures’ caption should have a slightly smaller text size than regular text.