Twitter como viene siendo habitual ha lanzando una nueva herramienta Open Source para recompensar a la comunidad, como muestra de agradecimiento a los beneficios que obtiene la compañía al usar herramienta de código abierto en sus proyectos. En esta ocasión se trata de Twitter Bootstrap, un conjunto de herramientas front-end para el desarrollo rápido de aplicaciones web. En definitiva, un conjunto de CSS y HTML que utiliza algunas de las técnicas más modernas para ofrecer plantillas para maquetar, estilos estilos para tipografías, formularios o botones en una librería (de apenas 6k con gzip).
Twitter Bootstrap es una solución flexible que ofrece muchas más potencia que el CSS normal. Conseguimos una serie de características extras como las declaraciones anidadas, mixins, operaciones y funciones de color. Es fácil de implementar en el código tan sólo incluyendo la declaración en la cabecera y usar los componentes disponibles.
La evolución de Bootstrap dentro de Twitter ha sido un trabajo constante para disponer de una herramienta que les permitiera escalar más fácilmente y mantener los proyectos que iban desarrollando. Al principio de todo cada ingeniero usaba cualquier librería con la que estuviera familiarizado lo que producía graves inconsistencias al intentar crecer. Por lo tanto Twitter Bootstrap es un gran ejemplo para todos los desarrolladores que trabajamos en compañías grandes en la que es necesario disponer de un framework uniforme para ir evolucionando.
Podéis echar un vistazo a todo el código en la sección que dispone Twitter en GitHub. Allí comprobaréis todo lo los archivos que lo componen por separado:
reset.css para eliminar los elementos innecesarios.
Variables de color y preboot.less mixins para conseguir gradientes, transparencias y transiciones.
scaffolding.less elementos básicos y globales para generación de grid, diseño estructural y las diferentes plantillas de páginas.
type.less con estilos para el cuerpo de textos, listas y tipologías versátiles.
pattern.less elementos para navegación, modales, paneles de advertencias…
forms.less estilos para los campos de entrada, formularios y estados de validación.
tables.less estilos para maquetar datos tabulados.
Vía | Twitter Dev Blog
Más información | Twitter Bootstrap