Foundation vs Bootstrap:Round 1
Hace tres meses aproximadamente descubrí dos frameworks para el desarrollo de interfaces web, algo que anteriormente no había usado pero que ya tocaba, principalmente para poder tomar ventaja en el tiempo de desarrollo. El primer framework, y el que actualmente uso, es Foundation de Zurb y el segundo Bootstrap de Twitter.
Ambos buscan cubrir las mismas necesidades, ofreciendo una serie de recursos web para acelerar el desarrollo de sitios web basados en estándares y buenas prácticas. Sin embargo, no son competencia directa aún. Boostrap es mucho más completo que Foundation al incluir gran cantidad de estilos por defecto y una colección de librerias de javascript, pero por otro lado Foundation ofrece un buen soporte a responsive design, es ligero y también más flexible para modificar.
La piedra angular
Durante algún tiempo trabajé con Foundation porque se ajusta mejor a mi forma de trabajar, que prefiero tener más control sobre la apariencia, sin embargo, hace unas semanas decidí que la mejor opción era crear un framework propio para trabajar. Por supuesto comenzar desde cero no era una opción así que debía elegir cuál framework, entre Foundation y Bootstrap, sería la piedra angular.
Foundation fue el ganador, principalmente porque lo conozco bien, así que me dedique a modificarlo, hice varios avances incluyendo migrarlo a Less e integrar Minify para optimizar archivos. Pero justo ayer decidí darle una segunda oportunidad a Bootstrap, realmente su grilla de 16 columnas me agrada y ofrece una base mucho más completa para el desarrollo de sitios web gigantes. Durante algunas horas me convenció tanto que estuve a punto de deshacer el trabajo realizado con Foundation y cambiarlo.
Pero pudo más Foundation y Bootstrap quedo rezagado de nuevo. Es contradictorio pero aunque Bootstrap continua siendo mucho más completo que Foundation, en cuanto a características y apariencia inicial (básicamente es la misma que Twitter), son esas mismas razones lo dejaron fuera del juego.
Bootstrap al buscar cubrir más estilos web se vuelve grande y complejo, y con esto no me refiero a que sea difícil de entender pero hay que manejar más archivos y variables, sumando tiempo al desarrollo. Esta ventaja, de poseer más características, también significa más estilos pre-definidos que a la larga quitan más control sobre diseño, ú obligando a dedicar más tiempo a la edición de estilos.
En resumen, Foundation es más pequeño pero está mejor enfocado, también es ligero y permite experimentar más gráficamente con los elementos web. Por otro lado Bootstrap ofrece una base bastante robusta para el diseño de interfaces, ofreciendo más opciones pero a la vez «amarrando» la apariencia a una línea de diseño gráfico previamente definida, que desde el punto de vista personal significa una personalización más lenta y complicada.
Si eres programador, o tu especialidad no es el diseño gráfico web, mi recomendación es que vayas tras Bootstrap, te dará una apariencia completa prácticamente sin necesidad de modificar estilos (apenas unas variables). Mientras que si lo tuyo es el diseño gráfico y los sitios web a la medida entonces la mejor opción es Foundation, que da mejor soporte a responsive design para ofrecer tu sitio web en versiones para computadoras, tablets o móviles.
Pedazos de comentarios, pequeños y aleatorios
- Estuve a punto de cambiar Foundation por Bootstrap, que es más completo y trabaja con 16 columnas, pero hubiera sido un error.
- Foundation es más simple que Bootstrap y requiere más trabajo de diseño, pero es mucho más flexible y rápido para prototipar.
- Vale aclarar: Foundation es más rápido porque uso una adaptación basada en Less y lo elegí para trabajo porque ofrece mejor soporte a responsive design.
La última palabra
Después de todo lo dicho, en donde Foundation parece ser el ganador, la última palabra aún no está dicha. El equipo de Twitter, liderado por @mdo, lanzará el 30 de enero la versión 2.0 de Bootstrap que promete un gran avance sobre la versión actual, la 1.4, y tampoco hay que olvidar que este es uno de los proyectos más grandes y activos de Github, lo cual es algo bastante notable en su desarrollo, ofreciendo corrección de errores y características nuevas más rápido.
Foundation por su parte es pieza clave para Zurb, una empresa genial de diseño web, que mantiene a su equipo enfocado en el framework, ofreciendo aportes al código diariamente y guiados por una serie de buenas practicas que hacen al framework muy innovador.
—
Nota en construcción, seguiré editando.
12 comentarios
Comments are closed.
Foundation es genial sin duda, ahora la última versión de Bootstrap que van a lanzar tiene mucho mejor soporte a responsive design que su versión anterior, mejoraron mucho en esa parte, supongo que ya viste ‘el demo’.
Yo igual me decanté por Foundation!
Ya lanzaron la versión 2 de Bootstrap con soporte completo a responsive design, está muy bien aunque todavia le falta un poco (realmente muy poco) para igualar el de Foundation. Igual sigo pensando que son dos enfoques diferentes, Foundation da más flexibilidad si sabes diseñar mientras que Bootstrap es un poco más trillado.
Hola, soy programador y estaba mirando por cual de los dos frameworks irme… me la pusiste más fácil, muchas gracias! (Ya había trabajado con bootstrap pero no conocía foundation)
La nueva versión de Foundation, la 3, es mucho más completa y avanzada, aunque un poco más complicada de usar.
Me alegro que te haya servido la reseña.
hola, muy interesante publicacion, e comenzado a utilizar foundation a la par con RoR pero hay , algun error en mi instalacion, por la cual no me funcionan los «tabs», de este framework, alguien me podria ayudar, gracias!
¿Qué error te da?
Seguramente es un error de Javascript, si usas Firefox puedes averiguar el error usando la extensión Firebug en la pestaña de Consola o en Chrome presionando Ctrl+Alt+I, luego en la pestaña de consola.
bueno soy backend developer, pero me gusta mas como se ve bootstrap. Pero igual y hare un test con los 2 frameworks para ver como se ve mas bonita mi web-app jaja
Hola!! estuve probando el framework Foundation, me gusta como coloca las columnas y como se adapta a los dispositivos, pero tengo un pequeño inconveniente. Quise hacer el ejemplo del Navigation, el que se muestra en la página. me di cuenta que todo los efectos que tenía este navigation se basaba en un css llamado «presentation.css», el cual NO viene junto con la descarga del framework. lo tuve que descargar utilizando el firebug. parece que el ese archivo solamente esta configurado para la presentación de Foundation en la página. La idea es que tengo que adecuarme a ese css. que pasa con los demás archivos que viene en el framework. cual es la idea. o como puedo empezar a utilizar de manera adecuanda. muchas gracias por la respuesta. mi correo: miguel.rodriguez.u@gmail.com.
Hola Miguel. Para comenzar te recomiendo que revises si descargaste la versión completa de Foundation. Desde que la página web permite personalizar la versión que descargas es posible descargar una «versión ligera» que no incluye todas las opciones, aunque tiene la ventaja de que puedes personalizarla desde el momento que la descargas.
Mi recomendación, aunque es mucho más complicada, es que aprendas a utilizar SASS para manipular CSS, ya que te permitirá trabajar los estilos de forma más rápida y te ofrece opciones de estilo que CSS no ofrece desde desarrollo (por ejemplo uso de variables), y con esto podrás obtener mayor provecho de Foundation. Sin embargo, para utilizar SASS si tienes que tener un conocimiento avanzado de CSS, si no lo tienes descarga la versión completa o personaliza tu propia versión.
te voy a seguir, estoy trabajando mi primer site con zurb-foundation + compass sass y la verdad me facilita la vida, cuantas horas me ahorra por dios! tengo algunas dudas sobre el uso de las font icons q ofrece zurb pero luego te lo consultare por algun otro lado del blog, abrazo y sigamos con zurb-found!
Hola Juanma, gracias por el comentario y por seguir las noticias del blog. Te comento que mis primeros pasos fueron con Foundation 2 que respondió muy bien para iniciar pero pronto se quedo corto, Bootstrap nunca me termino de convencer (aunque tendré que retomarlo por un cliente) y al final opte por crear un framework propio. No se compara con Foundation o con Bootstrap, de hecho funciona con una lógica diferente, pero a la fecha ha sido mi mejor opción. Te dejo el enlace por si quieres darle un vistazo https://github.com/ivanmendoza/snbx (aún estoy trabajando en la documentación)
excelente ivan lo probare! tengo una duda con algo que va mas alla de cada framework porque es comun en todos, a ver si me sacas tu la duda:
si bien los textos. al menos en zurb-found usan sitema de escalas, no entiendo como poder lograr que el texto se adapte solo a un tamaño adecuado para cada diferente vista (viewport),
digamos, si tengo un en font-size:50px; como hacer que solo baje a ej 25px; en la version mobile, acaso con la mqueries defino un valor de font-size nuevo? o existe un metodo mas agil para que se adapte solo como por ejemplo lo hacen las imagenes?
te consulto porque no logro encontrar la solucion por ningun lado, ni el mejor metodo para hacerlo (que es lo que busco en realidad).
saludos
juan