CSS {Grid} Layout (Front in BH 2k17)

Transcript

1. CSS {GRID} LAYOUT It’s Evolution Baby
2. #2 VEZ EM BH =]
3. #1 - Mineirão - 20.11.2015
4. Quem? •OSS & Community Lover •Front in Floripa •FloripaJS •Fã do Pearl Jam \m/ diogomoretti diogomoretti_
5. Roadmap Table Box Model/Tableless/Grids Flexbox Grid Layout
6. 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.
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. São apenas divs lado-a-lado
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. <div class="col-md-5 col-sm-5 col-xs-12"> <div class="col-md-7 col-sm-7 col-xs-7"> Aí a web…
27. Isso fazia sentido de 2007~2011 com CSS puro! Mas ai…
28. Isso em 2017 é inadmissível
29. "Grids não-semânticos só fazem sentido com CSS Puro" Moretti, Diogo – 2013
30. 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, separação de função e um código manutenível
32. 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
33. FLEXBOX
34. 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/
35. 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+) – 97% https://www.w3.org/TR/css-flexbox-1/
36. 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
37. Sem Flexbox 1 2 3
38. Com Flexbox .container { display: flex; } 1 2 3
39. Centralizar com Flexbox .item { margin: auto; } .container { display: flex; }
40. CSS GRID LAYOUT
41. 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/
42. Em outras palavras…
43. Você vai “fatiar" sua página e depois encaixar os “macro" blocos
44. Suporte 10+ 52+ 57+ 10.1+ 44+ http://caniuse.com/#feat=css-grid Todos os principais browsers ~70%
45. DISCLAIMER
46. 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
47. Sintaxe .container { display: grid; }
48. Exemplo 1 .container { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: 200px 500px 200px; } WTF!???
49. Lines & Sizes 200px 1fr 200px 300px 500px Line 1 Line 2 Line 3 Line 1 Line 2 Line 3 Line 4
50. .header { background: red; grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } Grid Column & Grid Row
51. .header { background: red; grid-column: 1 / 3; grid-row: 1 / 2; } Grid Column & Grid Row
52. .header Exemplo 1: Header
53. .sidebar { background: yellow; grid-column: 2 / 3; grid-row: 2 / 4; } Exemplo 1: Sidebar
54. .header Exemplo 1: Sidebar .sidebar
55. Exemplo 1: Final
56. Ahh, então me dá um exemplo prático
57. https://dribbble.com/shots/1573896-Warehouse
59. header menu tea tea-feat rooms shake-feat shake
60. <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> Estrutura
61. Putz, agora vou ter que decorar onde começa e termina cada bloco…
62. .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
63. .header { grid-area: header; background: red; } Grid Area
64. Grid Area .header
66. Tá, e o responsivo como é que fica?
67. Exemplo 1: Responsive
68. .container { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: 200px 1fr 200px; grid-template-areas: “header header" "content sidebar" "footer footer" } Exemplo 1: Responsive
69. .container { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; grid-template-areas: “header" “content" "sidebar" "footer" } @media (max-width: 580px) { } Exemplo 1: Responsive
70. Exemplo 1: Responsive
71. Beleza, e se eu colocar um “intruso"?
72. Terminologia <div class="container"> <div class="header"></div> <div class=“content"></div> <div class=“intruso"></div> <div class=“sidebar"></div> <div class="footer"></div> </div> <div class=“intruso"></div>
73. Grid Layout X Flexbox
75. Grid Layout & Flexbox Cômodos da casa Disposição dos móveis
76. 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…
77. 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
78. Quem Seguir? @jensimmons @Una @rachelandrew @chriscoyier @meyerweb
79. Por um mundo com mais desenvolvedores… …que não quebrem a web!
80. THANKS! diogo.nu