Developing a cute theme is an occasion to get the UI you dream about 💫
This first heading sounds like a ted talk conference 🤐 but that's what I've been through.
For some times now, my community has a good-looking custom css that I made step by step. At a certain stage, I even published it as a style resource on discuss (it's outdated). I've been happy for a while with this forum skin, but I regularly notice some inconsistencies and some tweaks it would need which would be harder to write than on a simple .less page. So what's wrong with my actual custom .less ?
- as I made it step by step while discovering Flarum, it's a stacking of hard-to-read and bad-organized code. Some parts are redundant
- it doesn't use the power of
less variables and functions that I discovered more recently. When they are wise used, those tricks save you a lot of time and make your theme easily consistent
- it's way too tricky (sometimes impossible) to customize in .less some style behavior which are dynamically manipulated by .js code
So recently, I started to think about a real theme extension, which would cherry pick parts of my actual stylesheet, but 1) with a cleaner and proper code organization and 2) with a lot of new UI features. When I saw the awesome SychO's Asirem theme and the really cool Yannis's Confix theme, I told myself it was time to move ahead on this project: the Flarum community deserves plenty of beautiful themes, and my ideas may fit with other users desires.
How I began to play with the Flarum frontend 🐤
Having an idea is nice but how to begin to work when you're:
- not a frontend developer
- not a real developer at all
- not used to the Flarum code
- not comfortable with js
Well, if you enjoy to tinker with css, if you're patient, if you're not afraid to learn some basic js syntax (and to RTFM a lot), you can easily begin to play with the Flarum frontend.
Some weeks ago, I struggled with a design problem into the admin panel: when you have a lot of groups/tags permissions, it can be very hard to navigate into the permission grid system (if you know what i'm talking about, you're like "amen to that, dude"). Anyway, even if I knew there's a wider issue about it on the long-term road-map of Flarum devs, it seemed easy to develop a temporary fix: why not just stick the table headers? I'm far from being a professional or expert on development but I'm a handyman and I like to play with less/css, so I told myself "hey, isn't it a great first occasion to contribute to Flarum and create a real dev environment on my machine?" Well, it was a wonderful idea: I worked a little on this, I sent a PR which has been reviewed and if all is going well, you should see my little contribution in the next minor version of Flarum. It could have stopped here, but by developing this fix I fell into the Flarum frontend code... woops.
"Flarobe": my theme extension project 🚜
What is this strange name? I imagine you already get the "fla". Concerning the "robe", it's a french word for the animal coat or fur, as well as the french word for a dress. In my organization, all our customized themes (we host other FOSS online tools like Nextcloud) are called "robe".
Main goals
1. Improve the accessibility 👓️
The core dev team isn't ignoring the various accessibility improvements that could be done with Flarum: as you can see there's a lot to come. But until now they had to focus on stable, so in the meantime, we can do a lot of simple customizations to improve our forums. That's the first goal of this theme.
In this project, I'll particularly focus on the color contrasts and on the font size, with a lot of .less, but also a little of .js 🥴
2. Put the tags on the dancefloor 🏷️
The "tags" bundled extension is the major feature which brang my organization to Flarum. I could write an entire dissertation about the "we-can-do-absolutely-whatever-we-want-with-tags". So I want my theme give the maximum visibility to tags. This is more a UX concern, but for example, I'd like primary/child/seconday tags to be way better differentiate. I already talked about that here, but there may be more tricks I could try.
3. Have some fun 🖌️
A theme remains a theme: I want it to be as generic as possible, so that everyone could adopt it, but I want my personal touch.
Method
Maybe you'll find my working method odd, but here is how I decided to work for this extension: I use my flarum-core and flarum-tags dev environments to apply my patch directly onto these projects, with a special branch. In parallel, I have a repository for my future extension, in which I put the fresh code when it's ready on the flarum local branches. It's a kind of big cherry-picking, but it implies a final step: convert the js patches to extension code, which is a little different.
I find this method very easy to test immediately all kind of modifications and additions to the code. Furthermore, it will allow me to potentially detect some parts of my patches which could be real improvements to the Flarum code. In other words, maybe some customizations I'm doing will me converted later into pull requests 😀
Roadmap
In the coming posts, I'll describe some steps I made and maybe I'll ask for some advices to progress. And of course, I'll publish screenshots 🔥
...ok, here is one
