My post drafting software (Draught, which I built specifically to write this blog) lets me write the posts in Markdown and converts them to HTML. As such, I want to support a decent chunk of Markdown, including obviously a main heading and body text, but also:

• ordered and unordered lists,
• block quotes,
• inline and block code snippets,
• and inline formatting like bold, italics, and strikethrough.

This entire website—the content, the HTML, the CSS, and the little JavaScript (which is only in the applets like Draught, not in any of the content pages)—was hand-written by me. Well, I just said that Draught generates the HTML, but I wrote the template and the conversion logic, so I have total control of it. I try to use semantic HTML as best as I understand it, and I use a very simple structure and layout that hopefully won’t ever need to be changed.

As for the style, I’m after a simple, clean, minimalist look. I started with a blank style.css and tried to only add to it to solve specific styling issues, and to use as simple a change as possible. I was very much inspired by the famous quote,

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”
 — Antoine de Saint-Exupéry

Not that I’m aiming for perfection, but it’s a nice approach that resonates with me.

My stylesheet is broken down into 6 main sections:

1. Variables,
2. font loading,
3. page layout,
4. font assignment,
5. structural styling,
6. and element styling.

The only thing left to show is a code snippets, so I’ll use them to gripe about code styling. Getting inline code and code blocks to both have a nice solid background with rounded corners is tricky. You can’t just style code because it’s an inline element and it would mean that for code blocks, the background would only render around the text, not the entire block, giving you an awful jagged shape depending on line lengths. However, you can’t style both code and pre because then your padding would double up (you need padding otherwise the background is too tight around the sides of the code). The solution is to style pre, and code but only which are not nested inside pre, like this:

:not(pre) > code, pre {
  background-color: var(--grey);
  border-radius: 4px;
  padding: 0px 4px;
}

As I mentioned in The Fifteenth Standard Philosophy, the projects that we build here are not intended to be best-in-class products that will never be subsequently beaten. The shape of the logo reflects this—it’s a 4×4 grid of squares with the last square missing, already implying a future Sixteenth Standard.

Hopefully also like the projects we build, the logo is simple, minimal, and clean. It looks like something that anybody could have come up with, which it is because I came up with it and I am not a graphic designer. The fact that it can easily be expressed in a few dozen characters of SVG code highlights the extent of my design skills as much as the simplicity of the design.

Fifteenth Standard is a place for me to share these projects as the products that they are but also as the process that went into building them. Inspired by the XKCD comic Standards, Fifteenth Standard embraces the idea that there have been many versions of these same ideas in the past that we learn from and build on, and that there will be many more in the future that will do the same, but there is still value in trying to build something ourselves.

The projects we build will all be open source, and the challenges and learnings we encounter along the way will all be shared in this blog. Often we will take the scenic route on our way, which might mean that we tend to build our own tools rather than leaning on existing ones. While I hope that our process and codebases will be informative to you, I don’t necessarily advocate for this approach as a best practice in all cases.