Bootstrap vs Foundation

En los últimos años y tras la presentación de la web 2.0, Internet ha sufrido grandes transformaciones para adaptarse a los requisitos de los usuarios y por ese motivo los sitios web también han tenido una gran evolución. Aproximadamente en 2011 se comenzó a hablar de los sitios web responsive o adaptativos, técnica de diseño web capaz de proporcionar una visualización correcta del mismo sitio web en diferentes dispositivos.

A continuación se va hablar de los dos framework existentes más relevantes en la actualidad .

En primer lugar Bootstrap, framework desarrollado en 2011 por Twitter. Este permite dar forma a un sitio web usando librerias CSS que incorporan tipograficas, botones, cuadros, menús y otros muchos elementos que pueden ser utilizados en cualquier web. A pesar de que el desarrollo de este framework lo empezó Twitter, fue liberado bajo licencia MIT en 2011 y su desarrollo continua en un repositirio de GitHub.

Bootstrap 3, es un framework orientado al diseño web responsive con el que se pueden crear sitios estáticos y dinámicos. Actualmente es el número 1 del repertorio de Github. Esta versión presenta cambios significativos respecto a la versión anterior mejorando algunas caracteristicas como las siguientes:

- Soporte completo con HTML5 Y CSS3, proporcionando ser utilizado de manera flexible para desarrollo web.

- Se ha implementado un sistema GRID de 12 columnas donde se plasma el contenido.

- Establece Media Queries para 4 tamaños de dispositivos diferentes.

- Además admite insertar imágenes responsive.

- No tiene validación integrada en los formularios.

Foundation es un framework creado en 2011 por ZURB con el fin de crear sitios y aplicaciones web de una manera más sencilla y rápida.

Fue el primer framework responsive.

Contiene plantillas HTML y clases CSS para tipografía, formulas, botones, navegación y otros muchos elementos que pueden ser utilizados en cualquier web. Foundation es modular se basa en un conjunto de hojas de estilo Sass que implementan los distintos componentes de la caja de herramientas . Se puede personalizar el archivo Foundation con la selección de los componentes que se quieran utilizar en nuestro proyecto. Esto es posible mediante la hoja de estilos de la configuración central, los cambios más profundos se realizan modificando las variables Sass.

Sass es un preprocesador de hojas de estilo CSS, diseñado por Hampton Catlin y desarrollado por Nathan Weizenbaum. Este permite desarrollar de manera rápida a través de nuevas herramientas de personalización. La utilización de Sass permite la utilización de variables, funciones, operadores y selectores anidados o los conocidos mixins.

Las caracteristicas principales de Foundation son:

- Foundation tiene la validación de formularios integrado por Abide.

- Soporte completo con HTML5 Y CSS3, proporcionando ser utilizado de manera flexible para desarrollo web.

- Esta basado en un sistema de rejilla.

- Usa como unidad de calibración los REMS.

Las principales diferencias entre estos dos frameworks son:

	Bootstrap	Foundation
Versión	3.3.4	5.5.2
Fecha de la última versión	16 de marzo del 2015	30 de abril del 2015
Multi-Navegador	Chrome (Mac, Windows, iOS y Android) Safari (iOS y Mac) Firefox (Mac y Windows) Opera (Mac y Windows) IE8+	Chrome (Mac, Windows, iOS y Android) Safari (IOS y  Mac) Firefox (Mac y Windows) Opera (Mac y Windows) IE9+
Diseño web adaptable	Si	Si
Open Source	Si	Si
Tamaño	14 archivos a 1019 KB	30 archivos en 936 KB
Sass / SCSS	Sí	Sí
Configuracín de la cuadrícula	12 y la columna fija layoutFluid	12 layoutFluid columna, bloque y centrado disponibles.
Unidades de calibración	Píxeles	REMS
Integración con otros frameworks	Si	Limitada,  algunos frameworks.
Comunidad	Si	No tiene una comunidad oficial.
Documentación	Si	Muy poca documentación disponible.

Tabla 1 Diferencias entre los frameworks

En nuestro caso, se ha utilizado Bootstrap para el desarrollo de algunos de los proyectos como: PLAY, BOND y la Oficina Conectada entre otros.

Autor: Gala Bernal