Executando verificação de segurança...
3
cyp
1 min de leitura ·

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.
Carregando publicação patrocinada...
1
1
1
GustavoBorges

off topic

Cara, não pude deixar de fuçar no site principal da principum, muito massa!

Percebi (com Wappalyzer) que não utiliza nenhum framework nesse site, é isso mesmo? Até desconfiei por querer converter a biblioteca do Microsft Fluent Design para HTML/CSS haha

Achei muito interessante que, apesar de simples e minimalista (que nem de longe é algo ruim), entrega muita informação e apenas o que é relevante.

Parabéns

1
cyp
  • Autor
    Autor

Fico contente com seu comentário.

De fato, o site da Project Principium é focado no que interessa, mas ainda mantendo a identidade visual da empresa. Ele foi inteiramente feito apenas com HTML/CSS/JS.

Nenhum framework ou lib foi utilizada. Para o roteamento client-side, usei o Planifolia, um package que eu mesmo fiz.

Novamente, obrigado pelo elogio!

1
1
1
cyp
  • Autor
    Autor

Obrigado pelo elogio.

Levou algum tempo, mas foi feito aos poucos. Não consigo mensurar exatamente quanto tempo, mas maior parte do tempo levou para entender como funcionava de fato toda a composição do estilo.

Foram prints, coleta de cores, leitura de documentações, e até tudo isso para aplicar nos estilos.

Além da arquitetura, a parte que pensava "como o desenvolvedor vai usar" também influenciava. Tentei fazer algo mais fácil de implementar, manter e sustentar.

Todo esse trabalho exige algum tempo e dedicação, é verdade. Eu comecei o projeto faz 2 meses, e foram vários rascunhos até chegar onde tá.

E tenho a impressão que tá longe de acabar.

1
0
1
0
0
0
Conteúdo excluído
1
cyp
  • Autor
    Autor

Ainda nada público. Pretendo fazer alguns boilerplates para mostrar como pode ficar.

Tem um projeto em andamento que está experimentando essa interface de usuário. Se tudo sair nos conformes, poderei publicar prévias aqui.

Antes disso, pretendo expandir ele para Mobile antes.

De qualquer forma, obrigado pelo elogio!

Conteúdo excluído
1
cyp
  • Autor
    Autor

Obrigado!

As maiores limitações podem ser corrigidas ao decorrer do tempo, que é adaptar a mais telas e talvez criar um tema escuro.

Era um objetivo tornar compatível para não usar o :has, mas é reestruturar toda a lib, e é difícil pensar nisso para um projeto tão pequeno.