Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bootstrap Survival Guide - early 2016

juanmnl
April 14, 2016

Bootstrap Survival Guide - early 2016

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

juanmnl

April 14, 2016
Tweet

More Decks by juanmnl

Other Decks in Design

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