Post on 15-Dec-2014
description
css layoutO ONTEM, O HOJE E O DEPOIS
@LOOPINFINITO
@CAIO_GONDIM @ALMIRFILHO
GLOBO.COM
LOOPINFINITO.COM.BR
tabelas
box model
flexbox
1990
1995
1998
2012
? regions exclusions&
<pre>
grid?
flexbox 2034
2047regions exclusions&
grid 2012
tabelasO ONTEM
• 1990
html 1.0
• estrutura de documento
• layout com <pre>
primeiro site ever
• 1993
html 2.0
• <img>• padrao IETF
• 1995
html 3.0
• <table>
• nunca foi aprovado
• text flow ao redor de <img>
• elementos matematicos
• 1997
html 3.2
• <table border=’0’>
•nasce o web designer
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
yahoo!
apple.com
bol.com.br
uol.com.br
cade.com.br
amazon.com
globo.com
• conteudo e layout misturados
problemas
• render nao incremental
• baixa acessibilidade
box modelO HOJE
• 1996 (com o HTML 3.2)
css 1
• separa estilo da marcacao
• reuso de estilos
• independente do conteudo (?)
css 1
• block-level elements
• margin, padding e border
• width e height
• display e float
• 1998 - 2011!
css 2.1
• position
• top, bottom, left e right
• min-height e max-height
• min-width e max-width
• 1999 - HOJE
css 3
• CSS basic user interface module level 3
• box-sizing: border-box
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
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
rightbox-sizing: border-box;
2002TABLELESS
tabelas paraDADOS TABULARES
tabelas paraDADOS TABULARES
box model paraLAYOUTS
TABLELESS.COM.BR
• alinhar verticalmente
problemas
Conteudo
.box {
display: table-cell;
vertical-align: middle;
}
• igualar altura de regioes
problemas
.container {
display: table-row;
}
.column {
display: table-cell;
}
tabletable-captiontable-celltable-columntable-column-grouptable-footer-grouptable-header-grouptable-rowtable-row-group
display
tabletable-captiontable-celltable-columntable-column-grouptable-footer-grouptable-header-grouptable-rowtable-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>
<table> <table>
verdade seja dita
20132013
E AINDA NAO SUPERAMOS AS TABELAS
flexboxO DEPOIS
• otimizado para UI layout
• comportamento previsivel
• agnostico de direcao
flexbox
web site
header
content
ads
ads
content2
footer
web app
footer
header
side main
os x app store
versões
• 2009: display:box; box-{*}
• 2011: display:box; flex()
• 2012: display:flex; flex-{*}
vocabulário
flex-item
flex-item
main sizecr
oss
size
main axis
cros
s ax
is
flex-container
grow and shrink
.a .a .b
.container {
display: flex;
flex-direction: row;
}
.container
600px
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
.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
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;
}
.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
cálculo do espaço
.a .b
.container
800px
.c
.a {
flex: 1;
}
.b {
flex: 2;
}
.c {
flex: 1;
}
css
.container {
display: flex;
}
1
flex-direction: row;
2 3
1
flex-direction: column;
2
3
justify-content: flex-start;
1 2 3
justify-content: flex-end;
1 2 3
justify-content: center;
1 2 3
justify-content: space-between;
1 2 3
justify-content: space-around;
1 2 3
align-items: flex-start;
1 2 3
align-items: flex-end;
1 2 3
align-items: center;
1 2 3
align-items: stretch;
1 2 3
order: N;
1 2 3
order: N;
3 21
order: N;
3 21
mix com media queries
header
main
footer
aside1 aside2
header
main
footer
aside2
aside1
mix com media queries
centralizar elementos
.a
.container {
display: flex;
}
.container
.a {
margin: auto;
}
centralizar elementos
.a
.container
.container {
display: flex;
}
.a {
margin: auto;
}
web app flexible
web app flexible
regionsO DEPOIS
html
• separacao de conteudo e apresentacao
• HTML como template
• layouts de impressos
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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim loremtempor 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 loremtempor 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 loremtempor 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
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim loremtempor 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 loremtempor 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 loremtempor 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
conceitos importantes
•named flows
•regions
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>
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>
css
.content {
flow-into: lorem-ipsum;
}
.region {
flow-from: lorem-ipsum;
}
css
.content {
flow-into: lorem-ipsum;
}
.region {
flow-from: lorem-ipsum;
}
@region
.region-3::region(p) {
color: #BADA55;
}
.region-4::region(p) {
color: red;
}
regions
regions
layouts complexos
exclusionsO DEPOIS
a tirania do retângulo
ELEMENTOS DE BLOCO SAO QUADRADOS
a tirania do retângulo
border-radius?
a tirania do retângulo
border-radius?
• molda apenas estilo
• nao molda conteudo
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
shapes!
shape-insideshape-outside
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
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, ...);
}
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
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>
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%);}
layouts complexos
layouts complexos
layouts complexos
gridO DEPOIS
• 2012 (W3C draft)
css grid layout
• divide o espaco em regioes
assim como tabelas...
LINHAS ECOLUNAS
diferente de tabelas...
ESTRUTURALMENTE INDEPENDENTE
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
LOOPLorem ipsum
Dolor sit amet
Consectetur adipisicing
Sed do eiusmod
bla bla
footer
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
LOOPLorem ipsum
Dolor sit amet
Consectetur adipisicing
Sed do eiusmod
bla bla
footer
flexivelfixo
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
LOOPLorem ipsum
Dolor sit amet
Consectetur adipisicing
Sed do eiusmod
bla bla
footer
flexivel
fixo
semposition ?esqueca!
resize?esqueca!
mão na massa...
DEFININDOUM GRID
html
<div class="container"></div>
css
display: grid;
css
grid-template-columns: auto auto;
1 2
display: grid;
css
grid-template-rows: auto auto auto;
1 2
3 4
5 6
grid-template-columns: auto auto;
display: grid;
css
1 2
3 4
5 6
grid-template-columns: auto auto;
AREA DA TELA
css
1 2
3 4
5 6
grid-template-columns: auto 1fr;
css
1 2
3 4
5 6
grid-template-columns: 1fr 1fr;
css
1 2
3 4
5 6
grid-template-columns: 2fr 1fr;
css
content
grid-template-columns:
auto minmax(min-content, 1fr);
1 2
3 4
5 6
css
content1
3 4
5 6
RESIZE
grid-template-columns:
auto minmax(min-content, 1fr);
css
content1
3 4
5 6
RESIZEMAIS
grid-template-columns:
auto minmax(min-content, 1fr);
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
mão na massa...
ASSOCIANDOCONTEUDO
<div class="container">
html
1 2
3 4
5 6
</div>
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>
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>
css
2
3 4
5 6
.reg1 {
grid-column: 1;
grid-row: 1;
}
c1
css
2
3
5 6
.reg1 {
grid-column: 1;
grid-row: 1;
}
c1 .reg4 {
grid-column: 2;
grid-row: 2;
}
c4
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
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
e não é só isso...
•Subgrids
•Span de conteudo
•Alinhamento
TEMPLATES
grid-template
header
aside content
footer
.container { display: grid; grid-template-areas: "header header" "aside content" "footer footer";}
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 }
templates responsivos
header
menu content aside
footer
templates responsivos
header
menu
content
footeraside
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"; }}
tabelas
box model
flexbox
regions exclusions
1990
1995
1998
2012
? &
<pre>
grid?
?
obrigado!@LOOPINFINITO
LOOPINFINITO.COM.BR