Diogo Moretti (Chaordic) Vamos falar de CSS Layout, de como evoluímos de tabelas para Tableless, Box Model, Grids, Flexbox… até chegar na nova especificação de Grid Layout. Vale do Carbono Conference

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