ZURB Fou­n­da­tion: el framework CSS para in­te­r­fa­ces re­s­po­n­si­vas

Desde 1998, la agencia es­ta­dou­ni­de­n­se de diseño ZURB ha estado ayudando a las empresas a crear páginas web y servicios online de calidad hasta que, en 2008, crea la guía de estilo ZURB Style Guide con el objetivo de reunir los elementos de estilo de­sa­rro­lla­dos para los proyectos de sus clientes. Dos años más tarde, ZURB decide crear un framework basado en sus guías para facilitar la creación de pro­to­ti­pos y acortar el tiempo de de­sa­rro­llo. Para ello, se­le­c­cio­na lo mejor de los fra­g­me­n­tos de código, patrones y pla­n­ti­llas exi­s­te­n­tes, re­su­l­ta­n­do en el Fou­n­da­tion framework que pu­bli­ca­ría en 2011 como proyecto de código abierto y que está di­s­po­ni­ble desde entonces de forma gratuita.

Fou­n­da­tion es un marco frontend re­s­po­n­si­vo que cuenta con una gran variedad de co­m­po­ne­n­tes HTML y CSS para el diseño de in­te­r­fa­ces de usuario, di­fe­re­n­tes fra­g­me­n­tos de código y pla­n­ti­llas, así como ex­te­n­sio­nes op­cio­na­les de Ja­va­S­cri­pt. Este framework web modular se di­s­tri­bu­ye bajo la licencia libre MIT y se puede descargar tanto en su página web oficial,  como también en GitHub. Desde Fou­n­da­tion 4.0, este framework se ha co­n­ce­n­tra­do en el enfoque “mobile first”, im­ple­me­n­ta­n­do nuevos módulos para la op­ti­mi­za­ción del re­n­di­mie­n­to y la di­s­mi­nu­ción del tamaño de los archivos del entorno de trabajo. Además de la versión estándar de Fou­n­da­tion, ZURB también puso en marcha variantes para el de­sa­rro­llo de ne­w­s­le­t­te­rs mu­l­ti­di­s­po­si­ti­vo (Fou­n­da­tion for Emails) y webs con diseño “one page” (Fou­n­da­tion for Apps).

En primer lugar, Fou­n­da­tion framework se ca­ra­c­te­ri­za por un alto grado de fle­xi­bi­li­dad como co­n­se­cue­n­cia de su diseño modular. Antes de de­s­ca­r­gar­lo puedes decidirte por los co­m­po­ne­n­tes que necesitas y los que no, diseñando así una variante propia de la colección de código sin tener que descargar módulos in­ne­ce­sa­ria­me­n­te. Si te das cuenta de que necesitas un co­m­po­ne­n­te que no has de­s­ca­r­ga­do, puedes añadirlo sin ningún problema po­s­te­rio­r­me­n­te, de la misma forma que también puedes eliminar aquellos módulos que no utilizas, ga­ra­n­ti­za­n­do, así, tener siempre a di­s­po­si­ción las funciones que necesitas para la rea­li­za­ción de tu proyecto web.

Con Fou­n­da­tion 6.0, por ejemplo, dispones de una selección de más de 40 co­m­po­ne­n­tes en las si­guie­n­tes siete áreas:

• Grid: el co­m­po­ne­n­te crucial para el diseño web re­s­po­n­si­vo es el valor pre­de­te­r­mi­na­do de sus 1200 píxeles de ancho para su cua­drí­cu­la (grid) flexible. Aunque puedes pre­s­ci­n­dir de este módulo, recuerda que este sistema es la base para que el diseño de tu proyecto web sea de gran re­so­lu­ción y adaptable a di­fe­re­n­tes di­s­po­si­ti­vos. Además, desde la versión 6.0 también tienes la opción de se­le­c­cio­nar el módulo “flex grid”, que permite un po­si­cio­na­mie­n­to más flexible de los elementos sobre la base del modelo flexbox de CSS (por ejemplo, una ali­nea­ción ho­ri­zo­n­tal y vertical de los objetos).

• General: dentro de los módulos generales (in­clu­ye­n­do, ofi­cia­l­me­n­te, grid) se en­cue­n­tran las clases float y vi­si­bi­li­ty, que permiten definir las reglas de co­m­po­r­ta­mie­n­to para el po­si­cio­na­mie­n­to y la vi­si­bi­li­dad de los elementos in­di­vi­dua­les. Por otro lado, en esta área también en­co­n­tra­rás el co­m­po­ne­n­te para crear fo­r­mu­la­rios, así como el módulo ti­po­grá­fi­co con los formatos básicos para textos y fuentes.

