Probando Bootstrap 3

Por Daniel Segura

www.daniel-segura.com (eternamente en construcción)

hola@daniel-segura.com

¿Qué es Bootstrap 3?

Boostrap es un framework desarrollado por la gente de Twitter y liberado a la comunidad; nos permite desarrollar sitios web responsive e interfaces de forma rápida combinando CSS, HTML5 y Jquery.

¿Framework, librería?

La mitad de las personas lo llama framework, la otra mitad le dice librería.

Convención San Fernando

¿Por qué probar Boostrap?

Ventajas:

• Curva de aprendizaje suave (Tienes que conocer algo de CSS y HTML)
• Rápido desarrollo de sitios web
• Es un compendio de buenas prácticas
• HTML5 + CSS3
• normalize.css
• HTML5 shiv
• Respond.js
• Uso de preprocesadores CSS: LESS y SASS
• Promueve el trabajo con icon fonts

Plantilla básica

El Grid System de Bootstrap

Bootstrap cuenta con un layout responsive de 12 columnas el cual se adapta a los diferentes tamaños de dispositivos. Para trabajar con este layout se necesita usar las clases predefinidas que nos ofrece además de seguir un orden preestablecido con algunas clases.

Veamos el sistema de grillas con ejemplos:

1. Fila por defecto
2. Grid de 12 columnas
3. Podemos personalizar el número de columnas
4. Personalizamos el comportamiento de las columnas
5. Seguimos personalizando el comportamiento de las columnas
6. Comparamos todo

Además del grid system Bootstrap nos ofrece un completo entorno de trabajo:

• Recursos JavaScript (JQuery plugins) para integrarlos en nuestro desarrollo http://getbootstrap.com/javascript/


• Uso de icon fonts: Font Awesome, The Noun Project.


• Un ejemplo del uso de icon fonts


• ¿Quieres trabajar con tus propios iconos? Conviertelos a tipografía con Fontastic.me

No todo es perfecto (1/2)

Asuntos a tener en cuenta:

• Si bien es cierto la curva de aprendizaje es suave, debemos adaptarnos a su nomenclatura y sintaxis.


• Debemos adaptar nuestro diseño al grid de 12 columnas, aquí entra el trabajo en equipo entre diseñadores, programadores, etc. (Si queremos personalizar el sistema de columnas lo podemos hacer en los archivos less).

No todo es perfecto (2/2)

Asuntos a tener en cuenta:

• "Todos los sitios web en Bootstrap son iguales" (Bootstrap es una herramienta para estructurar sitios web; si queremos personalizarlo debemos trabajar el CSS, el diseño y sus componentes (Tipografía, iconos, imagenes, etc).


• Falta de semántica en las clases, excesivo uso de clases (lo podemos personalizar en los archivos less).


• Para modificar los estilos muchas veces tenemos que hacerlo directamente en el DOM.

Un par de consejos

• Aprender el uso de preprocesadores CSS.


• ¿No usarás todos los componentes? No todos los desarrollos necesitan la gran variedad de herramientas que Bootstrap te permite utilizar; por ello podemos personalizar nuestros archivos de descarga.

¿Te interesó un poco?

Recursos para entrar más en materia:

• Bootstrap, sitio web oficial
• LibrosWeb - Bootstrap 3, el manual oficial (Castellano)
• BlackTie.co - Sitio web de plantillas Bootstrap
• Bootply.com - Editor online de Bootstrap, HTML, CSS y JS
• StarBootstrap.com - Sitio web de temas y plantillas

También viene:

Bootstrap y desarrollo de temas bajo Wordpress

¿Preguntas? ¿Comentarios?
¿Chelitas??

¡Gracias!