Framework Fight Zurb Foundation vs. Twitter Bootstrap

En el vasto mundo de los prototipos rápidos de marcos y juegos de herramientas CSS, hay un montón de opciones diferentes para elegir, pero desde que Bootstrap de Twitter llegó a la escena, parece que en gran medida se ha tragado este mercado. ¿Hay sitio o razón para algo más?

La gente de Zurb piensa que sí y no están dispuestos a abandonar su proyecto de la Fundación, que ha tenido un gran éxito. Habiendo escrito sobre Bootstrap varias veces en el pasado, voy a saltar a Foundation hoy y veré lo que pienso.

Conocer la fundación

Entonces, ¿qué es la Fundación? Zurb lo describe como "un marco fácil de usar, potente y flexible para construir prototipos y código de producción en cualquier tipo de dispositivo".

Desde esa descripción, se puede decir que Zurb está poniendo mucho énfasis en el aspecto de dispositivos cruzados de su cuadrícula de diseño. Curiosamente, la palabra? Responsive? no aparece en ninguna parte en el sitio de la Fundación (que puedo encontrar), pero los beneficios son definitivamente similares: diseñar un proyecto que funcione en todas partes.

¿Es como Bootstrap?

Estos dos proyectos ciertamente no son idénticos, pero son lo más cercanos a competidores directos que puede obtener. Básicamente, son lo suficientemente similares para que si estás usando uno, es casi seguro que no estés usando el otro.

Tanto Bootstrap como Foundation buscan brindarle todas las herramientas que necesita para realizar rápidamente el diseño basado en CSS y el trabajo de creación de prototipos con algunas mejoras de JavaScript. También se comercializan con un gran énfasis en un diseño limpio y minimalista, que es un resultado del estilo predeterminado extenso en cosas como tipografía. Incluso sus páginas de inicio se ven muy similares:

La cuadrícula

Lo primero a lo que me dirijo con cualquier marco es la cuadrícula. El sistema de diseño suele ser la piedra angular sobre la que se basa toda la experiencia, por lo que hacer esto correctamente es un gran problema.

Con Foundation, comienza con una cuadrícula flexible de doce columnas, que responde bien a los cambios de tamaño del navegador y utiliza las consultas de medios para manejar el cambio a dispositivos más pequeños. En Bootstrap, también tiene una cuadrícula de doce columnas que hace un uso intensivo de las consultas de medios. Aquí tiene la opción de elegir entre columnas estáticas y fluidas, lo que es bueno.

La implementación de la grilla de Foundation debería ser rápida si ha usado otros sistemas de grilla antes. Sí, implica el uso de nombres de clase no semánticos, por lo que si odias los marcos por ese motivo, este no será el que cambie de opinión.

El sistema aquí es lo suficientemente fácil como para que pueda recogerlo casi inmediatamente. Cada vez que desee una nueva fila, cree un div con la clase? Row ?. A partir de aquí tienes doce columnas para rellenar. Puede dividirlo por la mitad con dos divs de seis columnas, cortarlo en tercios con tres divs de cuatro columnas, etc. Simplemente aplique una clase que corresponda al número de columnas que desea completar además de las columnas? clase.

Si recreamos este ejemplo en Bootstrap, la sintaxis es extremadamente similar, aunque más sucinta. ¿Bootstrap no requiere las columnas extra? clase para que pueda recortar su marcado un poco. Es cierto que, sin embargo,? Span6? Seguro que no se lee tan bien como? seis columnas ?.

Ambos sistemas de rejilla tienen todas las características avanzadas que necesita: anidar, desplazar, empujar / tirar, etc. Al igual que con el código anterior, encontrará que con estas características, la sintaxis de Foundation es un poco más sencilla y fácil de leer. Bootstrap es más sucinto.

¿Quién gana la batalla de la red?

Soy un fanático de la grilla y realmente me encanta cavar y ver lo que hace que estas cosas funcionen. He creado páginas con las rejillas Bootstrap y Foundation y, honestamente, las encuentro excelentes. Son tan similares en el enfoque que no creo que esta sea la característica decisiva para cualquiera que intente elegir entre los dos.

Si odias a uno de ellos, probablemente odiarás a ambos y si te gusta uno de ellos, no será difícil cambiar al otro. Solía ​​ser el caso de que Bootstrap hubiera perdido esta batalla sin pensarlo dos veces, pero ahora que Bootstrap 2 ha respondido, lo estoy declarando un empate.

Elementos básicos de la interfaz de usuario

Ambos marcos contienen elementos de UI pre-diseñados pero personalizables para que pueda crear rápidamente su aplicación o página web sin pensar demasiado en cómo va a estructurar las diferentes piezas.

Comencemos mirando una de las piezas más básicas de la interfaz de usuario, un botón. En la base, todo lo que realmente necesita para un botón es una etiqueta de anclaje con el botón? clase aplicada

Sin embargo, esto va a crear un botón increíblemente simple. Si desea hacerlo más interesante, cada pieza adicional de estilo tiene otra clase asociada. Por ejemplo, a continuación he hecho un pequeño botón azul brillante con esquinas redondeadas.

La historia es la misma aquí que con la cuadrícula. El estilo de Foundation es más detallado, pero especialmente en este caso, permite una experiencia más fácil de modificar. En lugar de dividir las clases por lo que hacen, Bootstrap asigna personalidades diferentes a cada clase. ¿Así que puedes elegir entre? Btn-info? y? btn-advertencia? para diferentes opciones de estilo.

