Bootstrap - amor e ódio

Palestra na Web.br 2014

Transcript

1. BOOTSTRAP - AMOR E
   ÓDIO
   0
   

   View Slide

2. OI
   Hanneli (H mudo)
   Codeminer 42 - HIRING!
   Café, Pokémon, Lego, bichos, ciência
   

   View Slide

3. O QUE NÃO VAMOS VER AQUI
   

   View Slide

4. O QUE VAMOS VER AQUI
   Por que se fala tanto em Bootstrap
   Coisas legais no Bootstrap
   Coisas não tão legais no Bootstrap
   Neat e outras alternativas
   GIFs e imagens legais <3
   

   View Slide

5. POR QUE AMOR E ÓDIO?
   

   View Slide

6. DEVS DE BACKEND
   

   View Slide

7. "Dev de backend é aquele cara que vai fazer uma
   página muito feia, mas cujo servidor permanece
   em pé quase sempre."
   FRONT, Desenvolvedor, 2014
   

   View Slide

8. Ê LINDEZA
   

   View Slide

9. "QUE LINDO, GENTE, DESSA VEZ NÃO DEIXEI O
   FUNDO BRANCO!"
   

   View Slide

10. View Slide

11. "Se você não fizer algo decente, vou droppar seu banco"
    

    View Slide

12. View Slide

13. Vem então o Bootstrap!
    

    View Slide

14. View Slide

15. "QUE LINDO!!!111!111!"
    

    View Slide

16. Fonte: http://www.sitepoint.com/11-reasons-to-use-twitter-
    bootstrap/
    

    View Slide

17. #1 - É MUITO RÁPIDO FAZER O LAYOUT
    PADRÃO
    

    View Slide

18. #2 - LESS E MUITO JAVASCRIPT DE BRINDE
    

    View Slide

19. #3 - RESPONSIVO
    

    View Slide

20. #4 - DOCUMENTAÇÃO BEM ESTRUTURADA E
    INTUITIVA
    

    View Slide

21. VOU USAR ISSO <3
    

    View Slide

22. EEEEEEEEEEPPPAAAAAAAAAAAA
    CCCCCCALLLLLLLMMMAAAAAAAAAAAIIIIIIIIIIII COM ESSE
    BOOTSTRAP!!!!!!!!!111111111!!!!!!
    

    View Slide

23. Vai rolar um fight...
    

    View Slide

24. View Slide

25. View Slide

26. View Slide

27. Sabe onde eu vou enfiar esse seu Bootstrap?
    

    View Slide

28. CALMA MIIKA S2
    

    View Slide

29. PROBLEMAS DO
    BOOTSTRAP
    

    View Slide

30. #1 - A SEPARAÇÃO ENTRE CONTEÚDO E
    APRESENTAÇÃO NÃO É MUITO BOA
    

    View Slide

31. #1 - A SEPARAÇÃO ENTRE CONTEÚDO E APRESENTAÇÃO NÃO
    É MUITO BOA
    <
    d
    i
    v c
    l
    a
    s
    s
    =
    "
    r
    o
    w
    "
    >
    <
    d
    i
    v i
    d
    =
    "
    a
    r
    t
    i
    c
    l
    e
    " c
    l
    a
    s
    s
    =
    "
    s
    p
    a
    n
    8
    "
    >
    .
    .
    .
    <
    /
    d
    i
    v
    >
    <
    d
    i
    v i
    d
    =
    "
    a
    s
    i
    d
    e
    " c
    l
    a
    s
    s
    =
    "
    s
    p
    a
    n
    4
    "
    >
    .
    .
    .
    <
    /
    d
    i
    v
    >
    <
    /
    d
    i
    v
    >
    /
    * L
    E
    S
    S *
    /
    a
    r
    t
    i
    c
    l
    e { .
    c
    o
    l
    u
    m
    n
    (
    8
    )
    ; }
    a
    s
    i
    d
    e { .
    c
    o
    l
    u
    m
    n
    (
    4
    )
    ; }
    

    View Slide

