Bootstrap Workshop

Workshop sobre Bootstrap, donde se aborda la lógica de su funcionamiento, formas correctas de uso, buenas practicas, como incorporarlo al flujo de trabajo y algunos fundamentos de como estructurar CSS modularmente.

Some text were translated from Erik Flowers (http://www.helloerik.com) and Felipe Lavin (www.yukei.net) articles. I couldn't have said it better 😉

Transcript

1. Bootstrap W O R K S H O P
2. Hola! Mi nombre es Franco Moya (Ravenous) Front-end Developer & UX Designer @iamravenous hello@ravenous.io
3. ¿Qué es Bootstrap? Es un framework front-end con enfoque mobile-first para el desarrollo rápido y fácil de sitios y aplicaciones web.
4. Es un producto open source creado el 2011 por Mark Otto (@mdo) y Jacob Thornton (@fat), quienes para su primer lanzamiento, estaban trabajando en Twitter. Esto nació, por una necesidad de estandarizar las herramientas para desarrollo front-end dentro de la compañía. Un poco de historia…
5. ¿Por qué utilizarlo? ✊ • Es de código abierto. • Es una herramienta de uso ágil y sencillo. • Tiene una comunidad enorme que lo respalda y a la vez se esmera en mejorarlo. • Es consistente, detrás hay muchos desarrolladores buscando la mejor solución a los problemas. • Está en constante evolución, las actualizaciones y mejoras son periódicas. • Responsive ⚡ • Un montón de componentes CSS y Javascript a tu disposición. • Es personalizable, más de lo que se ve a simple vista. • Se puede ocupar directamente con preprocesadores de CSS, tiene soporte tanto para Less como Sass. • La versión 4 ya está en fase Alpha. • Tiene una muy buena documentación.
6. ¿Contras? • Define varios selectores profundamente anidados, principalmente en los componentes de navegación (lo cual debería ser corregido en la versión 4 de Bootstrap). • Algunos componentes requieren etiquetas HTML profundamente anidadas. • Puede ser difícil definir tu propio estilo visual, algunos componentes están muy acabados en términos de diseño. • No sigue una convención más estricta de nomenclatura de clases como BEM, OOCSS o SMACSS.
7. Diseño → Estructura • Reconocer elementos de interfaz, para crear patrones de diseño. • Utilización de grillas en herramientas de diseño (Sketch, Photoshop, Illustrator, etc.) • Ser parte de la filosofía mobile-first y enfocarse en el contenido. ¿Cómo utilizarlo?
8. Mobile-first significa establecer estilos de CSS genéricos primero e introducir estilos específicos para pantallas más grandes solo cuando sea apropiado. En vez de crear nuevas reglas solo para sobrescribir el estilo para móviles, tiene mucho más sentido solo introducir reglas cuando estas correspondan. Como resultado tendremos un código mucho más pequeño, escalable y fácil de leer. Mobile-first
9. “El contenido precede al diseño. El diseño en ausencia de contenido, no es diseño, es decoración.” — Jeffrey Zeldman — ¿Enfocarse en el contenido?
10. • Estructura del proyecto • Estructura documento HTML5 • Dependencias Instalación
11. Ejemplo de estructura del proyecto
12. Estructura documento HTML5
13. ¡Personaliza solo con lo que necesites! http://getbootstrap.com/customize/ Eran tantos componentes que no me alcanzaron en la imagen
14. container row columns Sistema de Grillas The big deal
15. El contenedor tiene 2 propósitos: 1. Proporcionar las limitaciones de width para agrupar el contenido. Cuando el viewport cambia, es el container quien se transforma, los rows y columns están basados en porcentajes, por lo cual no necesitan cambiar, solo se adaptan. 2. Proporcionar 15px de padding a cada lado, para que el contenido no toque el borde del navegador. No es recomendado anidar containers
 (uno dentro de otro). Container
16. • Se utilizan para agrupar horizontalmente columnas, lo ideal sería tener columnas que sumen 12. • Se deben colocar dentro de un contenedor, ya sea .container (ancho fijo) o .container-fluid (ancho completo) para la correcta alineación y padding. • El contenido siempre se coloca dentro de las columnas, ya que los row sólo deberían contener como hijos elementos de tipo columna. • Posee un margen negativo de 15px en cada lado, el cual anula el padding del container, ya que cada columna tiene su propio padding. Row
17. Las columnas de la grilla definen su ancho especificando cuántas de las 12 columnas del row utilizan. La nomenclatura de la clase es la siguiente:
 
 .col-tamaño-columnas
 
 Si por ejemplo quieres dividir una fila en cuatro columnas iguales, utilizarías la clase .col-sm-3 (el 3 indica que cada columna ocupa 3 de las 12 columnas en las que se divide cada fila).
 
 Los tamaños disponibles que funcionan en base a los breakpoints de media queries son los siguientes: .col-xs-* Extra Small Menos de 768px
 .col-sm-* Small Devices Más de 768px
 .col-md-* Medium Devices Más de 992px
 .col-lg-* Large Devices Más de 1200px Column
18. Golden Rules • Se puede usar de manera ilimitada. • Se deben anidar dentro de un container o una columna. • Nunca se debe anidar dentro de otro row. • Se pueden anidar eternamente* siguiendo la sintaxis correcta. • Necesitan un row como contenedor. • No debe anidarse directamente en un container. • No debe anidarse directamente en otra columna. • Solo se necesita uno a nivel semántico, se pueden usar varios en un layout, pero no deben anidarse. Container Row Column * Puede no ser tan eterno
19. container El container posee por defecto, 15px de padding a cada lado.
20. container row El row posee un margen negativo de 15px que anula el padding del container.
21. container row column column Cada columna posee los 15px de padding a cada lado nuevamente, asegurando que el contenido quede alejado de los bordes del navegador.
22. Anidado, posicionamiento y visibilidad • Nesting • Offset • Pull & Push • Offset, Pull & Push Resets • Responsive Utilities Sistema de Grillas
23. Nesting Es posible anidar columnas dentro de otras columnas, pero no directamente, para ello se debe utilizar un .row como contenedor de esas columnas, tal como debería ser siempre. Su funcionamiento es prácticamente el mismo, solo que ahora se sobreponen al padding de la columna que los contiene, al igual que como lo hacía anteriormente con el .container En esencia, la columna está actuando como el contenedor, por lo que nunca se necesita un .container dentro de nada.
24. Offset Sirve para desplazar cualquier columna hacia su derecha. Estas clases aumentan el tamaño del margen izquierdo de la columna en una cantidad equivalente a la cantidad de columnas designadas.
 
 La clase .col-sm-offset-3 por ejemplo desplaza la columna a un ancho equivalente a 3 columnas.
25. Pull & Push Es posible reordenar las columnas para cambiar su posición dependiendo del tamaño del navegador. Esto significa que en una pantalla grande, puede tener una grilla diferente que en una pantalla móvil. La clase push moverá columnas a la derecha mientras que la clase pull moverá columnas a la izquierda.
26. Offset, Pull & Push Resets Cada vez que declaramos estas propiedades, quedan activas para resoluciones más altas, por lo cual pueden desordenar nuestro layout a menos que le hagamos reset. Para hacer esto debemos volver a declarar la propiedad que queremos anular, en una resolución mayor y con una cantidad de columnas de cero. Por ejemplo, si reordenamos nuestro contenido en la resolución Extra small utilizamos col- xs-push-6 y col-xs-pull-6
 
 Si queremos que en Small vuelva a la normalidad, debemos usar col-sm-push-0 y col-sm- pull-0 declarando la cantidad de columnas en cero, para así anular su efecto desde esa resolución en adelante.
27. .visible-xs .visible-sm .visible-md .visible-lg Responsive Utilities Bootstrap nos proporciona clases de utilidad para ocultar y mostrar elementos basados en el tamaño del navegador. Esto también nos ayudará al trabajar con el sistema de grillas. .hidden-xs .hidden-sm .hidden-md .hidden-lg
28. Estructura de CSS • Componentes • Elementos • Modificadores • Clases de Utilidad Escalar Bootstrap
29. The right way! Escalar Bootstrap • Utilizar algún preprocesador de CSS (Sass, Less) • Utilizar Bootstrap como un paquete externo (Node.js, Bower, Ruby Gem, Composer, etc.) • Habilitar los componentes según sea necesario. • Utilizar los mixins para tener una estructura más semántica.
30. www.getbootstrap.com
31. www.devschile.cl Comunidad de Slack para Desarrolladores en Chile ¡Únete!
32. gracias! @iamravenous hello@ravenous.io