web-dev-qa-db-fra.com

Microsoft Fluent Design for Web (structure CSS)

Comme Microsoft a récemment publié un système de conception appelé "Fluent Design", est-il approprié de l'appliquer à la conception Web?

La plupart de mes recherches ont été effectuées sur toutes les plateformes Microsoft, les applications C #, F #, etc. Je n'ai jamais rien vu concernant la conception Web.

22
Andy Lim

Consultez Microsoft Web Framework pour obtenir des détails sur les composants, la structure HTML et les CSS que vous utiliseriez pour respecter les principes de conception Web de Microsoft.

9
Mark Cooper

Je ne fais que citer Microsoft ici.

Cela convient parfaitement à la conception de sites Web. Puisque ce ne sont que des principes et ne sont spécifiques à aucune plate-forme. Donc, si vous êtes un développeur Web et aimez la façon de penser de Microsoft. il est tout à fait possible de créer un cadre d’interface Web avec ces principes.

Veuillez vérifier ceci vidéo dans lequel votre question a été discutée lors de la session de questions/réponses (22h00).

5
Umamaheswaran

il suffit de copier-coller à partir du bas de la page d'accueil de la MWF .

Ce site est réservé aux employés de Microsoft et aux fournisseurs autorisés. Aucun matériel ou code de ce site ne peut être utilisé sur des sites Web autres que Microsoft. En accédant à ce site, vous confirmez que vous êtes un employé de Microsoft ou un fournisseur autorisé travaillant pour le compte de Microsoft. Vous acceptez en outre que le matériel et le code constituent la propriété intellectuelle de Microsoft, qu’ils ne peuvent être utilisés que sur des sites Web gérés par Microsoft et soient soumis aux accords en vigueur régissant votre contrat d’emploi ou de fournisseur avec Microsoft.

5
arisw

Découvrez le cadre Fluent Kit .

Il s’agit d’une extension Fluent Design de la version actuelle Bootstrap, utilisant jQuery, ce qui devrait donc constituer un point de départ facile pour quiconque, vraiment. En outre, c’est très bien documenté et le "travail en cours", vous pouvez donc vous attendre à d'autres fonctionnalités au fur et à mesure que la conception se développe.


Mise à jour importante: Le kit Fluent, ainsi que l’ensemble du projet Nespero est fermé .

4
wscourge

Mise à jour de juillet 2019: Microsoft a publié le framework Fluent sous le nom d’Interface Fabric qui inclut la partie Web ici

Réponse courte, oui La conception fluide est adaptée au Web, mais il n’existe toujours pas de bibliothèque de composants accessible au public.

La mention ci-dessus getmwf.com (get Microsoft Web Framework) est obsolète. Plus récent Microsoft.com/mwf est destiné à un usage interne.

Le très nouveau fluentweb.com est également marqué par restricted to use by Microsoft employees and authorized vendors mais open-source tutoriel pour un Web fluide indique ce qui suit:

[..] comment importer des composants et des styles de Fluent for Web (les packages sont réservés aux employés Microsoft, mais ils deviendront bientôt une source ouverte).

Peut-être un jour. En attendant, vérifiez Office Fabric

4
Jurijs Kovzels

Vous pouvez utiliser cette bibliothèque pour l'effet Reveal dans Fluent Design System. Et vous devez attendre le backdrop-filter CSS pris en charge pour l’effet de flou d’arrière-plan.

https://github.com/d2phap/fluent-reveal-effect

enter image description here

4
Phap Duong Dieu

Mise à jour : la conception fluide prend désormais en charge le Web, Android et IOS. https://www.Microsoft .com/design/fluent/# /

Mise à jour : on peut trouver un cadre de composant de réaction tiers de haute qualité appelé react-uwp ici

Mise à jour: le nouveau site Web est à https://fluentweb.com/

Mise à jour: le lien est mort, et https://getmwf.com ne mentionne plus la conception fluide.

Microsoft dispose d'une infrastructure Web pour ses propres employés et fournisseurs.

On dirait qu'ils introduisent des composants de conception fluides dans ce cadre.

https://fluent.getmwf.com/

3
rony l