miércoles, 15 de febrero de 2012

Bootstrap 2.0: de Twitter para el mundo

Twitter

El equipo de la interfaz web de Twitter publicó ya hace tiempo como código abierto y gratuito Bootstrap, un conjunto de herramientas para trabajar interfaces web de manera consistente y basada en los nuevos estándares.

Bootstrap está basado en HTML5, incluye hojas de estilo en cascada (CSS) y componentes en JavaScript que brindan muchísimas flexibilidad y consistencia para lograr páginas limpias y sencillas, que a primera vista resultan familiares y fáciles de usar, como este ejemplo (sumamente básico, pero ilustrativo):

Ejemplo de Bootstrap

Hace unos días los responsables de Bootstrap, que está alojado en GitHub y es uno de los proyectos más exitosos en el sitio, que recibe además múltiples aportes de la comunidad, liberaron la versión 2.0, que agrega un esquema de trabajo sobre una grilla de 12 columnas que facilita la ubicación de elementos que pueden reacomodarse en diferentes formatos de dispositivo, y permite crear elementos anidados, relativos, etc.

Otra novedad es que todo el manejo de hojas de estilo ahora está basado en LESS, un lenguaje dinámico que extiende y mejora CSS a través de manipulación en JS.

Un último detalle que me parece muy bueno es la posibilidad de configurar el conjunto de herramientas necesarias para un proyecto en particular y poder descargar el paquete mínimo necesario, pero con todas las dependencias y configuración perfectamente resueltas. Así se puede optar por incluir o no cualquiera de estas múltiples características:

Componentes

  • Scaffolding
    • Normalize and reset
    • Body type and links
    • Grid system
    • Layouts
  • Base CSS
    • Headings, body, etc
    • Code and pre
    • Labels
    • Tables
    • Forms
    • Buttons
    • Icons
  • Components
    • Button groups and dropdowns
    • Navs, tabs, and pills
    • Navbar
    • Breadcrumbs
    • Pagination
    • Pager
    • Thumbnails
    • Alerts
    • Progress bars
    • Hero unit
  • JS Components
    • Tooltips
    • Popovers
    • Modals
    • Dropdowns
    • Collapse
    • Carousel
  • Miscellaneous
    • Wells
    • Close icon
    • Utilities
    • Component animations
    • Responsive
    • Responsive layouts

Y también se pueden seleccionar los plugins de jQuery, como transiciones, modal dialogs, dropdowns, tooltips y muchísimas cosas más.

Finalmente también se pueden personalizar los valores básicos de una serie de variables de LESS que se toman como base inicial.

La mejor manera de conocer y valorar Bootstrap es mirar un poco el sitio y descargarlo para probar.