Partindo do ontem com layouts em tabelas e passando pelo hoje com o box model, iremos explorar as limitações dessas abordagens para entender o que as novas técnicas do depois – flexbox, grids, regions e exclusions – vêm a solucionar.

1. css layout
O ONTEM, O HOJE E O DEPOIS
@LOOPINFINITO

2. @CAIO_GONDIM @ALMIRFILHO

3. GLOBO.COM

4. LOOPINFINITO.COM.BR

5. tabelas
box model
flexbox
1990
1995
1998
2012
? regions exclusions&
<pre>
grid?

6. flexbox 2034
2047regions exclusions&
grid 2012

7. tabelas
O ONTEM

8. • 1990
html 1.0
• estrutura de documento
• layout com <pre>

9. primeiro site ever

10. • 1993
html 2.0
• <img>
• padrao IETF

11. • 1995
html 3.0
• <table>
• nunca foi aprovado
• text flow ao redor de <img>
• elementos matematicos

12. • 1997
html 3.2
• <table border=’0’>
•nasce o web designer

13. html 3.2 spec
“HTML 3.2 includes a widely
deployed subset of the
specification given in RFC 1942
and can be used to markup
tabular material or for layout
purposes.”
W3C HTML 3.2 specification – http://www.w3.org/TR/REC-html32

14. yahoo!

15. apple.com

16. bol.com.br

17. uol.com.br

18. cade.com.br

19. amazon.com

20. globo.com

21. • conteudo e layout misturados
problemas
• render nao incremental
• baixa acessibilidade

22. box model
O HOJE

23. • 1996 (com o HTML 3.2)
css 1
• separa estilo da marcacao
• reuso de estilos
• independente do conteudo (?)

24. css 1
• block-level elements
• margin, padding e border
• width e height
• display e float

25. • 1998 - 2011!
css 2.1
• position
• top, bottom, left e right
• min-height e max-height
• min-width e max-width

26. • 1999 - HOJE
css 3
• CSS basic user interface
module level 3
• box-sizing: border-box

27. margin-top
margin-bottom
margin-left
margin-right
padding-top
padding-bottom
padding-left
padding-right
width x height
border-top-width
border-bottom-width
border-left-width
border-right-width
top
bottom
left
right

28. margin-top
margin-bottom
margin-left
margin-right
padding-top
padding-bottom
padding-left
padding-right
border-top-width
border-bottom-width
border-left-width
border-right-width
width x height
top
bottom
left
right
box-sizing: border-box;

29. 2002TABLELESS

30. tabelas para
DADOS TABULARES

31. tabelas para
DADOS TABULARES
box model para
LAYOUTS

32. TABLELESS.COM.BR

33. • alinhar verticalmente
problemas
Conteudo
.box {
display: table-cell;
vertical-align: middle;
}

34. • igualar altura de regioes
problemas
.container {
display: table-row;
}
.column {
display: table-cell;
}

35. table
table-caption
table-cell
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group
display

36. table
table-caption
table-cell
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group
<table>
tabelas...<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table> <table>

37. verdade seja dita
20132013
E AINDA
NAO SUPERAMOS
AS TABELAS

38. flexbox
O DEPOIS

39. • otimizado para UI layout
• comportamento previsivel
• agnostico de direcao
flexbox

40. web site
header
content
ads

41. ads
content2
footer

42. web app
footer
header
side main

43. os x app store

44. versões
• 2009: display:box; box-{*}
• 2011: display:box; flex()
• 2012: display:flex; flex-{*}

45. vocabulário
flex-item
flex-item
main size
crosssize
main axis
crossaxis
flex-container

46. grow and shrink
.a .a .b
.container {
display: flex;
flex-direction: row;
}
.container
600px

47. flex-grow
.a .a .b
.a {
flex-basis: 113px;
flex-grow: 0;
flex-shrink: 1;
}
.b {
flex-basis: 333px;
flex-grow: 1;
flex-shrink: 0;
}
.container
600px

48. .a .a .b
.a {
flex-basis: 113px;
flex-grow: 0;
flex-shrink: 1;
}
.container
800px
.b {
flex-basis: 333px;
flex-grow: 1;
flex-shrink: 0;
}
flex-grow

