Bootstrap Survival Guide - early 2016

A quick talk i made at ThoughtWorks Porto Alegre Office about using bootstrap

Transcript

1. Guía de
   supervivencia
   Bootstrap
   

   View Slide

2. Hola!
   Mi nombre es
   Juan Manuel Cornejo (juanmnl)
   Soy nuevo XD en
   Thoughtworks Quito
   @_juanmnl
   

   View Slide

3. Are you ready?
   

   View Slide

4. ¿Qué es Bootstrap?
   

   View Slide

5. Un framework creado por Twitter (@mdo
   & @fat), que nos permite crear interfaces
   web con CSS y JavaScript.
   

   View Slide

6. También nos permite adaptar
   (automágicamente) la interfaz del sitio
   web o web-app al tamaño del dispositivo
   en que se lo visualice.
   

   View Slide

7. Es decir, la interfaz se adapta al tamaño
   de una PC, una Tablet, Teléfono u otro
   dispositivo mediante “breakpoints” de
   @media-queries (módulo CSS3).
   Esta técnica de diseño y desarrollo se
   conoce como “responsive design”.
   

   View Slide

8. ¿PROS y Contras de BS?
   

   View Slide

9. - Comunidad mundial gigantesca
   - Creación rápida de mocks y prototipos
   - Responsive design out-of-box
   - Constantemente updated
   - Fácil para diseñadores y desarrolladores
   

   View Slide

10. - No es realmente semántico.
    - Todos los sitios y web apps se asemejan entre sí
    - Puede convertirse rápidamente en una pesadilla de
    “mantenibilidad”
    - Agrega muchas clases al markup
    

    View Slide

11. ¿Cómo usar bootstrap sin perder la cabeza?
    

    View Slide

12. Bootstrap no tiene una manera especifica
    de ser escrito, por ello nos encontramos
    muy seguido con problemas de
    “escalabilidad” del CSS y, lo más común
    en equipos grandes, side-effects de
    overrides.

    Entonces…
    

    View Slide

13. ¡No se puede! :P
    

    View Slide

14. ¡Espera!
    Siempre se puede hacer algo
    

    View Slide

15. Podemos crear un styleguide para HTML
    y CSS, también crear y mantener una
    librería de componentes.
    Esto nos permitirá, a nosotros y a nuestro
    equipo, mantener una consistencia visual
    en todo el proyecto. 

    Una sola forma de escribir overrides,
    clases, mixins, etc…

    Siempre se puede hacer algo.
    

    View Slide

16. http://codeguide.co/
    

    View Slide

17. Evitemos caer en errores comunes
    

    View Slide

18. - Usar las clases GRID de bootstrap como wrappers de
    nuestros componentes, y no como parte de ellos
    - Intentar NO hacer override de las propiedades de
    elementos de grid y layout (containers, rows, cols)
    - Los estilos y scripts de bootstrap no se deben tocar.
    Mantener los assets originales y minificados.
    - CREAR UN STYLEGUIDE PARA EL EQUIPO
    

    View Slide

19. Ejercicio
    https://www.github.com/juanmnl/bs-bits
    - git clone
    - Visualiza la diferencia de “margins” de un elemento
    dentro de .row y uno sin.
    - Visualiza los cambios de “gutter” en cada breakpoint
    - Abre exercise.html y crea tu propio layout
    

    View Slide

20. Un framework más
    por favor.
    (es el último lo prometo)
    

    View Slide

21. FIN script
    @_juanmnl
    

    View Slide