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

Bootstrap - amor e ódio

83a8147c3c83c22e1e421c3420e768f9?s=47 hannelita
September 26, 2014

Bootstrap - amor e ódio

Palestra na Web.br 2014

83a8147c3c83c22e1e421c3420e768f9?s=128

hannelita

September 26, 2014
Tweet

More Decks by hannelita

Other Decks in Technology

Transcript

  1. BOOTSTRAP - AMOR E ÓDIO 0

  2. OI Hanneli (H mudo) Codeminer 42 - HIRING! Café, Pokémon,

    Lego, bichos, ciência
  3. O QUE NÃO VAMOS VER AQUI

  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
  5. POR QUE AMOR E ÓDIO?

  6. DEVS DE BACKEND

  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
  8. Ê LINDEZA

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

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

  12. None
  13. Vem então o Bootstrap!

  14. None
  15. "QUE LINDO!!!111!111!"

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

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

  18. #2 - LESS E MUITO JAVASCRIPT DE BRINDE

  19. #3 - RESPONSIVO

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

  21. VOU USAR ISSO <3

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

  23. Vai rolar um fight...

  24. None
  25. None
  26. None
  27. Sabe onde eu vou enfiar esse seu Bootstrap?

  28. CALMA MIIKA S2

  29. PROBLEMAS DO BOOTSTRAP

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

    MUITO BOA
  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 ) ; }
  32. #2 - MUITOS NOMES DE CLASSES POUCO INTUITIVOS

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

  34. #3 - REDESIGN É CUSTOSO

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

  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
  37. #4 - PROBLEMAS SEMÂNTICOS

  38. #4 - PROBLEMAS SEMÂNTICOS < i c l a s

    s = " i c o n - s e a r c h " > < / i >
  39. #4 - PROBLEMAS SEMÂNTICOS WTF O QUE i tem a

    ver com icon??????
  40. #5 - MUITOS SITES TERÃO A MESMA IDENTIDADE VISUAL QUE

    O SEU
  41. E AGORA? O QUE POSSO UTILIZAR?

  42. MOTIVOS PARA UTILIZAR O BOURBON/NEAT

  43. (MEUS GIFS BONS ESTÃO ACABANDO)

  44. #1 - COMPASS TYPE MIXINS

  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!
  46. #3 - DOCUMENTAÇÃO MUITO BOA

  47. NEM TUDO É PERFEITO

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

    NEAT
  49. #1 - É PRECISO CONHECER MAIS SOBRE CSS

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

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

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

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

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

  55. CONCLUSÕES Usar o que form melhor para você. Considero semântica

    muito importante então tendo a priorizá-la.
  56. OBRIGADA!! PERGUNTAS? @hannelita - hannelita@gmail.com

  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/