Hi all 👋
We're starting to pick up the pace a bit on the Funkwhale UI system implementation. @mjourdan has done a lot of work and provided some lovely looking designs, and myself and @gcrk have taken turns implementing different parts of it.
When we started out, we were shipping the library as an extension of Bulma which gave us some really nice presets to work with. However, the more we worked with it the more limiting we found it, particularly with regards to class overrides. Since then we've scrapped Bulma and written everything in SCSS.
Recently, I've started toying with the idea of using Tailwind. This is a utility driven framework for working with CSS. In Tailwind, every CSS rule is a class.
Advantages
Tailwind enables you to build and expand your own classes and themes quite easily and use modifiers for responsiveness and dark theming. For example, we can define all of the Funkwhale UI buttons easily:
@layer components {
.funkwhale-button {
@apply bg-transparent h-[34px] leading-4 text-base p-2 rounded-lg border border-gray-600 text-gray-600 min-w-[136px] font-black justify-center disabled:opacity-100 disabled:font-normal disabled:text-black disabled:pointer-events-none focus:shadow-none;
}
/* Primary buttons */
.primary.button {
@apply funkwhale-button border-0 bg-primary text-white disabled:bg-blue-100 disabled:text-blue-900 hover:bg-blue-600 active:bg-blue-700;
}
/* Secondary buttons */
.secondary.button {
@apply funkwhale-button border-0 bg-gray-200 disabled:bg-gray-100 disabled:text-gray-800 hover:bg-gray-300 active:bg-gray-400;
}
/* Destructive buttons */
.dangerous.button {
@apply funkwhale-button border-0 bg-destructive text-white disabled:bg-red-300 disabled:text-blue-900 hover:bg-red-600 active:bg-red-700;
}
.button.centered {
@apply funkwhale-button block m-[0_auto];
}
}
Shipping Tailwind also gives us a great deal of flexibility with elements we don't want to write whole classes for. We can ship our components plus Tailwind's built-in classes to easily write in one-off styles that we aren't reusing For example, the Funkwhale blog's sidebar looks like this currently:
<aside>…</aside>
aside {
font-size: 14px;
width: 220px;
height: 100%;
position: fixed;
top: 0;
left: 0;
padding: 30px;
background: #00638c;
color: white;
box-shadow: 0 0 3px black;
text-align: center;
padding-top: 8%;
background-size: cover;
box-sizing: content-box;
}
With Tailwind, you would write these in as classes instead:
<aside class="text-sm w-[220px] h-full fixed top-0 left-0 p-[30px] bg-blue-700 text-white shadow-[0 0 3px black] text-center pt-[8%] bg-cover box-content">…</aside>
Drawbacks
As discussed with @gcrk, Tailwind is not easily readable even for people who know CSS. While a lot of contributors will have some familiarity with SCSS/CSS, Tailwind is very specific in how it approaches things and it introduces a learning curve that we don't have with SCSS. Tailwind is also another dependency that we need to keep up-to-date with, so it may not be ideal from that perspective.
I'd be interested to hear any thoughts people might have about the best approach going forward. I've already recreated our current UI efforts in Tailwind if you want to check it out and get a feel for how it works. You can see the preview here.