If you’re like me, trying to use one of the available UI design frameworks provided by Microsoft can be a challenging experience. From Metro to Office UI Fabric to Fluent UI, it’s hard to keep up with, follow, and maintain Microsoft’s Fluent Design System in your custom apps. Microsoft also created React controls that implement Fluent UI, known as Fluent UI React which have had their own challenging track record.
Most of us want to use what Microsoft provides so our projects look like the rest of the Microsoft products like SharePoint, Microsoft Teams and Office. This simplifies adoption with your users as they’re already familiar with the hosting apps. While the promise of Fluent UI and it’s predecessors is awesome, the implementation has been challenging.
I’ve seen enough issues submitted by the community where the Fluent UI team has made a breaking change in a version that wasn’t obvious and either created some weird UX bug or completely broke their solutions. Remember the whole debacle with the Office UI Fabric JavaScript package? Yeah… me too…
But wait, there are more “solutions” coming…
Microsoft isn’t done yet. We’re now starting to see a new pitch from Microsoft, FAST, that’s billed as an adaptive UI system complete with utilities and tools.
Yes. You read that right… another UI design solution from Microsoft…
Apparently we’re supposed to trust they got it right this time after the Metro ➡️ Office UI Fabric React ➡️ Fluent UI React experience over the last decade+?
Sorry… but you’ll have to forgive me if I’m skeptical of this simply due to their track record. I’ll keep an eye out for a session at the upcoming Microsoft Build conference, but until then, I’m not rushing to adopt another UX framework from Microsoft.
So, what do I do?
Personally, I’ve had so many issues with what Microsoft keeps providing & the related projects so much, I stopped using them in my projects.
My preference has been to use TailwindCSS & the TailwindUI ready-made HTML+CSS (and minimal JavaScript for interactive controls) in my projects. The downside to this approach is that the TailwindCSS stuff doesn’t exactly match the Fluent Design System so my projects aren’t an exact match.
But the advantage is that it’s just pure CSS & HTML. In fact, that’s what I used to build this website. When I need a little interactivity in a control, such as the global top navigation menu, I’ve used the lightweight Alpine.js library.
But… the story is evolving…
A change is in the air: hTWOo
A few weeks ago, my friend Stefan Bauer shared a preview of a project he was working on. Stefan has been my go-to person for UX stuff when it comes to understanding the nuances when it comes to Office UI Fabric & Fluent with SharePoint.
Today, Stefan announced what he’s been working on: hTWOo!
The one liner from Stefan’s tweet hits straight to the point why you should pay attention to it: “hTWOo is a Fluent Design implementation and documentation in HTML and CSS only - No Framework required”
That’s exactly why I switched, and fell in love with, TailwindCSS & TailwindUI!
Except this time, it’s implementing the Fluent Design System & therefore, addresses the biggest drawback I’ve had with Tailwind: my stuff doesn’t exactly match SharePoint or Microsoft Teams.
Stefan’s blog post, as well as the hTWOo project site, is complete with documentation, samples (including no-JS framework & React samples), and the published NPMJS package @n8d/htwoo-core.
If you’ve been frustrated (like me) with the Microsoft UX story, I encourage you to read his post & learn more about the project: hTWOo UI launched – Fluent Design in HTML and CSS. I’m certainly looking forward to trying this out in my projects!
Learn more about hTWOo from the author, Stefan Bauer, in this recent podcast interview on the Microsoft Cloud Show.