This blog design has just gotten an upgrade. The first design iteration after getting back to blogging in January 2020. Visually I wanted to improve and extend the minimalistic design I’ve been using. So I stick with the same color palette, but added new elements and I tried to make things more appealing. At the same time I implement some cool new features, like the dark mode. Those design elements, these vintage household appliances flying around here and there are as old as they look.
Before & After
PicoCSS
Earlier this year I discovered PicoCSS by Lucas Larroche. A well structured, modern and class-less approach to CSS frameworks. Ever since Bootstrap (and many others) came along, I was convinced that CSS frameworks are the future. They turned into a de-facto standard. While, technically speaking PicoCSS is a CSS framework as well, it does not require you to learn a frameworks naming conventions for its classes because it accomplishes the most essential things you need for a CSS layout mostly without classes. All positioning, gaps, columns, etc. can be accomplished and controlled with plain CSS. Through the use of CSS variables, things are consistent throughout the whole site.
And that is actually a big deal, because it speeds up the process of writing your HTML templates. In the past I was convinced that it’s impossible to create a smaller, cleaner, leaner, neater HTML than Bootstrap. Wherever I had introduced Bootstrap, the resulting HTML and CSS was significantly smaller in size, than any custom made layout.
Well, PicoCSS just proved me wrong. You end up with HTML markup that is easier to read but nonetheless very semantic. Pure HTML without the presentational classes. The two examples from the PicoCSS website illustrate this very well:
<form class="form form-modifier margin padding align">
<div class="input-wrapper input-wrapper-modifier margin padding">
<input type="text" class="input input-type-modifier input-style-modifier input-size-modifier">
</div>
<button type="submit" class="button button-style-modifier button-size-modifier action-trigger margin padding">
Action
</button>
</form>Looks familiar, right? Now with PicoCSS HTML will look more like this:
<form>
<input type="text">
<button type="submit">Action</button>
</form>An easy decision, so I went for the second option. Besides the visual upgrade for this blog, I also noticed that I had missed quite some CSS advancements over the last years. So working with PicoCSS has been educational and fun â the whole WordPress experience not so much. While I’ll be happy with WordPress when it comes to writing and publishing articles, I really dislike the direction WordPress has taken in regards to its themes.
If I wanted a Site-Builder, I would go to GoDaddy, Squarespace, Wix.com or the likes.
Why WordPress, why? This ‘gutenbergish’ full site editing looks nice in theory, it might even be an improvement but do I really need to relearn theming from scratch?
Not a smart decision if you ask me. In the past beginners were able to tinker with classic themes â which is one of the reasons WordPress has been so successful and popular. If you need to invest a lot of time, even be a developer in order to create block themes, then even those developers might be better off using a more developer-friendly platform. Maybe a CMS that comes with a standardised templating engines like let’s say Twig?
Nope. A classic theme it is.
At the beginning I really wanted to use “the latest and greatest” to make this theme, but it simply don’t have the heart to write theme files, that consist of HTML comments to control my theme’s layout and behaviour. It’s like the return of Internet Explorers’ conditional comments. The good news is, that WordPress doesn’t force you to use a block theme (yet).
I ended up doing this refresh with a so-called “classic theme” â as this gives me some of the editing comfort Gutenberg brings, but without having to go all FSE which I don’t need.
