Since the beginning of 2013, I have been using the same blog theme with a couple of small changes that I did over the years. Most of the time, I would change the primary colors, but that was all. Why would you change something which works fine?
When I moved from WordPress to a static site, at first, I thought it would be an excellent time to redo the design, but the migration took a bit longer, so I just ported the design to Hugo.
A couple of weeks ago, I started reading more about Tailwind CSS. There are many people making noise about it, so it got my attention as I learn new technologies, frameworks, or tools by creating use cases for them and start implementing. I wanted to give it a try to make myself a new design.
After seven years, my blog finally has a new design, which is, in my opinion, lighter, cleaner, and minimal.
Changes to the design
As changing the design is also an excellent time to get rid of some old code, I could finally get rid of a very old jQuery and AngularJS app/version.
jQuery was still a big thing when I started using the theme. I used it for the mobile menu and some other functionalities.
I used AngularJS for my custom search experience in combination with Azure Search.
In the new theme, I wrote everything from scratch with TypeScript and React. I only use React for the custom search experience.
Website theme over the years
Here are a couple of screenshots of the history of the theme on my blog.
2011
InfoFunny to see that I was already using a card view at that time.
2013
2014
2016
2017
2018
2019
2020
Comparison
Nothing is better than a comparison side by side. That makes it easier to see all the differences.
Something about Tailwind
Tailwind is a utility-first CSS framework. Which allows you to write less CSS, but more CSS classes in HTML. At first, this feels a bit weird, but it is very powerful.
The most significant difference is that the framework does not have any predesigned components like most other frameworks. Using this framework means you have total freedom and control over your design and might make it harder to start.
InfoThe Tailwind team is currently working on a Tailwind UI website (in beta) to find sample UI elements.
My first experiences were good, but the HTML tags can quickly get overloaded with CSS class names. Luckily you can also add CSS the regular way and reuse the CSS from Tailwind with @apply and specifying the class name.
Feedback
If you spot an issue or have feedback on the theme, feel free to provide it, the comments are open.