49. flex-shrink
.a .a .b
.container
600px
.a {
flex-basis: 113px;
flex-grow: 0;
flex-shrink: 1;
}
.b {
flex-basis: 333px;
flex-grow: 1;
flex-shrink: 0;
}

50. .a .b
.container
500px
.a
.a {
flex-basis: 113px;
flex-grow: 0;
flex-shrink: 1;
}
.b {
flex-basis: 333px;
flex-grow: 1;
flex-shrink: 0;
}
flex-shrink

51. cálculo do espaço
.a .b
.container
800px
.c
.a {
flex: 1;
}
.b {
flex: 2;
}
.c {
flex: 1;
}
css
.container {
display: flex;
}

52. 1
flex-direction: row;
2 3

53. 1
flex-direction: column;
2
3

54. justify-content: flex-start;
1 2 3

55. justify-content: flex-end;
1 2 3

56. justify-content: center;
1 2 3

57. justify-content: space-between;
1 2 3

58. justify-content: space-around;
1 2 3

59. align-items: flex-start;
1 2 3

60. align-items: flex-end;
1 2 3

61. align-items: center;
1 2 3

62. align-items: stretch;
1 2 3

63. order: N;
1 2 3

64. order: N;
3 21

65. order: N;
3 21

66. mix com media queries
header
main
footer
aside1 aside2

67. header
main
footer
aside2
aside1
mix com media queries

68. centralizar elementos
.a
.container {
display: flex;
}
.container
.a {
margin: auto;
}

69. centralizar elementos
.a
.container
.container {
display: flex;
}
.a {
margin: auto;
}

70. web app flexible

71. web app flexible

72. regions
O DEPOIS

73. html
• separacao de conteudo e
apresentacao
• HTML como template
• layouts de impressos

74. Mauris iaculis porttitor
posuere. Praesent id metus
massa, ut blandit odio. Proin
quis tortor orci. Etiam at
risus et justo dignissim
congue. Donec congue
lacinia dui, a porttitor
lectus condimentum
laoreet. Nunc eu
ullamcorper orci. Quisque
eget odio ac lectus
vestibulum faucibus eget in
metus. In pellentesque
faucibus vestibulum. Nulla
at nulla justo, eget luctus
tortor. Nulla facilisi. Duis
aliquet egestas purus in
blandit. Curabitur
vulputate, ligula lacinia
scelerisque tempor, lacus
lacus ornare ante, ac
egestas est urna sit amet
arcu. Class aptent taciti
sociosqu ad litora torquent
per conubia nostra, per
inceptos himenaeos. Sed
layout em colunas
Phasellus molestie magna
non est bibendum non
venenatis nisl tempor.
Suspendisse dictum feugiat
nisl ut dapibus. Mauris
iaculis porttitor posuere.
Praesent id metus massa,
ut blandit odio. Proin quis
tortor orci. Etiam at risus
et justo dignissim congue.
Donec congue lacinia dui, a
porttitor lectus
condimentum laoreet. Nunc
eu ullamcorper orci. Quisque
eget odio ac lectus
vestibulum faucibus eget in
metus. In pellentesque
faucibus vestibulum. Nulla
at nulla justo, eget luctus
tortor. Nulla facilisi. Duis
aliquet egestas purus in
blandit. Curabitur
vulputate, ligula lacinia
scelerisque tempor, lacus
lacus ornare ante, ac
egestas est urna sit amet
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Vivamus luctus urna sed
urna ultricies ac tempor dui
sagittis. In condimentum
facilisis porta. Sed nec diam
eu diam mattis viverra.
Nulla fringilla, orci ac
euismod semper, magna diam
porttitor mauris, quis
sollicitudin sapien justo in
libero. Vestibulum mollis
mauris enim. Morbi euismod
magna ac lorem rutrum
elementum. Donec viverra
auctor lobortis.
Pellentesque eu est a nulla
placerat dignissim. Morbi a
enim in magna semper
bibendum.

75. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod kracta caio gondim lorem
tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod kracta caio
gondim lorem
tempor incididunt ut labore
et dolore magna aliqua. Ut
enim ad minim veniam,
quis nostrud exercitation
ullamco laboris nisi ut aliquip
Lorem ipsum dolor sit
amet, consectetur
adipisicing elit, sed do
eiusmod kracta caio
gondim lorem
tempor incididunt ut
labore et dolore magna
aliqua. Ut enim ad minim
veniam,
Mauris iaculis porttitor posuere.
Praesent id metus massa, ut
blandit odio. Proin quis tortor orci.
Etiam at risus et justo dignissim
congue. Donec congue lacinia dui, a
porttitor lectus condimentum
laoreet. Nunc eu ullamcorper orci.
Quisque eget odio ac lectus
vestibulum faucibus eget in metus.
In pellentesque faucibus
vestibulum. Nulla at nulla justo,
eget luctus tortor. Nulla facilisi.
Duis aliquet egestas purus in
blandit. Curabitur vulputate, ligula
lacinia scelerisque tempor, lacus
lacus ornare ante, ac egestas est
urna sit amet arcu.
layouts complexos

76. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod kracta caio gondim lorem
tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod kracta caio
gondim lorem
tempor incididunt ut labore
et dolore magna aliqua. Ut
enim ad minim veniam,
quis nostrud exercitation
ullamco laboris nisi ut aliquip
Lorem ipsum dolor sit
amet, consectetur
adipisicing elit, sed do
eiusmod kracta caio
gondim lorem
tempor incididunt ut
labore et dolore magna
aliqua. Ut enim ad minim
veniam,
Mauris iaculis porttitor posuere.
Praesent id metus massa, ut
blandit odio. Proin quis tortor orci.
Etiam at risus et justo dignissim
congue. Donec congue lacinia dui, a
porttitor lectus condimentum
laoreet. Nunc eu ullamcorper orci.
Quisque eget odio ac lectus
vestibulum faucibus eget in metus.
In pellentesque faucibus
vestibulum. Nulla at nulla justo,
eget luctus tortor. Nulla facilisi.
Duis aliquet egestas purus in
blandit. Curabitur vulputate, ligula
lacinia scelerisque tempor, lacus
lacus ornare ante, ac egestas est
urna sit amet arcu.
layouts complexos

77. conceitos importantes
•named flows
•regions

78. html
<div class=”content”>
<p> ... </p>
</div>
<div class=”region region-1”></div>
<img src=”” />
<div class=”region region-2”></div>
<div class=”region region-3”></div>
<div class=”region region-4”></div>

79. html
<div class=”content”>
<p> ... </p>
</div>
<div class=”region region-1”></div>
<img src=”” />
<div class=”region region-2”></div>
<div class=”region region-3”></div>
<div class=”region region-4”></div>

80. css
.content {
flow-into: lorem-ipsum;
}
.region {
flow-from: lorem-ipsum;
}

81. css
.content {
flow-into: lorem-ipsum;
}
.region {
flow-from: lorem-ipsum;
}

82. @region
.region-3::region(p) {
color: #BADA55;
}
.region-4::region(p) {
color: red;
}

83. regions

84. regions

85. layouts complexos

86. exclusions
O DEPOIS

87. a tirania do retângulo
ELEMENTOS DE
BLOCO SAO
QUADRADOS

88. a tirania do retângulo
border-radius?

89. a tirania do retângulo
border-radius?
• molda apenas estilo
• nao molda conteudo

90. a tirania do retângulo
Sed at ast molestie augue tad sitep amet leo
consequat siuop posuere. Vestibulum ante ipsum tade
primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Proin vel ante a orci tempus eleifend ut et
magna. Lorem ipsum bdolor sit amet, consectetur
adipiscing elit. Vivamus luctus urna sed urna ultricies ac
tempor dui sagittis. In condimentum facilisis porta. Sed
nec diam eu diam mattis viverra. Nulla fringilla, orci ac
amet euism Sed Sed ast molestie augue sitep amet leo
consequat siuop posuere. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia
Curae; Proin vel ante a orci tempus temo eleifend ut et
magna. Lorem ipsum dolor sito amet, consectetur
adipiscing elit. Vivamus luctus urna sed urna ultricies
actased tempor dui sagittis. In at sectum
condimentum facilisis porta. Sed nec diam eu et magna.
Lorem ipsum dolor sito amet, consectetur adipiscing
elit. Vivamus luctus urna sed urna ultricies actased

