I recently completed a pretty slick refresh of my Final Fantasy XIV PVP series tracker. It’s a simple, but useful tool to help you figure out what is the most optimal way to grind out your PVP series. If you’re a procrastinator, but really want those sweet sweet PVP rewards, it can really help you mindfully track your progress. I really wanted to revamp the look and feel of the page, but well, frontend web design has never been my strong suit.
I’m not a front-end web designer by any stretch. Backend code, functional code, I’m your dude. Frontend design? That’s a world that seems filled with folks recommending you use highly complex toolchains littered with Node.js and gigabytes of random JavaScript dependencies. That’s a world I’ve spent very little time in though. Onboarding all of that in order to then have the “pleasure” of now learning how to build with these tools feels so antithetical to my needs though. I cut my teeth on OG web design, in an era pre-CSS, and pined for a solution that took advantage of the modern web’s look and feel, but didn’t require me to learn a whole new ecosystem.
Trolling the comments of Hacker News, as I’m wont to do, I came across this wonderful collection of CSS frameworks, in the vein of the many “Awesome Repos”. Awesome CSS Frameworks, which catalogs everything from the massive frameworks like Bootstrap and React, classless frameworks which allow you to focus on simply writing HTML, and even some silly ones like NES.css, which is a CSS framework that mimics the look and feel of the old NES console.
Originally, I built the PVP series tracker with PSone.css, which gave the app a retro “Final Fantasy 7”-esque appearance. However, the novelty of looking like a popular entry in the FF series wore off quickly. Users complained that the page wasn’t super easy to read, and PSone.css hadn’t received a lot of updates, which required me to fork it and apply hacks to keep it working on modern systems. I decided to do a refresh. Originally, I was going to turn to Tailwind CSS, as I really do like the way its components look, but see my previous points about having to onboard a huge toolchain. I didn’t want to use the classless frameworks, as I wanted to have a little more control over the look and feel. After trying out a few of the frameworks in the “Very Lightweight” category, I found that I really liked Chota, which is a very small, very simple CSS framework that still gives you a lot of control over the look and feel of your site.
I had mused with a friend quite recently that I really liked the newer “Clear Blue” UI styling in FFXIV, and so I decided to give replicating that a shot. Chota made writing CSS overrides a breeze, and thanks to wonderful research from folks also replciating this UI style, a bit of researching on my own, and the sum total of my awful CSS hacking I’ve done over the years, I was able to make a surprisingly good replica of the FFXIV Clear Blue UI for the site!
All this to say, the Awesome CSS Frameworks repo is a great resource for folks like me who want to keep tabs on many of the CSS frameworks out there. More importantly, if you’re daunted by the idea of having to onboard a huge toolchain to get started with modern web design, there are loads of frameworks out there for you to choose. Frameworks that range from highly opinionated and inflexible, to lightweight and easily hackable, and yes, the big feature-rich options that you hear everyone talking about. Not everyone needs the entire box of Legos though, sometimes you need a good kit with good instructions, and maybe a few extra bits to make it your own.