Bootstrap vs Foundation Parte 1: Prototipo rápido

por Natalia Ventre el ・ podés leerlo en 5 minutos ・

TL;DR Bootstrap y Foundation son frameworks front-end similares y para determinar cuál es mejor me propuse hacer una página web con cada uno y comparar los resultados. Para prototipos rápidos obtuve mejores resultados con Bootstrap.

¿Qué diferencia a Bootstrap y Foundation?

  • Pre-procesadores: Bootstrap usa LESS y Foundation, Sass y Compass1.
  • JavaScript: Bootstrap usa jQuery y Foundation, Zepto (con fallback a jQuery).
  • Compatibilidad: Bootstrap es compatible con IE7+2 y Foundation con IE9+.
  • Uso: Además de la herramienta online para hacer un custom build, Bootstrap se puede instalar via Bower y Foundation tiene una gema para crear proyectos desde la terminal.
  • Estilos pre-definidos y componentes: Cada framework tiene algunos estilos CSS pre-definidos y componentes JavaScript que no están presentes en el otro. Ver una lista detallada de las diferencias.
  • Popularidad: A la fecha, Bootstrap tiene 46.538 estrellas en GitHub y Fundation 10.021.

¿Cuál es mejor?

Comparando las características de Bootstrap y Foundation para mí no hay un claro ganador, por eso me propuse hacer un pequeño experimento:

  1. Prototipo rápido: a partir de un boceto en papel, ¿qué tan rápido y fácil es hacer un prototipo en HTML, CSS, JS adaptable con Bootstrap y con Foundation?
  2. Diseño personalizado: a partir del prototipo y style-tiles, ¿qué tan sencillo o complejo es integrar un diseño personalizado? ¿son útiles los estilos pre-definidos?

Prototipo rápido con Bootstrap y Foundation

Hay varias definiciones de qué es un prototipo, en este caso me refiero a una página web funcional (HTML, CSS, JS), pero con contenido de relleno y sin diseño visual, básicamente un wireframe interactivo.

Ingredientes:

Boceto website en papel
  • boceto en papel.
  • Un HTML con markup básico y contenido de relleno.
  • Picturefill y Font Awesome.

Trabajé en Sublime Text y el navegador con la documentación del framework a la vista. Originalmente pensé en considerar cuánto tiempo me llevó hacer el prototipo con cada framework como un factor decisivo, pero como ya tenía experiencia con Bootstrap, decidí determinar cuál es mejor en base a los resultados obtenidos.

Prototipo rápido con Bootstrap

Prototipo rápido con Bootstrap
Captura de pantalla del prototipo realizado con Bootstrap. Ver demo.

La documentación de Bootstrap es muy clara, pero el código de la navbar me parece bastante complejo, tendría que definir un snippet en Sublime Text.

Escribí 12 líneas de CSS para recuadrar rápidamente algunas secciones y “corregir” un margen que lucía como un defecto. Además modifiqué 2 variables para que el prototipo quedara en blanco y negro.

.media, .media .media{
	margin-top: 0;
}
footer.well{
	margin-top: 80px;
	margin-bottom: 0;
	padding: 40px 0;
}
.well{
	border: none;
	padding: 0;
}

El media object no funcionó como esperaba, porque en teléfonos no flota la imagen, para el prototipo usé las responsive utility classes (.visible-desktop), pero en la próxima etapa, tendría que considerar otra solución.

No tuve necesidad de escribir manualmente ninguna media query. La “versión teléfono” y “escritorio” quedaron aceptables automáticamente y principalmente para “tabletas” tuve que ajustar los tamaños de las imágenes.

Prototipo rápido con Foundation

Prototipo rápido con Foundation
Captura de pantalla del prototipo realizado con Foundation. Ver demo.

Foundation crea un proyecto entero, incluyendo un index.html que es útil, pero con demasiado contenido (un “Hello, World!” hubiera sido suficiente).

No encontré cómo limitar el ancho del contenido de la Top Bar y mirando el sitio de Foundation dudo que sea posible.

La grilla conceptualmente es interesante, es mobile first (1 columna por defecto), con un breakpoint a los 728px que intercambia entre la grilla small y la large, permitiendo un ajuste fino del contenido y además tiene clases para posicionar contenido independientemente del orden en el código. En la práctica tuve problemas para alinear elementos, sobre todo dentro del Orbit. No tuve necesidad de escribir manualmente ninguna media query.

Escribí 3 líneas de CSS y modifiqué una variable.

.panel{
	margin-bottom: 0;
}
  • La configuración de los componentes JavaScript es confusa.
<script>
	$(document).foundation('orbit topbar', {back_text: 'Atrás', bullets: false});
</script>

Y el ganador es… ¡Bootstrap!

Con Bootstrap no tuve inconvenientes y en aproximadamente media hora pude terminar el prototipo.

De Foundation me decepcionó que se define como el “más avanzado framework front-end del mundo” y sin embargo la grilla sólo funciona correctamente usando divs innecesarios.

En Bootstrap con el siguiente markup el h1 queda alineado con .span8:

<div class="container">
	<h1>...</h1>
</div>
<div class="container">
	<div class="row">
		<div class="span8">...</div>
		<div class="span4">...</div>
	</div>
</div>

En Foundation con markup equivalente, el h1 no queda alineado y es necesario agregar un div extra, ya que añadir la clase large-12.columns al h1 tampoco lo soluciona.

<div class="row">
	<div class="large-12 columns"> <!-- div extra -->
		<h1>...</h1>
	</div>
</div>
<div class="row">
	<div class="large-8 columns">...</div>
	<div class="large-4 columns">...</div>
</div>

La motivación principal de usar un framework front-end es tener a mano componentes que pueda adaptar a las necesidades de cada proyecto. El Carousel de Bootstrap tiene exactamente la funcionalidad que buscaba y solamente tendría que diseñar las flechas, el Orbit de Foundation no tiene suficientes opciones de configuración.

En el próximo artículo voy a comparar qué tan sencillo es implementar un diseño a medida con Bootstrap y Foundation. Suscribíte al feed RSS o agregame a tus círculos de Google+ para no perderte la segunda parte.


  1. Compass a partir de la v4 no es una dependencia y se puede trabajar con Bourbon.

  2. En la versión 3 van a dejar de soportar IE7 y Firefox 3.6.