91. shapes!
shape-inside
shape-outside

92. shape-inside
.circulo {
// shape-inside: circle(cx, cy, radius);
shape-inside: circle(50%, 50%, 50%);
}
Sed ast
molestie augue sitep
amet leo consequat siuop
posuere. Vestibulum ante ipsum
primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Proin
vel ante a orci tempus eleifend ut et
magna. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus
luctus urna sed urna ultricies ac
tempor dui sagittis. In condimentum
facilisis porta. Sed nec diam eu
diam mattis viverra. Nulla
fringilla, orci ac amet
euism Sed

93. shape-inside
A
Sed
molestie
augue sit
amet leo
consequat as due to a
posuere. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices
posuere cubilia Curae; Proin vel
ante a orci tempus eleifend
ut et magna. Lorem
ipsum dolor sit amet,
consectetur adipiscing
elit. Vivamus luctus urna
sed urna ultricies
ac am
.estrela {
shape-inside: polygon(0px 150px, ...);
}

94. shapes com regions
A Sed
molestie
augue sit
amet leo consequat as
due to a posuere. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Proin vel
ante a orci tempus eleifend
ut et magna. Lorem ipsum
dolor sit amet, soc at
consectetur adipisg elit.
Vivamus luctus urna sed
urna ultricies
ser am
Sed ast
molestie augue sitep
amet leo consequat siuop
posuere. Vestibulum ante ipsum
primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Proin
vel ante a orci tempus eleifend ut et
magna. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus
luctus urna sed urna ultricies ac
tempor dui sagittis. In condimentum
facilisis porta. Sed nec diam eu
diam mattis viverra. Nulla
fringilla, orci ac amet
euism Sed

95. shape-outside
Sed ast molestie augue sitep amet
leo consequat siuop posuere.
Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices
posuere cubilia Curae; Proin vel
ante a orci tempus eleifend ut
et magna. Lorem ipsum dolor
sit amet, consectetur
adipiscing elit. Vivamus luctus
urna sed urna ultricies ac
tempor dui sagittis. In
condimentum facilisis porta. Sed
nec diam eu diam mattis viverra.
nulla fringilla, orci ac amet euism
sed orci ac amet euism
<div class="circulo"></div>
<p>Lorem ipsum dolor sit amet...</p>

96. shape-outside
Sed ast molestie augue sitep amet
leo consequat siuop posuere.
Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices
posuere cubilia Curae; Proin vel
ante a orci tempus eleifend ut
et magna. Lorem ipsum dolor
sit amet, consectetur
adipiscing elit. Vivamus luctus
urna sed urna ultricies ac
tempor dui sagittis. In
condimentum facilisis porta. Sed
nec diam eu diam mattis viverra.
nulla fringilla, orci ac amet euism
sed orci ac amet euism
.circulo {
float: left;
shape-outside: circle(50px, 50%, 50%);
}

97. layouts complexos

98. layouts complexos

99. layouts complexos

100. grid
O DEPOIS

101. • 2012 (W3C draft)
css grid layout
• divide o espaco em regioes

102. assim como tabelas...
LINHAS E
COLUNAS

103. diferente de tabelas...
ESTRUTURALMENTE
INDEPENDENTE

104. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod kracta caio gondim lorem tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod kracta caio gondim lorem
tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non
LOOP
Lorem ipsum
Dolor sit amet
Consectetur adipisicing
Sed do eiusmod
bla bla
footer

105. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio
gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non
LOOP
Lorem ipsum
Dolor sit amet
Consectetur adipisicing
Sed do eiusmod
bla bla
footer
flexivelfixo

106. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio
gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non
LOOP
Lorem ipsum
Dolor sit amet
Consectetur adipisicing
Sed do eiusmod
bla bla
footer
flexivel
fixo

