CSS Layout: O ontem, o hoje e o depois

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

View Slide

@CAIO_GONDIM @ALMIRFILHO

View Slide

GLOBO.COM

View Slide

LOOPINFINITO.COM.BR

View Slide

tabelas
O ONTEM

View Slide

• 1990
html 1.0
• estrutura de documento
• layout com

View Slide

bells and whistles
“Storage of ASCII text, and
display on 24x80 screens, is in the
short term sufficient, and
essential. Addition of graphics
would be an optional extra with
very much less penetration for
the moment.”
Tim Berners-Lee

View Slide

primeiro site ever

View Slide

• 1993
html 2.0
•
• padrao IETF

View Slide

• 1995
html 3.0
•
• nunca foi aprovado
• text flow ao redor de
• elementos matematicos

View Slide

• 1997
html 3.2
•
•nasce o web designer

View Slide

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

View Slide

yahoo!

View Slide

apple.com

View Slide

bol.com.br

View Slide

uol.com.br

View Slide

cade.com.br

View Slide

amazon.com

View Slide

globo.com

View Slide

codigo

WIDTH=128
HEIGHT=1
ALT="">

WIDTH=125 HEIGHT=262
BORDER=0
ALT="Navigation Graphic - See Below"
ISMAP
USEMAP="#newsidebar">

View Slide

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

View Slide

box model
O HOJE

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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
;

View Slide

2002
TABLELESS

View Slide

tabelas para
DADOS TABULARES
box model para
LAYOUTS

View Slide

TABLELESS.COM

View Slide

• alinhar verticalmente
problemas
Conteudo
}
?
.box {
vertical-align: middle;

View Slide

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

View Slide

• 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, .box {
height: 100%;
float: left;
}

View Slide

problemas

.box {
height: 200px;
}
aside, .right {
height: 100%;
float: left;
}
eiusmod ofelquys lotomania ipsum

View Slide

problemas
.box {
height: 200px;
}
aside, .right {
height: 100%;
float: left;
}

View Slide

problemas

.box {
height: 200px;
display: table-row;
}
aside, .right {
height: 100%;
float: left;
display: table-cell;
}

View Slide

table
table-caption
table-cell
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group
tabelas...

View Slide

table
table-caption
table-cell
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group

tabelas...

View Slide

verdade seja dita
2013
2013
O GOOGLE
JA FEZ ATE UM
MEDIDOR DE KI

View Slide

verdade seja dita
2013
2013
E AINDA
NAO SUPERAMOS
AS TABELAS

View Slide

grid
O DEPOIS

View Slide

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

View Slide

assim como tabelas...
LINHAS E
COLUNAS

View Slide

diferente de tabelas...
ESTRUTURALMENTE
INDEPENDENTE

View Slide

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

View Slide

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

View Slide

View Slide

sem
position ?
esqueca!
resize?
esqueca!

View Slide

mão na massa...
DEFININDO
UM GRID

View Slide

html

View Slide

css
display: grid;

View Slide

css
grid-definition-columns: auto auto;
1 2
display: grid;

View Slide

css
grid-definition-rows: auto auto auto;
1 2
3 4
5 6
display: grid;

View Slide

css
1 2
3 4
5 6
AREA DA TELA

View Slide

css
1 2
3 4
5 6
grid-definition-columns: auto 1fr;

View Slide

css
1 2
3 4
5 6
grid-definition-columns: 1fr 1fr;

View Slide

css
1 2
3 4
5 6
grid-definition-columns: 2fr 1fr;

View Slide

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

View Slide

css
content
1
3 4
5 6
RESIZE

View Slide

css
content
1
3 4
5 6
RESIZE
MAIS

View Slide

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

View Slide

mão na massa...
ASSOCIANDO
CONTEUDO

View Slide

html
1 2
3 4
5 6

View Slide

html
c5
c1
c2
c3
c4
• sem blocos para linha/coluna
c6
1 2
3 4
5 6

View Slide

html
• a ordem nao importa
1 2
3 4
5 6

c5
c1
c2
c3
c4
c6

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

mão na massa...
TEMPLATES

View Slide

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

View Slide

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

View Slide

templates responsivos
header
menu content aside
footer

View Slide

header
menu
content
footer
aside

View Slide

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

View Slide

flexbox
O DEPOIS

View Slide

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

View Slide

web site
header
content
ads

View Slide

ads
content2
footer

View Slide

web app
footer
header
side main

View Slide

os x app store

View Slide

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

View Slide

vocabulário
flex-item
flex-item
main size
cross size
main axis
cross axis
flex-container

View Slide

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

View Slide

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

View Slide

.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

View Slide

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;
}