32. #2 - MUITOS NOMES DE CLASSES POUCO
    INTUITIVOS
    

    View Slide

33. #2 - MUITOS NOMES (POUCO INTUITIVOS) DE CLASSES
    

    View Slide

34. #3 - REDESIGN É CUSTOSO
    

    View Slide

35. #3 - REDESIGN É CUSTOSO
    ORIGINAL
    COM ALGUNS DETALHES ALTERADOS
    

    View Slide

36. #3 - REDESIGN É CUSTOSO
    .
    p
    a
    g
    i
    n
    a
    t
    i
    o
    n u
    l {
    b
    o
    r
    d
    e
    r
    -
    r
    a
    d
    i
    u
    s
    : 0
    p
    x
    ;
    b
    o
    x
    -
    s
    h
    a
    d
    o
    w
    : n
    o
    n
    e
    ;
    }
    .
    p
    a
    g
    i
    n
    a
    t
    i
    o
    n u
    l > l
    i > a
    ,
    .
    p
    a
    g
    i
    n
    a
    t
    i
    o
    n u
    l > l
    i > s
    p
    a
    n {
    p
    a
    d
    d
    i
    n
    g
    : 8
    p
    x 1
    6
    p
    x
    ;
    l
    i
    n
    e
    -
    h
    e
    i
    g
    h
    t
    : 1
    e
    m
    ;
    t
    e
    x
    t
    -
    d
    e
    c
    o
    r
    a
    t
    i
    o
    n
    : u
    n
    d
    e
    r
    l
    i
    n
    e
    ;
    b
    a
    c
    k
    g
    r
    o
    u
    n
    d
    -
    c
    o
    l
    o
    r
    : n
    o
    n
    e
    ;
    b
    o
    r
    d
    e
    r
    -
    t
    o
    p
    : n
    o
    n
    e
    ;
    b
    o
    r
    d
    e
    r
    -
    b
    o
    t
    t
    o
    m
    : n
    o
    n
    e
    ;
    }
    .
    p
    a
    g
    i
    n
    a
    t
    i
    o
    n u
    l > l
    i > a
    :
    h
    o
    v
    e
    r
    ,
    .
    p
    a
    g
    i
    n
    a
    t
    i
    o
    n u
    l > .
    a
    c
    t
    i
    v
    e > a
    ,
    .
    p
    a
    g
    i
    n
    a
    t
    i
    o
    n u
    l > .
    a
    c
    t
    i
    v
    e > s
    p
    a
    n {
    b
    a
    c
    k
    g
    r
    o
    u
    n
    d
    -
    c
    o
    l
    o
    r
    : t
    r
    a
    n
    s
    p
    a
    r
    e
    n
    t
    ;
    c
    o
    l
    o
    r
    : b
    l
    a
    c
    k
    ;
    }
    .
    p
    a
    g
    i
    n
    a
    t
    i
    o
    n u
    l > l
    i
    :
    f
    i
    r
    s
    t
    -
    c
    h
    i
    l
    d > a
    ,
    .
    p
    a
    g
    i
    n
    a
    t
    i
    o
    n u
    l > l
    i
    :
    f
    i
    r
    s
    t
    -
    c
    h
    i
    l
    d > s
    p
    a
    n {
    b
    o
    r
    d
    e
    r
    -
    t
    o
    p
    -
    l
    e
    f
    t
    -
    r
    a
    d
    i
    u
    s
    : 0
    ;
    b
    o
    r
    d
    e
    r
    -
    b
    o
    t
    t
    o
    m
    -
    l
    e
    f
    t
    -
    r
    a
    d
    i
    u
    s
    : 0
    ;
    }
    .
    p
    a
    g
    i
    n
    a
    t
    i
    o
    n u
    l > l
    i
    :
    l
    a
    s
    t
    -
    c
    h
    i
    l
    d > a
    ,
    .
    p
    a
    g
    i
    n
    a
    t
    i
    o
    n u
    l > l
    i
    :
    l
    a
    s
    t
    -
    c
    h
    i
    l
    d > s
    p
    a
    n {
    b
    o
    r
    d
    e
    r
    -
    t
    o
    p
    -
    r
    i
    g
    h
    t
    -
    r
    a
    d
    i
    u
    s
    : 0
    ;
    b
    o
    r
    d
    e
    r
    -
    b
    o
    t
    t
    o
    m
    -
    r
    i
    g
    h
    t
    -
    r
    a
    d
    i
    u
    s
    : 0
    ;
    }
    SÓ
    isso
    

    View Slide