109. sem
position?
esqueca!
resize?
esqueca!

110. mão na massa...
DEFININDO
UM GRID

111. html
<div class="container"></div>

112. css
display: grid;

113. css
grid-template-columns: auto auto;
1 2
display: grid;

114. css
grid-template-rows: auto auto auto;
1 2
3 4
5 6
grid-template-columns: auto auto;
display: grid;

115. css
1 2
3 4
5 6
grid-template-columns: auto auto;
AREA DA TELA

116. css
1 2
3 4
5 6
grid-template-columns: auto 1fr;

117. css
1 2
3 4
5 6
grid-template-columns: 1fr 1fr;

118. css
1 2
3 4
5 6
grid-template-columns: 2fr 1fr;

119. css
content
grid-template-columns:
auto minmax(min-content, 1fr);
1 2
3 4
5 6

120. css
content1
3 4
5 6
RESIZE
grid-template-columns:
auto minmax(min-content, 1fr);

121. css
content1
3 4
5 6
RESIZE
MAIS
grid-template-columns:
auto minmax(min-content, 1fr);

122. minmax()
minmax(800px, 1fr);
minmax(2fr, 3fr);
minmax(50%, 100%);
minmax(10em, 80%);
minmax(min-content, 1fr);
minmax(70%, max-content);
minmax(calc(70% + 80px + 9em), 1fr);
minmax(min-content, max-content) = auto

123. mão na massa...
ASSOCIANDO
CONTEUDO

124. <div class="container">
html
1 2
3 4
5 6
</div>

125. html
<div class="reg5">c5</div>
<div class="reg1">c1</div>
<div class="reg2">c2</div>
<div class="reg3">c3</div>
<div class="reg4">c4</div>
• sem blocos para linha/coluna
<div class="reg6">c6</div>
1 2
3 4
5 6
<div class="container">
</div>

126. html
• a ordem nao importa
1 2
3 4
5 6
<div class="container">
</div>
<div class="reg5">c5</div>
<div class="reg1">c1</div>
<div class="reg2">c2</div>
<div class="reg3">c3</div>
<div class="reg4">c4</div>
<div class="reg6">c6</div>

127. css
2
3 4
5 6
.reg1 {
grid-column: 1;
grid-row: 1;
}
c1

128. css
2
3
5 6
.reg1 {
grid-column: 1;
grid-row: 1;
}
c1 .reg4 {
grid-column: 2;
grid-row: 2;
}
c4

129. css
2
5 6
.reg1 {
grid-column: 1;
grid-row: 1;
}
c1 .reg4 {
grid-column: 2;
grid-row: 2;
}
c4
.reg3 {
grid-column: 1;
grid-row: 2;
}
c3

130. css
2
5 6
.reg1 {
grid-column: 1;
grid-row: 1;
}
c1 .reg4 {
grid-column: 2;
grid-row: 2;
}
c4
.reg3, .reg6 {
grid-column: 1;
grid-row: 2;
}
c3
c6

131. e não é só isso...
•Subgrids
•Span de conteudo
•Alinhamento

132. TEMPLATES

133. grid-template
header
aside content
footer
.container {
display: grid;
grid-template-areas: "header header"
"aside content"
"footer footer";
}

134. grid-template
.container {
display: grid;
grid-template-areas: "header header"
"aside content"
"footer footer";
}
.reg1 { grid-area: header }
.reg2 { grid-area: aside }
.reg3 { grid-area: content }
.reg4 { grid-area: content }
.reg5 { grid-area: content }
.reg6 { grid-area: footer }

135. templates responsivos
header
menu content aside
footer

136. templates responsivos
header
menu
content
footeraside

137. templates responsivos
@media (orientation: landscape){
.container {
grid-template-areas: "header header header"
"menu content aside"
"footer footer footer";
}
}
@media (orientation: portrait){
.container {
grid-template-areas: "header header"
"menu menu"
"content content"
"aside footer";
}
}

138. tabelas
box model
flexbox
regions exclusions
1990
1995
1998
2012
? &
<pre>
grid?

139. ?

140. obrigado!
@LOOPINFINITO
LOOPINFINITO.COM.BR