Introducing Fluent FTW (For The Web)
An open source project to bring Microsoft’s Fluent Design System to the web
Over the past few years I have found myself recreating Microsoft’s various design styles for multiple websites and as the company has consolidated its look around the Fluent Design System so the need for different UIs has reduced. This has now got to a point where I am often just recreating the same Fluent look (often involving copying from one project to another, urgh). This is obviously not a good way to work and I’ve wanted to create something where the work is done only once and usable on any site. On top of that I have often been asked how I have implemented the Fluent look on the web, such as on wallpaperhub.app, and whether I can share the CSS for it.
Today I am pleased to say that there is now a way to implement the Fluent Design System on the web, it’s called Fluent FTW (For The Web). It allows anyone to bring the Fluent look to their website by just adding a CSS and JS file. (Importantly for me this means I have to do less copying and pasting of code for my sites.)
But, I wasn’t content with this being “my” project, this is just the start and there’s so much to do in order to bring the full look of Fluent to the web, so I have open sourced this and have it hosted on GitHub so anyone can help contribute to the project.
Check out a demo of Fluent FTW right now. You can also see some elements of Fluent FTW on the reently updated WallpaperHub and this year’s Build Bingo.
Features
I bet you’re keen to know what looks are supported within Fluent FTW so let’s get straight to it.
- Buttons
Buttons can be easily styled to look like Fluent ones, there’s a number of options available such as primary and secondary button types and different effects for the button shape and hover effects
- Reveal
This affect can be applied to buttons and gives the reveal/light effect on the border of the button when the mouse is close to it - Drop Shadow
You can add 6 different depths to elements on the page using drop shadow effects - Acrylic
This effect adds bluring to elements along with a slight noise to emulate the Fluent Design System’s effect on Windows. There are 3 thicknesses to the effect and a ligth and dark version
- Parallax
When scrolling a page you can have an element move slower than the rest of the content. The speed of the parallax effect can be customised to offer a better look
Check out all of the features of Fluent FTW in action on the demo site.
Fluent FTW currently consists of a CSS and a JS file that combined can offer all the effects above. The plan is to bring Fluent FTW to frameworks and platforms so it can be easily integrated where needed such as Bootstrap, Wordpress, etc.
Get Involved
If you know your way around front end web technologies, have a keen interest in the Fluent Design System or want to learn about web design then please get involved. The GitHub repo is ready for Pull Requests to be made to bring more of the Fluent we love to the web whether it be more elements of the Design System or offering Fluent FTW in more web frameworks.
The CSS is written in SASS and the JavaScript functionality is written in plain vanilla JS.
As ever I am keen to know your thoughts on this so please let me know your feedback about the project; what aspects of Fluent are missing? What frameworks should be supported? Have suggestions for running an open source project on GitHub? Then please let get in touch with me on Twitter.
