Bootstrap Survival Guide - early 2016

2224b0579d95aafae306566b134fbebc?s=47 juanmnl
April 14, 2016

Bootstrap Survival Guide - early 2016

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

2224b0579d95aafae306566b134fbebc?s=128

juanmnl

April 14, 2016
Tweet

Transcript

  1. Guía de supervivencia Bootstrap

  2. Hola! Mi nombre es Juan Manuel Cornejo (juanmnl) Soy nuevo

    XD en Thoughtworks Quito @_juanmnl
  3. Are you ready?

  4. ¿Qué es Bootstrap?

  5. Un framework creado por Twitter (@mdo & @fat), que nos

    permite crear interfaces web con CSS y JavaScript.
  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.
  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”.
  8. ¿PROS y Contras de BS?

  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
  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
  11. ¿Cómo usar bootstrap sin perder la cabeza?

  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…
  13. ¡No se puede! :P

  14. ¡Espera! Siempre se puede hacer algo

  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.
  16. http://codeguide.co/

  17. Evitemos caer en errores comunes

  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
  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
  20. Un framework más por favor. (es el último lo prometo)

  21. FIN script @_juanmnl