Slide 1
Slide 1 text
css layout
O ONTEM, O HOJE E O DEPOIS
@LOOPINFINITO
Slide 2
Slide 2 text
@CAIO_GONDIM @ALMIRFILHO
Slide 3
Slide 3 text
GLOBO.COM
Slide 4
Slide 4 text
LOOPINFINITO.COM.BR
Slide 5
Slide 5 text
tabelas
box model
flexbox
1990
1995
1998
2012
? regions exclusions
&
grid ?
Slide 6
Slide 6 text
flexbox 2034
2047
regions exclusions
&
grid 2012
Slide 7
Slide 7 text
tabelas
O ONTEM
Slide 8
Slide 8 text
• 1990
html 1.0
• estrutura de documento
• layout com
Slide 9
Slide 9 text
primeiro site ever
Slide 10
Slide 10 text
• 1993
html 2.0
• ![]()
• padrao IETF
Slide 11
Slide 11 text
• 1995
html 3.0
•
• nunca foi aprovado
• text flow ao redor de ![]()
• elementos matematicos
Slide 12
Slide 12 text
• 1997
html 3.2
•
•nasce o web designer
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
yahoo!
Slide 15
Slide 15 text
apple.com
Slide 16
Slide 16 text
bol.com.br
Slide 17
Slide 17 text
uol.com.br
Slide 18
Slide 18 text
cade.com.br
Slide 19
Slide 19 text
amazon.com
Slide 20
Slide 20 text
globo.com << 2000
Slide 21
Slide 21 text
globo.com << 2001
Slide 23
Slide 23 text
OMG
Slide 24
Slide 24 text
OMFG whyyy?
Slide 25
Slide 25 text
• conteudo e estilo misturados
problemas
• render nao incremental
• baixa acessibilidade
Slide 26
Slide 26 text
box model
O HOJE
Slide 27
Slide 27 text
• 1996 (com o HTML 3.2)
css 1
• separa estilo da marcacao
• reuso de estilos
• independente do conteudo (?)
Slide 28
Slide 28 text
css 1
• block-level elements
• margin, padding e border
• width e height
• display e float
Slide 29
Slide 29 text
• 1998 - 2011!
css 2.1
• position
• top, bottom, left e right
• min-height e max-height
• min-width e max-width
Slide 30
Slide 30 text
• 1999 - HOJE
css 3
• CSS basic user interface
module level 3
• box-sizing: border-box
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
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
bo
x-
siz
i
ng: bor
der-box
;
Slide 33
Slide 33 text
2002
TABLELESS
Slide 34
Slide 34 text
tabelas para
DADOS TABULARES
box model para
LAYOUTS
Slide 35
Slide 35 text
TABLELESS.COM.BR
Slide 36
Slide 36 text
• alinhar verticalmente
problemas
Conteudo
}
?
.box {
vertical-align: middle;
Slide 37
Slide 37 text
• alinhar verticalmente
problemas
Conteudo
.box {
vertical-align: middle;
}
display: table-cell;
Slide 38
Slide 38 text
• igualar altura de regioes
problemas
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
.box {
height: 200px;
}
aside, .text {
height: 100%;
float: left;
}
Slide 39
Slide 39 text
• igualar altura de regioes
problemas
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
.box {
height: 200px;
}
aside, .text {
height: 100%;
float: left;
}
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod ofelquys lotomania ipsum
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.
Slide 40
Slide 40 text
• igualar altura de regioes
problemas
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
.box {
height: 200px;
}
aside, .text {
height: 100%;
float: left;
}
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod ofelquys lotomania ipsum
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.
Slide 41
Slide 41 text
• igualar altura de regioes
problemas
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 ofelquys lotomania ipsum
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.
.box {
height: 200px;
display: table-row;
}
aside, .right {
height: 100%;
float: left;
display: table-cell;
}
Slide 42
Slide 42 text
table
table-caption
table-cell
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group
display
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
verdade seja dita
2013
2013
E AINDA
NAO SUPERAMOS
AS TABELAS
Slide 45
Slide 45 text
flexbox
O DEPOIS
Slide 46
Slide 46 text
• otimizado para UI layout
• comportamento previsivel
• agnostico de direcao
flexbox
Slide 47
Slide 47 text
web site
header
content
ads
Slide 48
Slide 48 text
ads
content2
footer
Slide 49
Slide 49 text
web app
footer
header
side main
Slide 50
Slide 50 text
os x app store
Slide 51
Slide 51 text
vantagens
• agnostico a direcao
• modificar ordem s/ estrutura
• alinhamento left, right, center, top,
bottom, whatever
Slide 52
Slide 52 text
versões
• 2009: display:box; box-{*}
• 2011: display:box; flex()
• 2012: display:flex; flex-{*}
Slide 53
Slide 53 text
vocabulário
flex-item
flex-item
main size
cross size
main axis
cross axis
flex-container
Slide 54
Slide 54 text
grow and shrink
.a .a .b
.container {
display: flex;
flex-direction: row;
}
.container
600px
Slide 55
Slide 55 text
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
Slide 56
Slide 56 text
.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
Slide 57
Slide 57 text
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;
}
Slide 58
Slide 58 text
.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
Slide 59
Slide 59 text
cálculo do espaço
.a .b
.container
800px
.c
.a {
flex: 1;
}
.b {
flex: 2;
}
.c {
flex: 1;
}
css
.container {
display: flex;
}
Slide 60
Slide 60 text
A
flex-direction: row;
B C
Slide 61
Slide 61 text
A
flex-direction: column;
B
C
Slide 62
Slide 62 text
justify-content: flex-start;
A B C
Slide 63
Slide 63 text
justify-content: flex-end;
A B C
Slide 64
Slide 64 text
justify-content: center;
A B C
Slide 65
Slide 65 text
justify-content: space-between;
A B C
Slide 66
Slide 66 text
justify-content: space-around;
A B C
Slide 67
Slide 67 text
A B C
flex: 1;
Slide 68
Slide 68 text
A B C
flex: 2;
Slide 69
Slide 69 text
align-items: flex-start;
A B C
Slide 70
Slide 70 text
align-items: flex-end;
A B C
Slide 71
Slide 71 text
align-items: center;
A B C
Slide 72
Slide 72 text
align-items: stretch;
A B C
Slide 73
Slide 73 text
order: N;
A B C
Slide 74
Slide 74 text
order: N;
C B
A
Slide 75
Slide 75 text
order: N;
C B
A
Slide 76
Slide 76 text
mix com media queries
header
main
footer
aside1 aside2
Slide 77
Slide 77 text
header
main
footer
aside2
aside1
mix com media queries
Slide 78
Slide 78 text
centralizar elementos
.a
.container {
display: flex;
}
.container
.a {
margin: auto;
}
Slide 79
Slide 79 text
centralizar elementos
.a
.container
.container {
display: flex;
}
.a {
margin: auto;
}
Slide 80
Slide 80 text
web app flexible
Slide 81
Slide 81 text
web app flexible
Slide 82
Slide 82 text
regions
O DEPOIS
Slide 83
Slide 83 text
html
• separacao de conteudo e
apresentacao
• HTML como template
• layouts de impressos
Slide 84
Slide 84 text
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.
Slide 85
Slide 85 text
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
Slide 86
Slide 86 text
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
Slide 87
Slide 87 text
conceitos importantes
•named flows
•regions
Slide 88
Slide 88 text
html
...
Slide 89
Slide 89 text
html
...
Slide 90
Slide 90 text
css
.content {
flow-into: post-text;
}
.region {
flow-from: post-text;
}
Slide 91
Slide 91 text
css
.content {
flow-into: post-text;
}
.region {
flow-from: post-text;
}
Slide 92
Slide 92 text
::region()
.region-3::region(p) {
color: #BADA55;
}
.region-4::region(p) {
color: red;
}
Slide 93
Slide 93 text
regions
Slide 94
Slide 94 text
regions
Slide 95
Slide 95 text
layouts complexos
Slide 96
Slide 96 text
exclusions
O DEPOIS
Slide 97
Slide 97 text
a tirania do retângulo
ELEMENTOS DE
BLOCO SAO
QUADRADOS
Slide 98
Slide 98 text
a tirania do retângulo
border-radius?
Slide 99
Slide 99 text
a tirania do retângulo
border-radius?
• molda apenas estilo
• nao molda conteudo
Slide 100
Slide 100 text
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
Slide 101
Slide 101 text
shapes!
shape-inside
shape-outside
Slide 102
Slide 102 text
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
Slide 103
Slide 103 text
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, ...);
}
Slide 104
Slide 104 text
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
Slide 105
Slide 105 text
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
Lorem ipsum dolor sit amet...
Slide 106
Slide 106 text
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%);
}
Slide 107
Slide 107 text
layouts complexos
Slide 108
Slide 108 text
layouts complexos
Slide 109
Slide 109 text
layouts complexos
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
No content
Slide 112
Slide 112 text
grid
O DEPOIS
Slide 113
Slide 113 text
• 2012 (W3C draft)
css grid layout
• divide o espaco em regioes
Slide 114
Slide 114 text
assim como tabelas...
LINHAS E
COLUNAS
Slide 115
Slide 115 text
diferente de tabelas...
ESTRUTURALMENTE
INDEPENDENTE
Slide 116
Slide 116 text
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
Slide 117
Slide 117 text
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
Slide 118
Slide 118 text
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
Slide 119
Slide 119 text
No content
Slide 120
Slide 120 text
No content
Slide 121
Slide 121 text
sem
position ?
esqueca!
resize?
esqueca!
Slide 122
Slide 122 text
mão na massa...
DEFININDO
UM GRID
Slide 123
Slide 123 text
html
Slide 124
Slide 124 text
css
display: grid;
Slide 125
Slide 125 text
css
grid-template-columns: auto auto;
1 2
display: grid;
Slide 126
Slide 126 text
css
grid-template-rows: auto auto auto;
1 2
3 4
5 6
grid-template-columns: auto auto;
display: grid;
Slide 127
Slide 127 text
css
1 2
3 4
5 6
grid-template-columns: auto auto;
AREA DA TELA
Slide 128
Slide 128 text
css
1 2
3 4
5 6
grid-template-columns: auto 1fr;
Slide 129
Slide 129 text
css
1 2
3 4
5 6
grid-template-columns: 1fr 1fr;
Slide 130
Slide 130 text
css
1 2
3 4
5 6
grid-template-columns: 2fr 1fr;
Slide 131
Slide 131 text
css
content
grid-template-columns:
auto minmax(min-content, 1fr);
1 2
3 4
5 6
Slide 132
Slide 132 text
css
content
1
3 4
5 6
RESIZE
grid-template-columns:
auto minmax(min-content, 1fr);
Slide 133
Slide 133 text
css
content
1
3 4
5 6
RESIZE
MAIS
grid-template-columns:
auto minmax(min-content, 1fr);
Slide 134
Slide 134 text
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
Slide 135
Slide 135 text
mão na massa...
ASSOCIANDO
CONTEUDO
Slide 136
Slide 136 text
html
1 2
3 4
5 6
Slide 137
Slide 137 text
html
c5
c1
c2
c3
c4
• sem blocos para linha/coluna
c6
1 2
3 4
5 6
Slide 138
Slide 138 text
html
• a ordem nao importa
1 2
3 4
5 6
c5
c1
c2
c3
c4
c6
Slide 139
Slide 139 text
css
2
3 4
5 6
.reg1 {
grid-column: 1;
grid-row: 1;
}
c1
Slide 140
Slide 140 text
css
2
3
5 6
.reg1 {
grid-column: 1;
grid-row: 1;
}
c1 .reg4 {
grid-column: 2;
grid-row: 2;
}
c4
Slide 141
Slide 141 text
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
Slide 142
Slide 142 text
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
Slide 143
Slide 143 text
e não é só isso...
•Subgrids
•Span de conteudo
•Alinhamento
Slide 144
Slide 144 text
TEMPLATES
Slide 145
Slide 145 text
grid-template
header
aside content
footer
.container {
display: grid;
grid-template-areas: "header header"
"aside content"
"footer footer";
}
Slide 146
Slide 146 text
grid-template
.container {
display: grid;
grid-template-areas: "header header"
"aside content"
"footer footer";
}
Slide 147
Slide 147 text
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 }
Slide 148
Slide 148 text
templates responsivos
header
menu content aside
footer
Slide 149
Slide 149 text
templates responsivos
header
menu
content
footer
aside
Slide 150
Slide 150 text
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";
}
}
Slide 151
Slide 151 text
tabelas
box model
flexbox
regions exclusions
1990
1995
1998
2012
? &
grid ?
Slide 152
Slide 152 text
?
Slide 153
Slide 153 text
obrigado!
@LOOPINFINITO
LOOPINFINITO.COM.BR