Office UI Fabric la librería de desarrollo web

por:

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

Office UI Fabric la liberia de desarrollo web basada en Office

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:
página web con estilo Office UI

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>

iconos de Office UI Fabric

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:
cuadricula responsive de Office UI Fabric

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.

The following two tabs change content below.

Jorge Durán

Administrador, redactor y creador de Somos Binarios
Entusiasta de la tecnología desde los 10 años, desarrollador y creador de varios proyectos de software y autodidacta por naturaleza. Ingeniero Informático por la USAL y .Net backend developer en idealista.

Deja una Respuesta