Microsoft Fluent Design for Web（CSS 框架）[关闭]答案

【问题标题】：Microsoft Fluent Design for Web (CSS framework) [closed]Microsoft Fluent Design for Web（CSS 框架）[关闭]
【发布时间】：2017-05-25 02:19:08
【问题描述】：

由于微软最近发布了一个名为“Fluent Design”的设计系统，是否适合将其应用到网页设计中？

我的大部分搜索都针对所有 Microsoft 平台、C# 应用程序、F# 等。我从来没有见过任何关于网页设计的东西。

【问题讨论】：

问题已关闭，无法回答。但答案是肯定的，它可以用于 Web 开发。地铁设计是第一步。材料设计得到了一些原则，并不断发展壮大。
问题已关闭，无法回答。但答案是肯定的，它可以用于 Web 开发。它由 Fluent Deisgn 发展而来。在其他答案中已经提到了一些框架。我加了metroui.org.ua，大概3年就熟悉了。
Fabric Core 是一个用于 Fluent UI 的 CSS 库：developer.microsoft.com/en-us/fluentui#/get-started/…

标签： javascript html css fluent-ui fluent-design

【解决方案1】：

2020 年 4 月更新Fluent Design 的主要目的地是Microsoft's Fluent Design System website。

对于官方网络框架，请访问 github repos：

Fluent UI - 一组用于构建 Microsoft Web 体验的 React 组件。良好的支持和大量的追随者。
Office UI Fabric 仅包括网格、排版、图标和实用程序。没有组件，也没有对 React 的依赖。维护得不是很好。

部分教程可通过here获取。

【讨论】：

【解决方案2】：

查看Microsoft Web Framework，了解您将用于满足 Microsoft 网页设计原则的组件、HTML 结构和 CSS 的详细信息。

【讨论】：

那个网站真的是关于 Fluent Design 的吗？我在网站上的任何地方都没有看到“Fluent”，在我看来，它更像是 Metro 而不是 Fluent。我没有看到任何亚克力、灯光效果或显示效果的示例，而且几乎没有任何动作。
你说得很好@Josh，我也没有看到任何关于流利使用该框架的参考。不过，它似乎仍然是 MS Web 样式指南的主要资源。
网址现在在这里……microsoft.com/en-us/mwf
本网站实际上是一个仅限 Microsoft 的内部网站。不供一般公众使用。

【解决方案3】：

只需从MWF homepage 底部复制粘贴即可。

本网站仅限 Microsoft 员工和授权供应商使用。不得在非 Microsoft 网站上使用本网站的任何材料或代码。进入此站点，即表示您确认您是 Microsoft 员工或代表 Microsoft 工作的授权供应商。您进一步同意，材料和代码构成 Microsoft 的知识产权，仅限在 Microsoft 运营的网站上使用，并受适用于管理您与 Microsoft 的雇佣或供应商关系的协议的约束。

【讨论】：

从哪一页的底部开始？这是否意味着对另一个答案的评论，而不是它自己的独立答案？
@Josh，可能是通常的低于 100 条不允许评论的情况。
或者更相关的是，如果您不是 Microsoft，则不允许使用 Fluent Design。

【解决方案4】：

您可以将此库用于 Fluent Design System 中的显示效果。并且需要等待backdrop-filter CSS 支持背景模糊效果。

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

【讨论】：

【解决方案5】：

我只是在这里引用微软。

它与网页设计完全相关。因为这些只是原则，并不特定于任何平台。因此，如果您是 Web 开发人员并且喜欢 Microsoft 的思维方式。围绕这些原则构建一个 Web UI 框架是非常好的。

请查看video，在问答环节 (22:00) 中讨论了您的问题。

【讨论】：

【解决方案6】：

查看Fluent Kit 框架。

它是当前 Bootstrap 版本的 Fluent Design 扩展，使用 jQuery，因此对于任何人来说都应该是一个简单的起点，真的。此外，它是 very well documented 和“正在进行的工作”，因此随着设计本身的发展，您可以期待更多的功能。

重要更新：Fluent Kit 以及整个 Nespero 项目已关闭。

【讨论】：

【解决方案7】：

更新：Fluent 设计现在支持网页、Android 和 IOS。 https://www.microsoft.com/design/fluent/#/

更新：可以找到一个名为 react-uwp 的高质量 3rd 方 react 组件框架 here

更新：新网站位于https://fluentweb.com/

更新：链接现已失效，https://getmwf.com 不再提及流畅设计。

Microsoft 为其自己的员工和供应商提供了一个 Web 框架。

看起来他们正在向这个框架引入流畅的设计组件。

https://fluent.getmwf.com/

【讨论】：

超链接好像失效了:(
链接自 2017 年 11 月起失效
@TNU - 更新链接。
@ronyl 谢谢！现在可以使用了！
所有链接都失效了