CSS Grid

Palestra do @meetupCSS SP #frontendweek

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. https://rachelandrew.co.uk/archives/2017/03/03/learning-css-grid-layout/
5. https://rachelandrew.co.uk/ @rachelandrew
7. Arte
10. Impresso
15. Vida
20. A internet é uma réplica do mundo real
27. https://www.amazon.com/New-Media-Art-Taschen-Basic/dp/3822830410
29. https://en.wikipedia.org/wiki/Holy_Grail_(web_design)
32. O físico impacta no virtual!
46. https://www.youtube.com/watch?v=16enLRDbOyY @jensimmons
47. Vantagens
48. Nos permite criar layouts complexos com facilidade. O CSS que precisamos escrever é muito mais simples e fácil de manter.
49. Não é mais necessário usar float ou propriedades similares ao criar layouts complexos. Completa separação entre markup e layout.
50. O que impacta?
51. “Vocês estando deixando o CSS muito complexo. Ele deve ser simples.” - Bert Bos
52. https://youtu.be/RNNxggSLGdo
53. Simplicidade + Flexibilidade Ciclo
54. Infos
55. https://css-tricks.com/snippets/css/complete-guide-grid/
56. https://bocoup.com/blog/css-grid-responsive-and-accessibility
57. http://meyerweb.com/eric/thoughts/2017/03/07/welcome-to-the-grid/
58. https://developers.google.com/web/updates/2017/01/css-grid
59. https://www.sitepoint.com/introducing-the-css-grid-layout/
60. https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
61. http://jensimmons.com/post/mar-1-2017/wow-grid-has-so-many- properties-do-we-need-them-all
62. http://labs.jensimmons.com/
63. http://jensimmons.com/post/feb-27-2017/learn-css-grid
64. http://labs.jensimmons.com/2016/
65. http://labs.jensimmons.com/2016/
66. http://jeffbridgforth.com/css-grid-first-steps/
67. http://gridbyexample.com/learn/2016/12/01/learning-grid/
68. https://la-cascade.io/grid-et-flexbox-le-duo-gagnant/
69. https://tableless.com.br/entendendo-sistemas-de-grid-css-do-zero/
70. http://loopinfinito.com.br/2013/10/08/css-grid-isso-muda-tudo-de-novo/
71. https://www.w3.org/TR/css3-grid-layout/
72. Se animou pra usar?
75. https://medium.com/nossa-coletividad/regrinhas-b%C3%A1sicas-de- conviv%C3%AAncia-em-meetups-89fde78b41d5#.7oomynmdp
76. Obrigada
77. Alda Rocha UX Designer e Web developer @mjcoffeeholick http:/ /mjcoffeeholick.github.io Me add!