Biblioteca CSS/JS do estilo do Windows 11 - Fluent Design
Boa noite!
Desde o lançamento do Windows 11, algo que me chamou muita atenção é a UI/tema dele, algo que achei muito bonito, organizado e fluente, então quis aplicar em meus projetos.
Felizmente essa linguagem de design é de código aberto, mas no entanto, as libs só estão para C#, XAML ou React. Eu queria algo para HTML/CSS "puro", mas oficialmente não tem nada disso.
Então eu criei minha própria biblioteca CSS do Microsoft Fluent Design, e você pode testar ela por aqui.
O código fonte está em SCSS, há algumas coisas em Javascript para exibir as janelas modal e contextuais. Usei o zbundler para empacotar tudo.
O repositório está aqui. Fique a vontade para clonar e usar em seu projeto.
Alguns detalhes dessa lib:
- O Fluent Design não é de minha autoria, eu apenas tentei replicar o máximo em CSS.
- Não funciona muito bem no Firefox. O motivo é que uso bastante o seletor
:has(), o qual o Firefox não suporta muito bem por ora. - Ele não é compatível com telas pequenas. Até o momento eu foquei em fazer para desktop primeiro, e então eu pensarei em fazer algo otimizado para mobile/tables também.
- Os arquivos prontos para distribuição estão no repositório.