microsoft framework css web design frameworks fluent-design

css - framework - microsoft fluent design web



Microsoft Fluent Design for Web(marco CSS) (7)

Echa un vistazo al marco Fluent Kit .

Es una extensión de Fluent Design para la versión actual de Bootstrap, utilizando jQuery, por lo que debería ser un punto de partida fácil para cualquiera, de verdad. Además, está muy bien documentado y el "trabajo en progreso", por lo que puede esperar más funcionalidades a medida que se desarrolle el diseño.

Importante actualización: Fluent Kit, así como todo el proyecto Nespero está cerrado .

Como Microsoft lanzó recientemente un sistema de diseño llamado "Fluent Design", ¿es apropiado aplicarlo en el diseño web?

La mayor parte de mi búsqueda ha sido para todas las plataformas de Microsoft, la aplicación C #, F #, etc. Nunca he visto nada respecto al diseño web.


Eche un vistazo a Microsoft Web Framework para obtener detalles sobre los componentes, la estructura HTML y el CSS que usaría para cumplir con los principios de diseño web de Microsoft.


Respuesta corta, sí El diseño fluido es apropiado para la web, pero todavía no hay una biblioteca de componentes disponible públicamente.

getmwf.com mencionado getmwf.com (obtener Microsoft Web Framework) está en desuso. El nuevo microsoft.com/mwf es para uso interno.

El nuevo fluentweb.com también está marcado como restricted to use by Microsoft employees and authorized vendors pero el tutorial de código abierto para sitios web con fluidez dice lo siguiente:

[..] cómo importar componentes y estilos Fluent para Web (los paquetes son privados solo para los empleados de Microsoft, aunque pronto se convertirán en código abierto).

Tal vez algun dia. Mientras tanto, echa un vistazo a Office Fabric


Solo estoy citando a Microsoft aquí.

Es perfectamente relevante para el diseño web. Ya que estos son solo principios y no son específicos de ninguna plataforma. Así que si eres un desarrollador web y te gusta la forma de pensar de Microsoft. Está perfectamente bien construir un marco de interfaz de usuario web alrededor de estos principios.

Por favor, vea este video en el que su pregunta ha sido discutida en la sesión de preguntas y respuestas (22:00).


simplemente copie y pegue desde la parte inferior de la página de inicio de MWF .

Este sitio está restringido para que lo utilicen los empleados de Microsoft y los proveedores autorizados. Ningún material o código de este sitio se puede utilizar en sitios web que no sean de Microsoft. Al ingresar a este sitio, confirma que es un empleado de Microsoft o un proveedor autorizado que trabaja en nombre de Microsoft. Además, acepta que los materiales y el código constituyen propiedad intelectual de Microsoft, están limitados para su uso en sitios web operados por Microsoft y están sujetos a los acuerdos aplicables que rigen su relación laboral o de proveedor con Microsoft.


Actualización : here se puede encontrar un marco de componentes de reacción de terceros de alta calidad llamado react-uwp

Actualización: el nuevo sitio web está en fluentweb.com

Actualización: el enlace ahora está muerto y https://getmwf.com ya no menciona el diseño fluido.

Microsoft tiene un marco web para sus propios empleados y proveedores.

Parece que están introduciendo componentes de diseño fluidos en este marco.

https://fluent.getmwf.com/


Puede utilizar esta biblioteca para Reveal Effect en Fluent Design System. Y debe esperar a que el backdrop-filter de fondo sea compatible con CSS para el efecto de desenfoque del fondo.

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