CSS Grid #AngularSP

Palestra sobre CSS Grid no meetup #AngularSP

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
24. A internet é uma réplica do mundo real
25. em 1990 e tantos…
29. Bem vindos a internet. As regras são:
30. Não temos regras!
31. https://www.amazon.com/New-Media-Art-Taschen-Basic/dp/3822830410
35. https://en.wikipedia.org/wiki/Holy_Grail_(web_design)
39. O físico impacta no virtual!
53. https://www.youtube.com/watch?v=16enLRDbOyY @jensimmons
55. Vantagens
56. Nos permite criar layouts complexos com facilidade. O CSS que precisamos escrever é muito mais simples e fácil de manter.
57. Não é mais necessário usar float ou propriedades similares ao criar layouts complexos. Completa separação entre markup e layout.
59. https://alistapart.com/article/practical-grid
60. O que impacta?
61. “Vocês estão deixando o CSS muito complexo. Ele deve ser simples.” - Bert Bos
62. https://youtu.be/RNNxggSLGdo
63. Simplicidade + Flexibilidade
65. http://tutorialzine.com/2017/03/css-grid-vs-flexbox/
66. Flexbox X CSS Grid
67. https://cloudfour.com/thinks/first-css-grid-layout/
68. Desvantagem
71. CSS GRID
72. Flexbox
73. http://gridbyexample.com/browsers/
75. Criatividade Desenvolvimento
79. Ciclo CSS HTML
80. CSS FRONT DEVS DESIGNER
81. Infos
82. https://css-tricks.com/snippets/css/complete-guide-grid/
83. https://bocoup.com/blog/css-grid-responsive-and-accessibility
84. http://meyerweb.com/eric/thoughts/2017/03/07/welcome-to-the-grid/
85. https://developers.google.com/web/updates/2017/01/css-grid
86. https://www.sitepoint.com/introducing-the-css-grid-layout/
87. https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
88. http://jensimmons.com/post/mar-1-2017/wow-grid-has-so-many- properties-do-we-need-them-all
89. http://labs.jensimmons.com/
90. http://jensimmons.com/post/feb-27-2017/learn-css-grid
91. http://labs.jensimmons.com/2017/exercises.html
92. http://labs.jensimmons.com/2016/
93. http://labs.jensimmons.com/2016/
94. http://jeffbridgforth.com/css-grid-first-steps/
95. http://gridbyexample.com/learn/2016/12/01/learning-grid/
96. http://gridbyexample.com/examples/
97. https://la-cascade.io/grid-et-flexbox-le-duo-gagnant/
98. https://tableless.com.br/entendendo-sistemas-de-grid-css-do-zero/
99. http://loopinfinito.com.br/2013/10/08/css-grid-isso-muda-tudo-de-novo/
100. http://chris.house/blog/a-complete-guide-css-grid-layout/
101. https://www.w3.org/TR/css3-grid-layout/
102. http://thebookdesignblog.com/
103. www.behance.net
104. www.pinterest.com
105. https://medium.com/@mjcoffeeholick/fibonacci-e-se%C3%A7%C3%A3o- %C3%A1urea-e76388749179#.nbkd5yea5
106. https://www.theatlantic.com/technology/archive/2017/03/aristotle- computer/518697/
107. Se animou pra usar?
111. Obrigada
112. Alda Rocha UX Designer e Web developer @mjcoffeeholick http:/ /mjcoffeeholick.github.io Me add!