En los últimos años han surgido multitud de librerías para facilitar el desarrollo web, casi tantas como empresas punteras en el sector hay (Boostrap de Twitter, Material Design de Google …). En el artículo de hoy os queremos presentar Office UI Fabric.
Office UI Fabric
Este producto se define como un conjunto de herramientas para construir experiencias de usuario siguiendo la filosofía de Office. Lo que nos va a permitir utilizar los mismos estilos, fuentes y colores que son usados en la suite ofimática más conocida.
Si analizamos algunas de las cosas que incorpora este conjunto de herramientas, podemos encontrar dos secciones principales, la de estilos y la de componentes. La sección de componentes, como su propio nombre indica nos permite usar componentes ya creados como un cuadro de búsquedas, para desarrollar de manera más rápida nuestra web.
Los estilos de Office UI Fabric
En esta entrada nos hemos centrado en la parte de los estilos. Esta parte a su vez esta formada de distintas subpartes: tipografía, color, iconos, cuadrícula responsive …
Lo primero que vamos a hacer es añadir los estilos de Office UI Fabric a nuestro fichero index con el cual vamos a hacer la demostración. Aquí tenéis el código:
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.components.min.css">Una vez que hemos incluido el estilo, ya podemos usar las distintas clases que Microsoft propone.
En mi caso he utilizado un color grisáceo de fondo de página:
<body class="ms-bgColor-neutralLight">Después he introducido un título y dos divs, asignándole a cada uno de ellos un color de letra y un fondo:
<h1 class="ms-bgColor-themePrimary ms-fontColor-themeLighter">Somos Binarios</h1>
<div class="ms-bgColor-orangeLighter ms-fontColor-black">
<p>Redactor Jefe</p>
<p>El redactor Jefe se encarga de planificar los artículos.</p>
</div>
<div class="ms-bgColor-tealLight ms-fontColor-white">
<p>Redactor Jefe</p>
<p>El equipo de redacción se encarga de redactar los artículos.</p>
</div>Consiguiendo el siguiente resultado:
Otra de las cosas nos propone Office UI Fabric es usar su conjunto de iconos, así que he añadido dos iconos, uno a cada tarjeta:
<h1 class="ms-bgColor-themePrimary ms-fontColor-themeLighter">Somos Binarios</h1>
<div class="ms-bgColor-orangeLighter ms-fontColor-black">
<p>Redactor Jefe</p>
<p>El redactor Jefe se encarga de planificar los artículos.</p>
</div>
<div class="ms-bgColor-tealLight ms-fontColor-white">
<p>Redactor Jefe</p>
<p>El equipo de redacción se encarga de redactar los artículos.</p>
</div>
Finalmente he querido probar el sistema de la cuadrícula responsive, el cual me recuerda mucho a Bootstrap:
<h2>Temática</h2>
<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-sm4 ms-bgColor-blueLight">Linux</div>
<div class="ms-Grid-col ms-u-sm4 ms-bgColor-blueMid ms-fontColor-white">Programación</div>
<div class="ms-Grid-col ms-u-sm4 ms-bgColor-blueDark ms-fontColor-white">Seguridad</div>
</div>
</div>Obteniendo como resultado lo siguiente:
Como podéis ver, con un par de decenas de líneas de código y las clases que nos proporcionan, es sencillo dotar a nuestra página de la apariencia habitual de Office. Para más información podéis visitar su web oficial
Espero que os haya gustado la entrada y esperamos vuestros comentarios.