ZURB Foundation: el framework CSS para interfaces responsivas

Desde 1998, la agencia estadounidense 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 desarrollados 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 prototipos y acortar el tiempo de desarrollo. Para ello, selecciona lo mejor de los fragmentos de código, patrones y plantillas existentes, resultando en el Foundation framework que publicaría en 2011 como proyecto de código abierto y que está disponible desde entonces de forma gratuita.

Foundation es un marco frontend responsivo que cuenta con una gran variedad de componentes HTML y CSS para el diseño de interfaces de usuario, diferentes fragmentos de código y plantillas, así como extensiones opcionales de JavaScript. Este framework web modular se distribuye bajo la licencia libre MIT y se puede descargar tanto en su página web oficial,  como también en GitHub. Desde Foundation 4.0, este framework se ha concentrado en el enfoque “mobile first”, implementando nuevos módulos para la optimización del rendimiento y la disminución del tamaño de los archivos del entorno de trabajo. Además de la versión estándar de Foundation, ZURB también puso en marcha variantes para el desarrollo de newsletters multidispositivo (Foundation for Emails) y webs con diseño “one page” (Foundation for Apps).

En primer lugar, Foundation framework se caracteriza por un alto grado de flexibilidad como consecuencia de su diseño modular. Antes de descargarlo puedes decidirte por los componentes 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 innecesariamente. Si te das cuenta de que necesitas un componente que no has descargado, puedes añadirlo sin ningún problema posteriormente, de la misma forma que también puedes eliminar aquellos módulos que no utilizas, garantizando, así, tener siempre a disposición las funciones que necesitas para la realización de tu proyecto web.

Con Foundation 6.0, por ejemplo, dispones de una selección de más de 40 componentes en las siguientes siete áreas:

• Grid: el componente crucial para el diseño web responsivo es el valor predeterminado de sus 1200 píxeles de ancho para su cuadrícula (grid) flexible. Aunque puedes prescindir de este módulo, recuerda que este sistema es la base para que eldiseño de tu proyecto web sea de gran resolución y adaptable a diferentes dispositivos. Además, desde la versión 6.0 también tienes la opción de seleccionar el módulo “flex grid”, que permite un posicionamiento más flexible de los elementos sobre la base del modelo flexbox de CSS (por ejemplo, una alineación horizontal y vertical de los objetos).

• General: dentro de los módulos generales (incluyendo, oficialmente, grid) se encuentran las clases float y visibility, que permiten definir las reglas de comportamiento para el posicionamiento y la visibilidad de los elementos individuales. Por otro lado, en esta área también encontrarás el componente para crear formularios, así como el módulo tipográfico con los formatos básicos para textos y fuentes.

• Controls: aquí encontrarás todos los elementos interactivos importantes de tu proyecto web. Estos son, por ejemplo, los botones que redireccionan 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. 

• Navigation: los elementos frontpage no pueden faltar en el diseño frontend. El proyecto ZURB foundation incluye una gran cantidad de módulos para crear distintos tipos de barras de menús y menús (acordeón, vertical, desplegable), añadir guías de navegación (breadcrumbs) o numerar las páginas. 

• Containers: los contenedores representan una excelente oportunidad para incluir elementos adicionales, tales como texto, imágenes o vídeos, en un área común. Aquí encontrarás estilos para los típicos widgets de contenido como acordeón, pestañas, elementos desplegables o cuadros de diálogo modales.

• Media: en la sección “Media” encontrarás los módulos de Foundation framework necesarios para incorporar elementos multimedia. El componente “Flex video” ofrece soporte para integrar vídeos y garantiza que el contenido se adapte a los diferentes tamaños y resoluciones de pantalla. Adicionalmente, encontrarás otros componentes para miniaturas e información sobre herramientas.

• Plugins: por último, puedes seleccionar algunas extensiones útiles para ZURB Foundation que te facilitan el trabajo con este entorno de desarrollo web. La biblioteca “Motion UI” permite descargar bibliotecas útiles (solo para el formato Sass), facilitando, en gran manera, la creación de transiciones de interfaz y de animaciones. 

