Colophon #

This website was built using 11ty and is hosted on Netlify. Code is stored in a GitHub repository.

11ty is a pretty barebones and unopinionated static site generator where you can choose your own templating language, CSS flavor, etc. I ended up choosing:

• Tailwind CSS - utility-first CSS framework
• Alpine.js - a lightweight JS framework
• Nunjucks - JavaScript templating engine, very popular choice with 11ty
• markdown-it - Markdown engine that you can extend with plugins (to support things like footnotes, subscript, superscript, containers, automatic anchors to headers, etc.)
• PostCSS - for processing my CSS files (again, with plenty of plugins, I can use import statements, nested attributes, automatic prefixes and more right in my CSS files).

Technical considerations #

With Tailwind I had a choice between using only CSS classes and styling all the elements directly in the HTML (I could probably get away without writing a single CSS file) or combining the CSS files and Tailwind classes. Same with Alpine.js - I could write onclick events using plain JavaScript or add Alpine attributes directly in the HTML. I've decided to make a formal distinction when I use each approach:

Tailwind vs CSS files #

I could add tailwind classes to the HTML files and completely skip writing CSS files. Or write everything in CSS files and then Tailwind is kind of useless. How about a middle-ground?

• Design elements with BEM in mind (here is a nice cheat-sheet I've been using). Write CSS for those elements in the CSS files. Use .pcss extension to indicate that they will be processed by PostCSS.
• When writing the CSS files, use @apply rules from Tailwind when possible. But only use generic rules! @apply p-2 is fine, but @apply p-[117px] is not. Write padding: 117px; instead.
• Use tailwind classes directly in the HTML on those elements where it doesn't make sense to make a separate BEM class. E.g. to add a small padding to some random element, etc. There probably won't be many cases like this and that's fine.