Bootstrap - amor e ódio

Palestra na Web.br 2014

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!"
11. "Se você não fizer algo decente, vou droppar seu banco"
13. Vem então o Bootstrap!
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...
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/