• Controls: aquí en­co­n­tra­rás todos los elementos in­ter­ac­ti­vos im­po­r­ta­n­tes de tu proyecto web. Estos son, por ejemplo, los botones que re­di­re­c­cio­nan al usuario con un solo clic o que cierran algunos elementos. También existen módulos que permiten incluir faders y botones con opciones de encendido y apagado. 

• Na­vi­ga­tion: los elementos frontpage no pueden faltar en el diseño frontend. El proyecto ZURB fou­n­da­tion incluye una gran cantidad de módulos para crear distintos tipos de barras de menús y menús (acordeón, vertical, de­s­ple­ga­ble), añadir guías de na­ve­ga­ción (brea­d­cru­m­bs) o numerar las páginas. 

• Co­n­tai­ne­rs: los co­n­te­ne­do­res re­pre­se­n­tan una excelente opo­r­tu­ni­dad para incluir elementos adi­cio­na­les, tales como texto, imágenes o vídeos, en un área común. Aquí en­co­n­tra­rás estilos para los típicos widgets de contenido como acordeón, pestañas, elementos de­s­ple­ga­bles o cuadros de diálogo modales.

• Media: en la sección “Media” en­co­n­tra­rás los módulos de Fou­n­da­tion framework ne­ce­sa­rios para in­co­r­po­rar elementos mu­l­ti­me­dia. El co­m­po­ne­n­te “Flex video” ofrece soporte para integrar vídeos y garantiza que el contenido se adapte a los di­fe­re­n­tes tamaños y re­so­lu­cio­nes de pantalla. Adi­cio­na­l­me­n­te, en­co­n­tra­rás otros co­m­po­ne­n­tes para mi­nia­tu­ras e in­fo­r­ma­ción sobre he­rra­mie­n­tas.

• Plugins: por último, puedes se­le­c­cio­nar algunas ex­te­n­sio­nes útiles para ZURB Fou­n­da­tion que te facilitan el trabajo con este entorno de de­sa­rro­llo web. La bi­blio­te­ca “Motion UI” permite descargar bi­blio­te­cas útiles (solo para el formato Sass), fa­ci­li­ta­n­do, en gran manera, la creación de tra­n­si­cio­nes de interfaz y de ani­ma­cio­nes. 

Antes de la descarga es posible definir algunos pa­rá­me­tros estándar del framework. Esto incluye opciones para cambiar el número de columnas, el espaciado o la anchura máxima de la red de di­s­tri­bu­ción, di­fe­re­n­tes ajustes de color y de la posición del texto (de izquierda a derecha o de derecha a izquierda). Si deseas probar este entorno de trabajo sin tener que in­fo­r­mar­te sobre cada uno de los módulos in­di­vi­dua­les, puedes de­s­ca­r­gar­lo como versión completa (“Complete”) o como versión si­m­pli­fi­ca­da (“Essential”).

Si estás sa­ti­s­fe­cho con las po­si­bi­li­da­des de CSS y solo quieres re­em­pla­zar los archivos en este formato ya de­s­ca­r­ga­dos, estarás tomando una buena decisión. Sin embargo, ZURB Fou­n­da­tion ofrece una ca­ra­c­te­rí­s­ti­ca adicional: los fu­n­da­me­n­tos del código CSS están escritos en el lenguaje de hoja de estilo Sass (Sy­n­ta­c­ti­ca­lly Awesome St­y­le­sheets), que es algo así como un pre­pro­ce­sa­dor para CSS. Sass facilita el trabajo con hojas de estilo .scss que, po­s­te­rio­r­me­n­te, pueden co­m­pi­lar­se (co­n­ve­r­ti­r­se) en el conocido documento .css para que el navegador pueda leerlo e in­te­r­pre­tar­lo.

El hecho de tener acceso a la variante Sass de Fou­n­da­tion framework conlleva las si­guie­n­tes ventajas: 

• Una sintaxis si­m­pli­fi­ca­da (Sass o SCSS) que facilita la escritura de hojas de estilo.

• La po­si­bi­li­dad de definir pla­n­ti­llas (mixins) para almacenar ce­n­tra­l­me­n­te patrones re­pe­ti­ti­vos e in­clui­r­los donde se desee.

• La co­m­bi­na­ción de múltiples hojas de estilo para reducir al mínimo las pe­ti­cio­nes HTTP.

• El uso de variables y funciones para modificar los colores, el espaciado, las fuentes, etc.