En cuanto al estilo, personalmente me gusta el aspecto sutil de gradiente que Bootstrap usa mejor que el aspecto brillante de Foundation, pero se puede personalizar fácilmente en ambos marcos, por lo que es prácticamente un problema.

Formas, pestañas y etiquetas Oh My

Simplemente no vale la pena analizar cada elemento de la interfaz de usuario y comparar la sintaxis, ya debería obtener la imagen. Ambos marcos te abastecen de los elementos de la interfaz de usuario más comunes para que puedas implementarlos prácticamente sin ningún tipo de trabajo pesado.

Pestañas, navegación, migas de pan, formularios, etiquetas, tablas; si los quieres, los tienes independientemente de cuál de estos estés usando. Dicho esto, si buscas cantidad, Bootstrap realmente toma la delantera aquí y parece que simplemente contiene una tonelada de elementos de interfaz de usuario interesantes. Cada marco tiene algunas piezas únicas que no están en el otro, pero Bootstrap gana el juego de los números.

JavaScript Goodies

Foundation no es solo una biblioteca CSS, también tiene algunas características excelentes de JavaScript. Una de mis características favoritas es la presentación de diapositivas Orbit, que es realmente fácil de implementar y personalizar.

Todo lo que necesita para configurar una presentación de diapositivas es un div con algunas imágenes (use las etiquetas alt para los subtítulos). Desde aquí, simplemente apunte su JavaScript a esa división y llame a la? Órbita? función. Si quieres ir más lejos, hay muchas opciones para modificar.

También hay un complemento de ventana modal bastante bueno, algunas informaciones sobre herramientas, funcionalidad de pestañas, menús desplegables, mensajes de alerta y una buena validación de formularios. Al saltar a Bootstrap, vemos la mayoría de los mismos tipos de elementos implementados de maneras sutilmente diferentes. Una vez más, encontramos que la oferta de Bootstrap es un poco más robusta.

Soporte de preprocesador

Un área en la que Foundation y Bootstrap fueron por caminos separados es con su soporte de preprocesador. Foundation se fue con Sass y Compass, mientras que Bootstrap se fue con MENOS. Comencé como fanático de MENOS, pero desde entonces he sido conquistado por el poder de Sass, por lo que me inclino a que me guste más Foundation en este sentido, especialmente dada la integración de Compass.

Compass es una fuente inagotable de calidad de preprocesador y realmente hace que sea fácil codificar CSS3 en todos los navegadores con poco esfuerzo. Siempre me ha sorprendido bastante que Bootstrap haya elegido la ruta LESS en su lugar.

Dicho esto, es interesante observar que Bootstrap casi sirve como Compass for LESS. Al igual que con Compass, Bootstrap viene incorporado con todo tipo de combinaciones útiles que te ayudan a utilizar funciones CSS complicadas con muy poca codificación manual.

Ya sea que esté utilizando Foundation o Bootstrap, aprovechar el soporte del preprocesador hará que sea mucho más fácil personalizar y ampliar el marco.

Cortar la mierda, ¿Quién gana?

Es difícil declarar un ganador aquí. Como mencioné anteriormente, Bootstrap 1 era fácilmente inferior a Foundation simplemente porque el diseño era puramente estático y no respondía. Sin embargo, con Bootstrap 2, Twitter realmente mejoró su juego y ha creado un conjunto de herramientas excepcional y Foundation tiene mucho trabajo que hacer si va a coincidir.

Bootstrap simplemente tiene más que ofrecer desde una perspectiva de lista de características estricta. También está codificado de forma más sucinta, está mejor organizado y está mucho más documentado. Esto se suma al hecho de que la comunidad de desarrolladores ha abrazado completamente a Bootstrap hasta el punto de que los excelentes temas de terceros, complementos y otros extras son fáciles de encontrar.

Dicho esto, hay una pregunta importante aquí: ¿es mejor cuanto más grande? Solo porque Bootstrap parece tener más, no significa necesariamente que sea superior. En el mundo del diseño y desarrollo web, a menudo menos es más. La fundación tiene una sensación más simple y menos hinchada que realmente aprecié. Realmente es increíblemente fácil descargarlo y comenzar a publicar páginas web en poco tiempo.

Los usuarios de Bootstrap intervendrán aquí y señalarán que el argumento hinchado no se aplica porque hay un generador de descargas de Bootstrap personalizado que le permite decidir fácilmente qué quiere y qué no quiere en su marco.

¿Cuál piensas que es mejor?

Debería probar ambos marcos para ver cuál se gelifica mejor. Sin embargo, viniste aquí para una opinión y tengo una para ti. Si solo quieres descargar una de estas bibliotecas, ve con Bootstrap. No soy un fanático de Bootstrap y, para ser honesto, ni siquiera lo he adoptado en mi flujo de trabajo personal. Además, veo a la Fundación como el perdedor y me encantaría otorgarle el premio aquí, pero creo que hay que ponerse al día antes de que eso suceda.

¿Pero que se yo? Ustedes están usando este tipo de herramientas todos los días y quiero escuchar lo que piensan. ¿Es la Fundación mejor que Bootstrap? ¿Por qué o por qué no? ¿Consideraría utilizar alguno de estos en su flujo de trabajo si todavía no lo está?