CSS Grid

Palestra feita no HE da Plataformatec

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