37. #4 - PROBLEMAS SEMÂNTICOS
    

    View Slide

38. #4 - PROBLEMAS SEMÂNTICOS
    <
    i c
    l
    a
    s
    s
    =
    "
    i
    c
    o
    n
    -
    s
    e
    a
    r
    c
    h
    "
    >
    <
    /
    i
    >
    

    View Slide

39. #4 - PROBLEMAS SEMÂNTICOS
    WTF O QUE i tem a ver com icon??????
    

    View Slide

40. #5 - MUITOS SITES TERÃO A MESMA
    IDENTIDADE VISUAL QUE O SEU
    

    View Slide

41. E AGORA? O QUE POSSO UTILIZAR?
    

    View Slide

42. MOTIVOS PARA UTILIZAR O BOURBON/NEAT
    

    View Slide

43. (MEUS GIFS BONS ESTÃO ACABANDO)
    

    View Slide

44. #1 - COMPASS TYPE MIXINS
    

    View Slide

45. #2 - MUITO MAIS SEMÂNTICO - VOCÊ
    DETERMINA OS NOMES
    a
    s
    i
    d
    e { @
    i
    n
    c
    l
    u
    d
    e s
    p
    a
    n
    -
    c
    o
    l
    u
    m
    n
    s
    (
    3
    )
    ; }
    s
    e
    c
    t
    i
    o
    n { @
    i
    n
    c
    l
    u
    d
    e s
    p
    a
    n
    -
    c
    o
    l
    u
    m
    n
    s
    (
    6
    )
    ; }
    Livre de rows e cols!
    

    View Slide

46. #3 - DOCUMENTAÇÃO MUITO BOA
    

    View Slide

47. NEM TUDO É PERFEITO
    

    View Slide

48. MOTIVOS PELOS QUAIS VOCÊ PODE NÃO
    CURTIR O BOURBON / NEAT
    

    View Slide

49. #1 - É PRECISO CONHECER MAIS SOBRE CSS
    

    View Slide

50. #2 - ESCREVE-SE MAIS CÓDIGO
    

    View Slide

51. #3 - É PRECISO TER CAUTELA COM OS
    MIXINS.
    

    View Slide

52. AINDA HÁ MAIS OPÇÕES - FOUNDATION
    

    View Slide

53. CONCLUSÕES
    Nem tudo é perfeito
    Escolha o caso mais adequado para você
    

    View Slide

54. CONCLUSÕES
    Sei que ninguém perguntou, mas minha opinião é
    

    View Slide

55. CONCLUSÕES
    Usar o que form melhor para você. Considero semântica muito
    importante então tendo a priorizá-la.
    

    View Slide

56. OBRIGADA!! PERGUNTAS?
    @hannelita - hannelita@gmail.com
    

    View Slide

57. REFERÊNCIAS
    http://www.zingdesign.com/5-reasons-not-to-use-twitter-
    bootstrap/
    http://halanstevens.com/blog/bootstrap-youre-doing-it-
    wrong/
    http://fourword.fourkitchens.com/article/you-dont-need-
    bootstrap
    http://blog.teamtreehouse.com/use-bootstrap-or-foundation
    https://www.liquidlight.co.uk/blog/article/twitter-bootstrap-
    3-the-good-the-bad-the-ugly/
    http://lucisferre.net/2013/06/14/bootstrap-foundation-
    bourbon-neat/
    

    View Slide