Un regalo de Twitter: Bootstrap

28 Abr

En esta oportunidad les vamos a contar los principales detalles de Bootstrap, un aporte que Twitter realiza a la comunidad. Y como en Comunidad Fusa estamos implementándolo, aprovechamos para contarles la experiencia!

¿ Qué es Twitter Bootstrap?

Twitter Bootstrap es un Framework para la capa de presentación de una aplicación web. Fue desarrollado por la gente de Twitter hace unos años como herramienta interna de la empresa, y liberado para que desarrolladores (como quien les escribe) puedan usarlo para sus sitios. Como dato curioso, es el proyecto más popular en GitHub.

En su modo más sencillo, Bootstrap nos resuelve el proceso de maquetación y layout de un sitio. Si alguna vez desarrollaste, te habrás encontrado con la dificultad de armar el layout del una web. Seguramente hiciste el menú, la cabecera, el contenido con algunas columnas, el pie de página, etc. Todo esto a nivel diseño tiene su dificultad, y con Bootstrap lo podes resolver en minutos.

Lo que nos propone Bootstrap para resolver el layout de nuestro sitio es una división del sitio en filas (rows) y cada fila en 12 columnas (span):

Grilla de Bootstrap

Cada fila puede dividirse hasta en 12 columnas, y cada columna puede tener tamaño del 1 al 12. Por ejemplo, en la imagen la primer fila tiene 12 columnas de tamaño 1, la segunda tres columnas de tamaño 4, etc. Lo importante es que entre todas las columnas sumemos 12. Veamos como se ve en código una fila:

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

En el ejemplo definimos de manera muy sencilla una fila con una columna de tamaño 4 y otra de tamaño 8. Y esta es la funcionalidad principal de Bootstrap. Lo que tenemos que hacer es pensar nuestro sitio como una gran grilla de contenido, con filas y columnas, y diagramarlo dentro de un contenedor (container). A su vez, cada celda de la grilla puede tener filas y columnas, siempre respetando el tamaño de la celda padre (es decir, si tengo una celda span4, las columnas que definamos adentro no deben superar el tamaño 4, por ejemplo dos columnas span2).

Luego tenemos la posibilidad de usar un contenedor de tamaño fijo (940 pixeles aproximadamente) utilizando la clase “container”, o usar la versión fluida “container-fluid” que utiliza el 100% del ancho de la página y maneja las filas “row-fluid” y sus columnas de forma porcentual. En Fusa estamos utilizando esta última, en donde en cada celda las columnas deben sumar 12 siempre, a diferencia del contenedor de tamaño fijo.

Responsive Design

Otra de las características de Bootstrap es que agregando un segundo css, y definiendo el layout de nuestro sitio con sus clases, el mismo adquiere la capacidad de adaptarse a diferentes resoluciones de pantalla y dispositivos. Esto se denomina “Responsive Design” y posibilita que nuestro sitio se pueda navegar tanto desde una PC, como desde una tablet o celular. Este detalle no es menor: Cada día los nuevos dispositivos son más populares y todo parece indicar que Internet va para esos lados. Y hacer un sitio Responsive a mano no es cosa fácil, así que les recomendamos usar este o cualquier otro framework css.

Más, más y más herramientas

Además de las dos principales características que resumimos hasta ahora, Bootstrap en su versión full trae muchas herramientas que podemos utilizar, entre otras:

  • Base CSS: Los elementos fundamentales de todo html tienen estilos por default que pueden utilizarse: Tipografía, Tablas, Formularios, Botones, Imágenes, Iconos.
  • Componentes: Los más utilizados en todo sitio, como menúes, grupos de botones, thumbnails, barras de progreso, mensajes de éxito, error.
  • Javascript: Agregando el Javascript de Bootstrap, tenemos otra serie de elementos a utilizar, como ventanas modal, tooltips, alertas, slider de imágenes, y muchos etcéteras mas.

Toda la documentación sobre Bootstrap la pueden encontrar en el sitio oficial de bootstrap. Desde el mismo ellos pregonan que es una herramienta “De nerds para nerds”, así que la documentación va al grano y presume conocimientos básicos de html, css y javascript. El resultado es una documentación precisa y concreta.

Y por Fusa como andamos?

Estamos terminando de pasar todo Comunidad Fusa de Formee (framework que estábamos utilizando hasta ahora) a Bootstrap, con lo cuál quedará prolijo y 100% responsive. Así que preparen sus tablets y celulares para ayudarnos a probarlo.

Un saludo!

Uva