Foundation: otro framework para desarrollo front-end

Usar un framework para desarrollo front-end tiene tantas ventajas como desventajas. Sin embargo, siempre que aparece una nueva opción en este campo es útil echarle una mirada. Probablemente, se trate de la solución para desarrollar el sitio web que queremos en poco tiempo.

La competencia de Bootstrap se llama Foundation y es un framework orientado al desarrollo de sitios web responsivos bajo el enfoque mobile first. Se propone como «un framework fácil de usar, flexible y poderoso para construir prototipos y código definitivo para cualquier clase de dispositivo».

¿Cuáles son sus principales características?

  • fastclick.js. En dispositivos móviles, el «toque» con el dedo tarda 300 milisegundos más que el clic en disparar la acción. Este polyfill elimina ese retraso.
  • Aceleración de GPU. Optimiza el hardware de procesamiento de gráficos para que las animaciones de nuestro sitio web se vean más fluidas.
  • Off Canvas. Permite crear menús, originalmente invisibles, que se deslicen desde uno de los bordes de la pantalla cuando son activados. El menú sólo aparece cuando lo necesitamos, sin ocupar espacio el resto del tiempo.
  • Formularios mejorados. Podemos crear formularios atractivos con diversas disposiciones de campos y etiquetas.
  • Grilla. Podemos dividir el contenido en un conjunto de divs, que, en el caso de estar navegando desde un dispositivo móvil, podrán apilarse para ocupar menos espacio horizontal.
  • Semántica. Gracias al uso de mixins de Sass, un preprocesador de CSS, podemos utilizar los componentes ya implementados de Foundation pero utilizando nuestros propios nombres de clases. Así, cada porción de código tendrá un significado reconocible.
  • Personalización. Tenemos la opción de descargar sólo las características de Foundation que nos interesen, de manera de utilizar una versión lo más liviana posible.

Además de la grilla y los formularios, Foundation nos provee elementos de navegación, botones, tipografías, barras de progreso (para informar la carga de una página), menús desplegables, presentaciones de diapositivas, feature tours (series de carteles que van señalando distintas partes de la página en un orden definido) y otros objetos listos para usar. Todo lo necesario para crear sitios web profesionales rápidamente.