Javascript Microsoft Fluent Design for Web（CSS 框架）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44171246/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Microsoft Fluent Design for Web (CSS framework)
提问by Andy Lim
As Microsoft recently released a design system called "Fluent Design", is it appropriate to apply it on web design?
微软最近发布了一个名为“Fluent Design”的设计系统，将其应用在网页设计上是否合适？
Most of my searching has been for all Microsoft platforms, C# app, F# etc.. I have never seen anything regarding in web design.
我的大部分搜索都是针对所有 Microsoft 平台、C# 应用程序、F# 等。我从未在网页设计中看到任何相关内容。
采纳答案by Mark Cooper
Take a look at Microsoft Web Frameworkfor details on the components, HTML structure and CSS that you would use to meet Microsoft's web design principles.
请查看Microsoft Web Framework，了解有关用于满足 Microsoft Web 设计原则的组件、HTML 结构和 CSS 的详细信息。
回答by Jurijs Kovzels
April 2020 Updateprimary destination for Fluent Design is Microsoft's Fluent Design System website.
2020 年 4 月更新Fluent Design 的主要目的地是Microsoft 的 Fluent Design System 网站。
For official web frameworks go to github repos:
对于官方 Web 框架，请访问 github repos：
- Fluent UI- A set of React components for building Microsoft web experiences. Good support and big following.
- Office UI Fabricwith only includes grid, typography, icons and utilities. No component and no dependency on React. Not very well maintained.
- Fluent UI- 一组用于构建 Microsoft Web 体验的 React 组件。良好的支持和大量的追随者。
- Office UI Fabric仅包含网格、排版、图标和实用程序。没有组件，也没有对 React 的依赖。不是很好维护。
Some tutorials are available here.
回答by arisw
just copy-paste from the bottom of the MWF homepage.
只需从MWF 主页底部复制粘贴即可。
This site is restricted to use by Microsoft employees and authorized vendors. No materials or code from this site may be used on non-Microsoft websites. By entering this site, you confirm that you are a Microsoft employee or an authorized vendor working on behalf of Microsoft. You further agree that the materials and code constitute Microsoft's intellectual property, are limited for use on Microsoft-operated websites, and are subject to the applicable agreements governing your employment or vendor relationship with Microsoft.
本网站仅限 Microsoft 员工和授权供应商使用。不得在非 Microsoft 网站上使用本网站的任何材料或代码。进入此站点，即表示您确认您是 Microsoft 员工或代表 Microsoft 工作的授权供应商。您进一步同意，材料和代码构成 Microsoft 的知识产权，仅限在 Microsoft 运营的网站上使用，并受管辖您与 Microsoft 的雇佣或供应商关系的适用协议的约束。
回答by Umamaheswaran
I'm just quoting Microsoft here.
我只是在这里引用微软。
It is perfectly relevant to the web design. Since these are just principles and not specific to any platform. So if you are a web developer and like the Microsoft way of thinking. it is perfectly fine to build a Web UI framework around these principles.
它与网页设计完全相关。因为这些只是原则，并不特定于任何平台。因此，如果您是 Web 开发人员并且喜欢 Microsoft 的思维方式。围绕这些原则构建一个 Web UI 框架是非常好的。
Please check out this videoin which your question has been discussed in the Q&A session (22:00).
请查看此视频，其中在问答环节 (22:00) 中讨论了您的问题。
回答by Phap Duong Dieu
You can use this library for Reveal Effect in Fluent Design System.
And you need to wait for the backdrop-filterCSS supported for background blur effect.
您可以将此库用于 Fluent Design System 中的 Reveal Effect。并且您需要等待backdrop-filter背景模糊效果支持的CSS。
https://github.com/d2phap/fluent-reveal-effect
https://github.com/d2phap/fluent-reveal-effect
回答by wscourge
Check out the Fluent Kitframework.
查看Fluent Kit框架。
It is a Fluent Design extension to the current Bootstrap version, using jQuery, so should be an easy starting point for anybody, really. Also, it is very well documentedand the "work in progress", so you can expect further functionalities as the design itself develops.
它是当前 Bootstrap 版本的 Fluent Design 扩展，使用 jQuery，因此对于任何人来说都应该是一个简单的起点，真的。此外，它有很好的文档记录和“正在进行的工作”，因此随着设计本身的发展，您可以期待更多的功能。
Important update:Fluent Kit, as well as the whole Nespero project is closed.
重要更新：Fluent Kit 以及整个 Nespero 项目已关闭。
回答by rony l
Update: Fluent design now supports web, Android and IOS. https://www.microsoft.com/design/fluent/#/
更新：Fluent design 现在支持 web、Android 和 IOS。https://www.microsoft.com/design/fluent/#/
Update: a high quality 3rd party react component framework called react-uwp can be found here
更新：可以在此处找到名为 react-uwp 的高质量 3rd 方反应组件框架
Update:new website is at https://fluentweb.com/
更新：新网站位于https://fluentweb.com/
Update:link is now dead, and https://getmwf.comdoesn't mention fluent design anymore.
更新：链接现已失效，https://getmwf.com 不再提及流畅设计。
Microsoft has a web framework for its own employees and vendors.
Microsoft 为自己的员工和供应商提供了一个 Web 框架。
Looks like they are introducing fluent design components to this framework.
看起来他们正在向这个框架引入流畅的设计组件。
