Microsoft Fluent Design for Web (платформа CSS)

Поскольку Microsoft недавно выпустила систему дизайна под названием "Fluent Design", уместно ли применять ее в веб-дизайне?

Большая часть моих поисков касалась всех платформ Microsoft, приложений С#, F # и т.д. Я никогда не видел ничего, касающегося веб-дизайна.

Ответ 1

Взгляните на Microsoft Web Framework для получения подробной информации о компонентах, структуре HTML и CSS, которые вы бы использовали, чтобы соответствовать принципам веб-дизайна Microsoft.

Ответ 2

Я просто цитирую Microsoft здесь.

Это совершенно актуально для веб-дизайна. Так как это всего лишь принципы и не характерны для какой-либо платформы. Так что если вы веб-разработчик и вам нравится мышление Microsoft. на этих принципах вполне можно построить каркас веб-интерфейса.

Пожалуйста, посмотрите это видео, в котором ваш вопрос обсуждался на сессии вопросов и ответов (22:00).

Ответ 3

просто скопируйте и вставьте из нижней части домашней страницы MWF.

Этот сайт ограничен для использования сотрудниками Microsoft и авторизованными поставщиками. Никакие материалы или код с этого сайта не могут быть использованы на сайтах не Microsoft. Заходя на этот сайт, вы подтверждаете, что являетесь сотрудником Microsoft или авторизованным поставщиком, работающим от имени Microsoft. Вы также соглашаетесь с тем, что материалы и код являются интеллектуальной собственностью Microsoft, ограничены для использования на веб-сайтах, управляемых Microsoft, и подпадают под действие применимых соглашений, регулирующих ваши трудовые отношения или отношения с поставщиками в Microsoft.

Ответ 4

Проверьте каркас набора Fluent.

Это расширение Fluent Design до текущей версии Bootstrap, использующее jQuery, поэтому должно быть легкой отправной точкой для любого, на самом деле. Кроме того, это очень хорошо задокументировано и "в процессе", так что вы можете ожидать дальнейших функциональных возможностей по мере развития самого проекта.


Важное обновление: Fluent Kit, а также весь проект Nespero закрыты.

Ответ 5

Вы можете использовать эту библиотеку для выявления эффекта в Fluent Design System. И вам нужно подождать, пока CSS backdrop-filter фона не поддерживается для эффекта размытия фона.

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

enter image description here

Ответ 6

Обновление: Свободный дизайн теперь поддерживает веб, Android и IOS. https://www.microsoft.com/design/fluent/#/

Обновление: высококачественный сторонний фреймворк реагирующих компонентов, который называется response-uwp, можно найти здесь.

Обновление: новый сайт на https://fluentweb.com/

Обновление: ссылка теперь не работает, и https://getmwf.com больше не упоминает о свободном дизайне.

Microsoft имеет веб-фреймворк для своих сотрудников и поставщиков.

Похоже, что они внедряют в эту инфраструктуру гибкие компоненты дизайна.

https://fluent.getmwf.com/

Ответ 7

Июль 2019 Обновление: Microsoft опубликовала Fluent структуру под названием Fabric UI, который включает в себя веб - часть здесь

Короткий ответ: да. Свободный дизайн подходит для Интернета, но все еще нет общедоступной библиотеки компонентов.

Вышеупомянутый getmwf.com (получить Microsoft Web Framework) устарел. Более новый microsoft.com/mwf предназначен для внутреннего использования.

Совершенно новый сайт fluentweb.com также помечен как restricted to use by Microsoft employees and authorized vendors но в открытом руководстве для свободного общения говорится следующее:

[..] как импортировать Fluent для веб-компонентов и стилей (пакеты являются частными только для сотрудников Microsoft, но скоро станут открытыми).

Возможно, однажды. А пока проверьте Office Fabric