CSS {Grid} Layout: It's Evolution Baby

Transcript

1. CSS {GRID} LAYOUT It’s Evolution Baby
3. Quem? •Front-end @ Chaordic •Org. Front in Floripa •Fundador do FloripaJS •OSS & Community Lover •Fã do Pearl Jam \m/ diogomoretti diogomoretti_
4. Afinal, o que é CSS Layout? CSS Layout é o uso de CSS (!) para se estruturar uma página web. O termo apareceu com o CSS 1.0 e 2.1 para substituir as famosas tabelas na criação de layouts. Hoje é muito usado pelo W3C para nomear novas especificações.
5. Não vamos falar de
6. Roadmap Table Box Model/Tableless/Grids Flexbox Grid Layout
7. TABLE
8. História das tabelas •Surgiu em 1995 com o HTML 3.0 •Ganhou força (ou seja, mais atributos) juntamente com o HTML 3.2 •Ao contrário do que todo mundo pensa, as tabelas nasceram para tabular dados e TAMBÉM PARA CRIAR LAYOUTS! https://www.w3.org/TR/REC-html32#table
9. Problemas das 'tables' •Estilo e marcação misturados (cellpadding, cellspacing, valign, colspan, rowspan…) •Render não-incremental •Acessibilidade •Código de difícil manutenção e leitura https://en.wikipedia.org/wiki/Incremental_rendering
10. BOX MODEL
11. História do Box Model •Surgiu em 1996 com CSS 1.0 •Conceito do CSS (estilo | marcação) •Aparição de elementos de bloco (<div>, <h1>, <p>) •Propriedades como margin, padding, width, height, display, float, border, background…
12. Box Model – CSS 2.1 •Foco na estruturação de layouts •Propriedades surgiram como position, max-* e min-* •Valores com top, left, bottom, right •Usamos até hoje ¯\_(ツ)_/¯
13. Tableless •Movimento ~2002 •Proposta de deixar TABLE para tabular dados e BOX MODEL para a criação de layouts •Sites surgiram para apoiar a causa: CSS Zen Garden, Tableless, Maujor… •Gostamos até hoje ¯\_(ツ)_/¯
14. Box Model CSS 3 •Box Sizing content padding border margin
15. Box Model CSS 3 •Box Sizing content padding border margin box-sizing: border-box;
16. http://reference.sitepoint.com/css/ie5boxmodel
17. Problemas do Box Model •Alinhar objetos verticalmente •Posicionar divs lado-a-lado •Se for usar float, tem que usar clearfixes •Uma div acompanhando a altura da outra •…e muito mais (muito mesmo) •Ahh, problemas que temos até hoje ¯\_(ツ)_/¯
18. Parece evoluir…
19. …mas a gente não conseguia fazer isso direito: <div> <div> <div>
20. …até hoje!
21. Divs lado-a-lado CAR%#$
22. GRID SYSTEM
23. Grids •Nasceu para resolver problemas ao criar um sistema de colunas •Começou em 2007 com o Blueprint mas seu "boom" foi em 2009 com o 960.gs •É uma abstração do Box Model, porque por trás é CSS 2.1 cheio de gambiarra para funcionar
24. Grids •Isso agora é possível como MÁGICA! 1 2 3 <div class=“container"> <div class=“span-4”>1</div> <div class=“span-4”>2</div> <div class=“span-4”>3</div> </div>
25. Aí em 2011…
26. Isso fazia sentido de 2007~2011 com CSS puro! Mas ai…
27. <div class="col-md-5 col-sm-5 col-xs-12"> <div class="col-md-7 col-sm-7 col-xs-7"> Isso em 2017 é inadmissível
28. "Grids não-semânticos só fazem sentido com CSS Puro" Moretti, Diogo – 2013
29. Grids Semânticos •Se você usa pré-processador, use grid semântico •Bootstrap e Foundation já possuem versões de seus grids de forma semântica (Ex.: SASS) •Melhora a leitura e sua página não é desenhada pelo html, e sim pelo CSS •Afinal, não é isso que buscamos? Semântica e um código manutenível
31. CSS LAYOUT SPECS CSS Grid Layout Module Level 1 Especificação Atual Status CSS Flexible Box Layout Module Level 1 2016 Candidato a recomendação CSS Grid Layout Module Level 1 2017 Candidato a recomendação CSS Template Layout Module 2015 Rascunho CSS Multi-Column Layout Module 2011 Candidato a recomendação
32. FLEXBOX
33. Afinal, o que é Flexbox? A principal ideia é dar ao “container" (pai) a habilidade de mudar o tamanho e direção dos filhos, afim de preencher os espaços e evitar o overflow. https://www.w3.org/TR/css-flexbox-1/
34. Features do Flexbox •Resolve quase todos os problemas do Box Model tradicional •Criado para layout e pequenas partes da APP •Não possui float, overflow… •Força o uso semântico de HTML e CSS •Ótimo suporte (IE10+) – 98% https://www.w3.org/TR/css-flexbox-1/
35. Estrutura para os exemplos <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> flex container flex items
36. Sem Flexbox 1 2 3
37. Com Flexbox .container { display: flex; } 1 2 3
38. Centralizar com Flexbox .item { margin: auto; } .container { display: flex; }
39. CSS GRID LAYOUT
40. CSS Grid Layout? A ideia é dividir sua página em linhas e colunas e permitir posicionar elementos nesses “slots" criados. Também é possível trocar a posição dos elementos usando apenas CSS. https://www.w3.org/TR/css-grid-1/
41. Em outras palavras…
42. Você vai “fatiar" sua página e depois encaixar os “macro" blocos
43. Suporte 10+ 52+ 57+ 10.1+ 44+ http://caniuse.com/#feat=css-grid iOS Safari / Android Chrome e FF
44. Terminologia <div class="container"> <div class="header"></div> <div class="content"></div> <div class=“sidebar"></div> <div class="footer"></div> </div> Grid container Grid items
45. DISCLAIMER
46. Sintaxe .container { display: grid; }
47. Exemplo 1 .container { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: 200px 500px 200px; } WTF!???
48. Lines & Sizes 200px 1fr 200px 300px 500px Line 1 Line 2 Line 3 Line 1 Line 2 Line 3 Line 4
49. .header { background: red; grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } Grid Column & Grid Row
50. .header { background: red; grid-column: 1 / 3; grid-row: 1 / 2; } Grid Column & Grid Row
51. .header Exemplo 1: Header
52. .sidebar { background: yellow; grid-column: 2 / 3; grid-row: 2 / 4; } Exemplo 1: Sidebar
53. .header Exemplo 1: Sidebar .sidebar
54. Exemplo 1: Final
55. Ahh, mas fica tudo muito preso nessa estrutura…
56. .container { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 100vh; grid-gap: 10px; } Exemplo 2 Espaçamento entre linhas e colunas.
57. Exemplo 2 NÃO FAÇA ISSO
58. Ahh, então me dá um exemplo prático
59. https://dribbble.com/shots/1573896-Warehouse
61. header menu tea tea-feat rooms shake-feat shake
62. <div class="container"> <div class="header"></div> <div class="menu"></div> <div class="tea"></div> <div class="tea-feat"></div> <div class="rooms"></div> <div class="shake-feat"></div> <div class="shake"></div> </div> Grid Area
63. Putz, agora vou ter que decorar onde começa e termina cada bloco…
64. .container { display: grid; grid-template-columns: 350px 1fr 350px; grid-template-rows: 600px 200px 200px 200px; grid-template-areas: "header header menu" "tea tea-feat tea-feat" "rooms rooms rooms" "shake shake-feat shake-feat” } Grid Area
65. .header { grid-area: header; background: red; } Grid Area
66. Grid Area .header
68. Tá, e o responsivo como é que fica?
69. .container { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: 200px 1fr 200px; grid-template-areas: “header header" "content sidebar" "footer footer" } Responsive
70. Responsive
71. .container { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; grid-template-areas: “header" “content" "sidebar" "footer" } Responsive @media (max-width: 580px) { }
72. Responsive
73. Mais um exemplo…
75. O que não vimos •Alinhamento do container (justify-items, align- items, justify-content, align-content…) e também dos “items" (justify-self, align-self…) •Subgrid e inline-grid •Propriedades novas como grid-auto-* •Valores novos como span, auto-fill, minmax()… •E outras aplicações…
76. Resources http://jensimmons.com/post/feb-27-2017/learn-css-grid http://gridbyexample.com https://css-tricks.com/snippets/css/complete-guide-grid http://cssgridgarden.com https://github.com/simoneas02/awesome-grid-layout http://www.griddy.io
77. Quem Seguir? @jensimmons @Una @rachelandrew @chriscoyier @meyerweb
78. Por um mundo com mais desenvolvedores… …que não quebrem a web!
79. THANKS! diogo.nu