CSS Grid - #FrontendDay

Transcript

1. CSS GRID One layout, multiple ways
2. O que é?
3. “A spec do CSS Grid Layout é uma das poucas novas especificações que estão redefinindo como abordamos layout para a web. Junto com Flexbox e Box Alignment, ela será parte de um sistema moderno de layout para sites e aplicações web.” - Rachel Andrew
4. “A spec do CSS Grid Layout é uma das poucas novas especificações que estão redefinindo como abordamos layout para a web. Junto com Flexbox e Box Alignment, ela será parte de um sistema moderno de layout para sites e aplicações web.” - Rachel Andrew @rachelandrew
5. https://rachelandrew.co.uk/
6. https://rachelandrew.co.uk/archives/2017/03/03/learning-css-grid-layout/
8. Arte
11. Impresso
19. Vida
20. https://www.youtube.com/watch?v=XVLHX0ddtqo
25. A internet é uma réplica do mundo real
26. Strand books NYC - 2016
27. Strand books NYC - 2016
31. lá vem história…
32. No início
33. Computer History Museum SF/CA - 2015
34. Computer History Museum SF/CA - 2015
35. https://pt.wikipedia.org/wiki/Ada_Lovelace
36. Computer History Museum SF/CA - 2015
37. Computer History Museum SF/CA - 2015
38. https://pt.wikipedia.org/wiki/Alan_Turing
39. http://www.imdb.com/title/tt2084970/?ref_=nv_sr_8
40. https://pt.wikipedia.org/wiki/Bletchley_Park
41. Computer History Museum SF/CA - 2015
42. Computer History Museum SF/CA - 2015 Computer History Museum SF/CA - 2015
44. em 1990 e tantos…
45. Tim Berners Lee - www
49. Bem vindos a internet. As regras são:
50. Não temos regras!
51. https://www.amazon.com/New-Media-Art-Taschen-Basic/dp/3822830410
53. Web semântica
54. A Web Semântica é nada mais nada menos, que uma web com toda sua informação organizada de forma que não somente seres humanos possam entendê-la, mas principalmente máquinas. As máquinas nos ajudarão em tarefas que hoje fazemos manualmente. - Diego Eis
59. https://en.wikipedia.org/wiki/Holy_Grail_(web_design)
61. O físico impacta no virtual!
78. https://www.youtube.com/watch?v=16enLRDbOyY @jensimmons
79. Vantagens
80. Nos permite criar layouts complexos com facilidade. O CSS que precisamos escrever é muito mais simples e fácil de manter.
81. Não é mais necessário usar float ou propriedades similares ao criar layouts complexos. Completa separação entre markup e layout.
83. https://alistapart.com/article/practical-grid
84. O que impacta?
85. “Vocês estão deixando o CSS muito complexo. Ele deve ser simples.” - Bert Bos
86. Bert Bos - CSS
87. https://youtu.be/RNNxggSLGdo
88. Simplicidade + Flexibilidade
90. http://tutorialzine.com/2017/03/css-grid-vs-flexbox/
92. Flexbox X CSS Grid
93. https://cloudfour.com/thinks/first-css-grid-layout/
94. Desvantagem
97. CSS GRID
98. Flexbox
99. http://gridbyexample.com/browsers/
101. Criatividade Desenvolvimento
105. Ciclo CSS HTML
106. CSS FRONT DEVS DESIGNER
107. Infos
108. https://css-tricks.com/snippets/css/complete-guide-grid/
109. https://bocoup.com/blog/css-grid-responsive-and-accessibility
110. http://meyerweb.com/eric/thoughts/2017/03/07/welcome-to-the-grid/
111. https://developers.google.com/web/updates/2017/01/css-grid
112. https://www.sitepoint.com/introducing-the-css-grid-layout/
113. https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
114. http://jensimmons.com/post/mar-1-2017/wow-grid-has-so-many- properties-do-we-need-them-all
115. http://labs.jensimmons.com/
116. http://jensimmons.com/post/feb-27-2017/learn-css-grid
117. http://labs.jensimmons.com/2017/exercises.html
118. http://labs.jensimmons.com/2016/
119. http://labs.jensimmons.com/2016/
120. http://jeffbridgforth.com/css-grid-first-steps/
121. http://gridbyexample.com/learn/2016/12/01/learning-grid/
122. http://gridbyexample.com/examples/
123. https://la-cascade.io/grid-et-flexbox-le-duo-gagnant/
124. https://tableless.com.br/entendendo-sistemas-de-grid-css-do-zero/
125. http://chris.house/blog/a-complete-guide-css-grid-layout/
126. https://www.w3.org/TR/css3-grid-layout/
127. http://loopinfinito.com.br/2013/10/08/css-grid-isso-muda-tudo-de-novo/
128. http://thebookdesignblog.com/
129. www.behance.net
130. www.pinterest.com
131. https://medium.com/@mjcoffeeholick/fibonacci-e-se%C3%A7%C3%A3o- %C3%A1urea-e76388749179#.nbkd5yea5
132. https://www.theatlantic.com/technology/archive/2017/03/aristotle- computer/518697/
133. Se animou pra usar?
135. Obrigada
136. Alda Rocha UX Designer e Web developer @mjcoffeeholick http:/ /mjcoffeeholick.github.io Me add!