• Gracias a la anidación del código es posible es­tru­c­tu­rar­lo je­rá­r­qui­ca­me­n­te con gran facilidad, pe­r­mi­tie­n­do un trabajo limpio y, si­g­ni­fi­ca­ti­va­me­n­te, con menos líneas de código.

Ori­gi­na­l­me­n­te, el co­m­pi­la­dor Sass está escrito en Ruby. Si no utilizas este lenguaje, no tienes que in­s­ta­lar­lo para Sass, pues LibSass re­pre­se­n­ta una al­te­r­na­ti­va escrita en C. LibSass se ejecuta en los pri­n­ci­pa­les sistemas ope­ra­ti­vos y se puede instalar fá­ci­l­me­n­te en un flujo de trabajo Node.js, pri­n­ci­pa­l­me­n­te para traducir au­to­má­ti­ca­me­n­te a CSS los cambios en el código Sass.

La ac­tua­li­za­ción de Fou­n­da­tion 5 a la versión 6.0 redujo al mínimo el tamaño de archivo del framework. Con 60 KB para CSS y 84 KB para Ja­va­S­cri­pt, Fou­n­da­tion goza de una repu­tación como pla­ta­fo­r­ma de de­sa­rro­llo muy liviana. Incluso, debido a la es­tru­c­tu­ra modular ya me­n­cio­na­da y a la libertad en la selección, es posible reducir el tamaño de este entorno de trabajo aún más. Cie­r­ta­me­n­te, la co­m­bi­na­ción del grid flexible con los diversos atributos ARIA (por ejemplo, para im­ple­me­n­tar una na­ve­ga­ción con el teclado de alto re­n­di­mie­n­to) im­ple­me­n­ta­dos por ZURB, pro­po­r­cio­na las opciones básicas para proyectos web mu­l­ti­pla­ta­fo­r­ma y mu­l­ti­di­s­po­si­ti­vo. Estos últimos atributos están bien do­cu­me­n­ta­dos y di­s­po­ni­bles para todas aquellas áreas donde puedan optimizar su ac­ce­si­bi­li­dad. Tra­ba­ja­n­do con la versión Sass de este framework aumentan las opciones en cuanto a la creación de elementos de diseño y ma­que­ta­ción. Sin embargo, trabajar con estas hojas de estilo es­pe­cia­li­za­das no resulta nada fácil para quienes no tengan ex­pe­rie­n­cia, de­ma­n­da­n­do una gran inversión de tiempo y trabajo, lo que también se aplica a la pla­ta­fo­r­ma en general. La in­te­gra­ción de co­m­po­ne­n­tes externos, más exac­ta­me­n­te, de los módulos o de un proyecto Fou­n­da­tion en otro framework o sistema de gestión de co­n­te­ni­dos, es bastante compleja. Algunas de las de­bi­li­da­des de ZURB Fou­n­da­tion frente a fra­me­wo­r­ks CSS co­m­pa­ra­bles como Bootstrap de Twitter son la reducida selección de pla­n­ti­llas y la falta de soporte para las versiones más antiguas de Internet Explorer.

ZURB Fou­n­da­tion es un entorno de trabajo que, como de­sa­rro­lla­dor, te aco­m­pa­ña­rá desde el primer prototipo hasta lograr una web funcional, ca­ra­c­te­ri­zá­n­do­se pri­n­ci­pa­l­me­n­te por su efi­cie­n­cia. En caso de que no necesites ciertos co­m­po­ne­n­tes, puedes des­ac­ti­var­los sin necesidad de que esto influya en la fu­n­cio­na­li­dad de otros elementos. Como resultado, este framework CSS se destaca por un código es­pe­cia­l­me­n­te liviano que, a la vez, ha buscado co­n­ce­n­trar­se en el enfoque “mobile first”. Gracias a su sistema grid altamente flexible, que, además, puede pe­r­so­na­li­zar­se con Sass, Fou­n­da­tion se convierte en el entorno de trabajo perfecto para de­sa­rro­llar frontends re­s­po­n­si­vos ca­ra­c­te­ri­za­dos por tiempos de carga reducidos y una gran ac­ce­si­bi­li­dad y por ser adecuados para di­fe­re­n­tes tamaños de pantalla.

Recuerda que aunque también puedes usar ZURB para la rea­li­za­ción de complejos proyectos web a medida, esto está ligado a un gasto co­n­si­de­ra­ble­me­n­te alto y requiere una buena co­m­pre­n­sión de los fra­g­me­n­tos de código pre­de­fi­ni­dos.