Fluent Design System is the Microsoft new design language for Windows 10 and UWP apps
Questions tagged [fluent-design]
38 questions
44
votes
4 answers
CSS-only Acrylic Material from Fluent Design System
With the advent of Microsoft's Fluent Design System and the propagation of the new Acrylic Material around the Windows ecosystem, I thought it would be great to use it in some Web layouts.
Acoording to the spec, the composition of an acrylic layer…
Erick Petrucelli
- 14,386
- 8
- 64
- 84
31
votes
2 answers
How to use Acrylic Accent in Windows 10 Creators Update?
I can't find any detailed document to use Acrylic Accent (CreateBackdropBrush). I found a post in StackOverflow which is somewhat useful but it doesn't help to get started. So please create a detailed answer to this post so that everyone can…
Vijay Nirmal
- 5,239
- 4
- 26
- 59
29
votes
7 answers
Microsoft Fluent Design for Web (CSS framework)
As Microsoft recently released a design system called "Fluent Design", is it appropriate to apply it on web design?
Most of my searching has been for all Microsoft platforms, C# app, F# etc..
I have never seen anything regarding in web design.
StanLe3
- 360
- 1
- 3
- 11
7
votes
4 answers
Acrylic material in win32 app
Microsoft recently revealed their new "fluent" design langauge, and one part of it is the "acrylic" material. This effect makes an element transparent and blurs the background. It can either be applied to a window, such that parts of underlying…
jdm
- 9,470
- 12
- 58
- 110
6
votes
1 answer
Fluent Design in Xamarin.Forms
Fluent design by Microsoft are basically guidelines to design apps but they also include code snippets and tools on how to achieve them in UWP apps. A lot of tools and snippets are available for UWP but I cannot find anything for Xamarin.Forms.
How…
ahmad saleem
- 93
- 7
4
votes
1 answer
How to get a blurred translucent QML Window (similar to Fluent Design guidelines) on Windows 10?
I would like to get a semi-transparent blurred window in QML on Windows 10 similar to the Fluent Design guidelines (example). I know you can make a transparent window:
Window{
visible: true
color: "transparent"
}
but this doesn't achieve…
reckless
- 741
- 12
- 53
3
votes
3 answers
Fluent Design card lift effect
I want to add the card lift effect to my bootstrap cards with fluent design styles on hover. You can see what I mean on microsoft design website.
Here's what I tried, but there is something missing and I cannot quite grab it.
I tried:
.card {
…
user9823616
2
votes
0 answers
How to properly add Microsoft Fluent Design colors to Maui application?
I was thinking how to add Microsoft Fluent Design colors to a Maui Application.
What I think it should be is a list like at https://github.com/albi005/MaterialColorUtilities at (optional) Add placeholders to your App.xaml for suggestions when…
Veksi
- 3,556
- 3
- 30
- 69
2
votes
0 answers
How to achieve oversaturated effect with flutter
I'm creating an flutter widget that adds an acrylic background accodring to the fluent spec. According to that page there are a few layers other than the blurred image in the acrylic effect, but, given that this could be very expensive I just wish…
Rolando Urquiza
- 1,404
- 3
- 17
- 29
2
votes
1 answer
CSS-only and layout friendly Reveal Focus from Fluent Design System
In the Reveal focus docs its:
But, as the docs
Reveal focus increases the size of the focus visual, which might cause issues with your UI layout. In some cases, you'll want to customize the Reveal focus effect to optimize it for your app.
How…
wscourge
- 10,657
- 14
- 59
- 80
2
votes
1 answer
UWP setting themeresource acrylic in code behind
I have a UWP app and I want to upgrade it to fluent design system. I have created a new project using Windows Template Studio and my navigation is with Pivot.
Now I want to put acrylic background on the header of the pivot. as mentioned in the…
Muhammad Touseef
- 4,357
- 4
- 31
- 75
1
vote
0 answers
Fluentd: How to use env variable in record config
I have a container which has a env variable set:
env['POD_NAME'] = 'some-pod-name'
Now, I want to use it while setting a json object in record:
@type openmetrics
namespace ns1
resourceGroup rg1
…
Marcelo BD
- 229
- 3
- 8
1
vote
1 answer
How could one to merge resource dictionaries either dynamically or in compile time?
Let's say we have a resource dictionary defined like
Veksi
- 3,556
- 3
- 30
- 69
1
vote
1 answer
Implementing Fluent Design's reveal highlight effect in JavaFX
I'd like to implement the reveal highlight effect for JavaFX that can be seen in various parts of Windows 10, particularly the Settings and Calculator apps.
The effect seems to be composed for two parts, a border highlight (seen here) and a…
White Autumn
- 33
- 1
- 6
1
vote
0 answers
Fluentd copy output plugin to https server
I am trying to copy event to https server. I have a list of ports and IPs and I need that FluentD will try sending the event to the first IP it succeeded in sending and only that IP.
what should be the type inside when sending copy to https…
yunger
- 27
- 4