View Slide

.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

View Slide

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

View Slide

cálculo do espaço
.a .b
.container
800px
.c
1 + 2 + 1 = 4
800 / 4 = 200
.a = 1 * 200
.b = 2 * 200
.c = 1 * 200
unidade
proporção
200px 400px 200px

View Slide

1
flex-direction: row;
2 3

View Slide

1
flex-direction: column;
2
3

View Slide

justify-content: flex-start;
1 2 3

View Slide

justify-content: flex-end;
1 2 3

View Slide

justify-content: center;
1 2 3

View Slide

justify-content: space-between;
1 2 3

View Slide

justify-content: space-around;
1 2 3

View Slide

align-items: flex-start;
1 2 3

View Slide

align-items: flex-end;
1 2 3

View Slide

align-items: center;
1 2 3

View Slide

align-items: stretch;
1 2 3

View Slide

order: N;
1 2 3

View Slide

order: N;
3 2
1

View Slide

mix com media queries
header
main
footer
aside1 aside2

View Slide

header
main
footer
aside2
aside1
mix com media queries

View Slide

não é só isso
• respeita media-queries
• respeita max-width, min-width, ...
• inline ou em block

View Slide

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

View Slide

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

View Slide

web app flexible

View Slide

regions
O DEPOIS

View Slide

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

View Slide

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
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.

View Slide

sed do eiusmod kracta caio gondim lorem
enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex
consectetur adipisicing elit,
sed do eiusmod kracta caio
gondim lorem
tempor incididunt ut labore
et dolore magna aliqua. Ut
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

View Slide

conceitos importantes
•named flows
•regions

View Slide

html
...

View Slide

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

View Slide

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

View Slide

sed do eiusmod kracta caio gondim lorem
quis nostrud exercitation ullamco laboris nisi ut aliquip ex
consectetur adipisicing elit,
sed do eiusmod kracta caio
gondim lorem
tempor incididunt ut labore
et dolore magna aliqua. Ut
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

View Slide

regions

View Slide

layouts complexos

View Slide

exclusions
O DEPOIS

View Slide

a tirania do retângulo
ELEMENTOS DE
BLOCO SAO
QUADRADOS

View Slide

border-radius?

View Slide

border-radius?
• molda apenas estilo
• nao molda conteudo

View Slide

shapes!
shape-inside
shape-outside

View Slide

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

View Slide

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, ...);
}

View Slide

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
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

View Slide

shape-outside
p {
// shape-outside: circle(cx, cy, radius);
shape-outside: circle(-50px, 50%, 50%);
}
Sed ast molestie augue sitep amet
leo consequat siuop posuere.
Vestibulum ante ipsum primis in
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

View Slide

shape-outside
.circulo {
// shape-outside: circle(cx, cy, radius);
shape-outside: circle(-100px, 50%, 50%);
}
Sed ast molestie augue sitep amet
leo consequat siuop posuere.
Vestibulum ante ipsum primis in
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
-100px
50%

View Slide

layouts complexos

View Slide

obrigado!
@LOOPINFINITO
LOOPINFINITO.COM.BR

View Slide

CSS Layout: O ontem, o hoje e o depois

CSS Layout: O ontem, o hoje e o depois

Loop Infinito

More Decks by Loop Infinito

Other Decks in Programming

Featured

Transcript