Today V5 of Dashron.com went live. Here are the details.
As you can see, the new Dashron V5 design was heavily inspired by synthwave visuals. I dug through band posters, pamphlets, and other design examples and came up with this. The theme sometimes sacrifices aesthetics for readability, but overall I think I achieved the vibe I was looking for.
Some additional design notes:
- There are no images in this design. Instead of images I use SVGs, and usually write them by hand.
- The background is a modified version of this codepen. I felt the scroll was too distracting, so I slowed it down.
- The “Dashron” font is called “Razor”, and is found here. The neon glow css is from this article.
- The rest of the fonts are called “Poppins” and found here. I like how the bold header gives old VHS case vibes.
- I got help making the gradients from CSS Gradient.
The authoring flow remains the same as described in Dashron.com V4. I write content in WordPress and it’s automatically picked up by the website.
Roads still powers the backend, but
roads-starter is out of the picture. I wanted to take a different approach, and did so as a part of my side project, Dungeon Dashboard. I hope to release my changes at some point in the future. I felt the organization of
roads-starter didn’t fit my needs with maintaining multiple sites.
First, I adore JSX.
- This entire project is typescript, so having type hints/safety all the way through to the HTML is wonderful.
- Having clear imports for components makes debugging far easier than tracking down template files based on convention, or partial file paths.
- I prefer to put rendering logic into the template rather than the controllers, keeping it in the same file as the html and far away from the data retrieval. This is difficult with handlebars, as it has a limited amount of functionality. With React, I can transform anything into HTML, any way I want.
Second, I am using front end React on Dungeon Dashboard, so I kept it here for simplicity sake.
V4 used Bulma.io for rendering, but I found it far too limiting. For Dungeon Dashboard I moved to using Tailwind & Daisy. Tailwind is a class-based CSS system, that is far closer to CSS than most frameworks. It has been particularly impressive for a handful of reasons:
- In limiting my choices, it improves my consistency. e.g.
9xl, which maps to a change rems. I don’t come up with rems on a whim.
- It groups CSS in an opinionated way that will improve my design. e.g.
line-heightfor better readability.
- Tailwind makes long, gross class lists. This is often seen as a negative, but in the world of React it encourages you to rethink your component organization for the better. I am now more encouraged to think about which parts of my site are reusable, and which should be split into their own component.
- Just as I like my rendering logic closer to my templates, having my CSS closer to my HTML has reduced interruptions, as I no longer have to jump between many files at once for minor tweaks.
- Responsive design is a joy in Tailwind. It’s trivial to indicate that certain styles only apply in certain sizes.
- Tailwind lets me break out of their restrictions any time I need without losing access to their responsive design patterns. It really lets me move faster.
On top of this I use Daisy, a css component library built specifically to work with Tailwind. Daisy allows me to easily pull in well designed UI components without having to depend on huge react component libraries. I just throw in the proper classes and everything looks great.
Overall, I’m very happy with the new setup. Please reach out if you have any questions or interest in the work I’m doing!