Antes de la descarga es posible definir algunos parámetros 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 distribución, diferentes 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 informarte sobre cada uno de los módulos individuales, puedes descargarlo como versión completa (“Complete”) o como versión simplificada (“Essential”).

Si estás satisfecho con las posibilidades de CSS y solo quieres reemplazar los archivos en este formato ya descargados, estarás tomando una buena decisión. Sin embargo, ZURB Foundation ofrece una característica adicional: los fundamentos del código CSS están escritos en el lenguaje de hoja de estilo Sass (Syntactically Awesome Stylesheets), que es algo así como un preprocesador para CSS. Sass facilita el trabajo con hojas de estilo .scss que, posteriormente, pueden compilarse (convertirse) en el conocido documento .css para que el navegador pueda leerlo e interpretarlo.

El hecho de tener acceso a la variante Sass de Foundation framework conlleva las siguientes ventajas: 

• Una sintaxis simplificada (Sass o SCSS) que facilita la escritura de hojas de estilo.

• La posibilidad de definir plantillas (mixins) para almacenar centralmente patrones repetitivos e incluirlos donde se desee.

• La combinación de múltiples hojas de estilo para reducir al mínimo las peticiones 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 estructurarlo jerárquicamente con gran facilidad, permitiendo un trabajo limpio y, significativamente, con menos líneas de código.

Originalmente, el compilador Sass está escrito en Ruby. Si no utilizas este lenguaje, no tienes que instalarlo para Sass, pues LibSass representa una alternativa escrita en C. LibSass se ejecuta en los principales sistemas operativos y se puede instalar fácilmente en un flujo de trabajo Node.js, principalmente para traducir automáticamente a CSS los cambios en el código Sass.

La actualización de Foundation 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 JavaScript, Foundation goza de una reputación como plataforma de desarrollo muy liviana. Incluso, debido a la estructura modular ya mencionada y a la libertad en la selección, es posible reducir el tamaño de este entorno de trabajo aún más. Ciertamente, la combinación del grid flexible con los diversos atributos ARIA (por ejemplo, para implementar una navegación con el teclado de alto rendimiento) implementados por ZURB, proporciona las opciones básicas para proyectos web multiplataforma y multidispositivo. Estos últimos atributos están bien documentados y disponibles para todas aquellas áreas donde puedan optimizar su accesibilidad.

Trabajando con la versión Sass de este framework aumentan las opciones en cuanto a la creación de elementos de diseño y maquetación. Sin embargo, trabajar con estas hojas de estilo especializadas no resulta nada fácil para quienes no tengan experiencia, demandando una gran inversión de tiempo y trabajo, lo que también se aplica a la plataforma en general. La integración de componentes externos, más exactamente, de los módulos o de un proyecto Foundation en otro framework o sistema de gestión de contenidos, es bastante compleja. Algunas de las debilidades de ZURB Foundation frente a frameworks CSS comparables como Bootstrap de Twitter son la reducida selección de plantillas y la falta de soporte para las versiones más antiguas de Internet Explorer.

ZURB Foundation es un entorno de trabajo que, como desarrollador, te acompañará desde el primer prototipo hasta lograr una web funcional, caracterizándose principalmente por su eficiencia. En caso de que no necesites ciertos componentes, puedes desactivarlos sin necesidad de que esto influya en la funcionalidad de otros elementos. Como resultado, este framework CSS se destaca por un código especialmente liviano que, a la vez, ha buscado concentrarse en el enfoque “mobile first”. Gracias a su sistema grid altamente flexible, que, además, puede personalizarse con Sass, Foundation se convierte en el entorno de trabajo perfecto para desarrollar frontends responsivos caracterizados por tiempos de carga reducidos y una gran accesibilidad y por ser adecuados para diferentes tamaños de pantalla.

Recuerda que aunque también puedes usar ZURB para la realización de complejos proyectos web a medida, esto está ligado a un gasto considerablemente alto y requiere una buena comprensión de los fragmentos de código predefinidos.