Architecting your own HTML + CSS framework / Arquitetando seu próprio framework HTML + CSS

This talk was made at The developers conference 2015 in the city of Florianopolis. During the talk I talked about how you can start to develop your own HTML+CSS frameworks. Starting with the subject of the disadvantages of use some of the largest framework available today and going through a lot of development philosophy and code standards, then a overview of dependency management and pre-processor tools (I really want to talk more about those two subjects but I had only 40 minutes to the talk). Important to highlight that the subjects discussed here are all focused in develop code scalable, organized, responsive and focused on performance.

Transcript

2. Arquitetando seu próprio framework HTML + CSS Idmar Ramos Junior Aerochimps
3. Quem sou eu. - Idmar Ramos Junior (Id) - Web desde os 18 anos; - Design Gráfico @ UFSC - Frontend @ Aerochimps - Mentor @ Startup Weekend - Colunista @ bizstart.com.br - Motorcycles & Beers - 27 anos;
4. Antes de começar. - Existem outras 1000 maneiras de fazer; - Eu não sou o dono da verdade; - Interrompam, intervenham, participem! - Inglês! Aprendam inglês! - Inglês! Aprendam inglês!
5. Quem são vocês?
6. Porque não usar o que já existe?
7. Os problemas são… - Já na largada é maior do que você precisa;
8. Os problemas são… - Podem tornar-se um problema com o 
 crescimento da aplicação;
9. Os problemas são… - Limitam sua capacidade de criar e solucionar;
10. Os problemas são… - Viciam seu código;
11. Eles são referências pra você….
12. ….Vamos além de Grids
13. ….Vamos além de Grids Grid não é pra implementar, é pra projetar.
14. Pra entender melhor…
15. Precisamos de filosofia
16. Filosofia é pra seguir…
17. Porque não usar as duas? Design:
18. Porque não usar as duas? Design: Código:
19. Projete mobile first!
20. "O Designer é seu amigo."
21. As camadas
22. HTML
23. HTML
24. HTML Comece aqui!
25. CSS
26. JS
27. JS Hoje não
28. Semântica Faz bem pra saúde
29. HTML5 não é futuro. É presente.
30. HTML5 não é futuro. É presente.
31. HTML5 não é futuro. É presente. HTML 5.1 é futuro
32. Cabeçalho: <header> Navegação: <nav> Data: <date> Sidebar: <aside> Rodapé: <footer> input: text, number, date… E aí por diante…
33. Alinhe com seu time E padronizar o código ajuda!
34. “O código é para o time e não só pra você."
35. Não é com o editor alheio que você deve se preocupar
36. Escreva em Inglês
37. Use caracteres invisíveis
38. Tab é Tab! Não espaço!
39. Tab é Tab! Não espaço!
40. Tab é Tab! Não espaço!
41. Feche com comentário!
42. Atributo também pode quebrar linha!
43. "Padrão é bom, mas demais incomoda."
44. E meus estilos? Não é porque é CSS que não deve ter regra.
45. Use um bom reset.css
46. Use um bom reset.css
47. box-sizing: border-box
48. box-sizing: border-box
49. Cabeçalhos
50. Níveis de cabeçalho
51. camelCase, Dash, Underline
52. Um estilo só? Uma linha só!
53. Um estilo só? Uma linha só! Compartilhando estilos? Quebre linhas!
54. Seletor de no máximo 3 níveis
55. Seletor de no máximo 3 níveis Somar classes conta um nível
56. A caixinha de areia do time
57. A caixinha de areia do time _dev.css
58. Atomic CSS
59. Atomic CSS
60. Usar atomic.css por quê?
61. Atomic CSS
62. Só existe um lugar em que você pode usar !important no seu código. No atomic.css
63. Pré-processadores Isso daria outra palestra
64. A escolha é sua
65. SCSS en passant
66. Pra saber mais:
67. Hands on!
68. O problema do @import
69. O problema do @import Sass resolve!
70. E o responsivo?
71. <meta name=“viewport” />
72. @mediaquerie você já conhece
73. Usando @mediaqueries direito 1: Sente junto com o Designer; 2: Conversem sobre quantos breakpoints criar; 3: Crie uma pasta para o css de cada breakpoint; 4: Defina o atomic.css de cada breakpoint; 5: Do your shit; 6: Lute para manter o número de breakpoints;
74. E lá vamos nós… Hands on!
75. Afinal ninguém vive sem jQuery, Angular, backbone ou Ember ou…. E os plugins?
76. Bower 4 the win!
77. Bower 4 the win!
78. Bower é mas fácil do que você imagina Hands on!
79. Mais claro agora?
80. "O Designer é seu amigo, lembra? Não briguem!”
81. Muito Obrigado!
82. Twiter: @idmarjr Github: /idmarjr Linkedin: /idmarjr Facebook: /idmarjr Twiter: @aerochimps Github: /aerochimps Linkedin: /aerochimps Facebook: /aerochimps