css layout: o ontem, o hoje e o depois

css layoutO ONTEM, O HOJE E O DEPOIS

@LOOPINFINITO

@CAIO_GONDIM @ALMIRFILHO

GLOBO.COM

LOOPINFINITO.COM.BR

tabelasO ONTEM

• 1990

html 1.0

• estrutura de documento

• layout com <pre>

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

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

http://www.w3.org/TR/REC-html32#refs

http://www.w3.org/TR/REC-html32#refs

http://www.w3.org/TR/REC-html32

http://www.w3.org/TR/REC-html32

yahoo!

apple.com

bol.com.br

uol.com.br

cade.com.br

amazon.com

globo.com

codigo

<A NAME="topofpage"><TABLE WIDTH=598 BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR VALIGN="TOP"> <TD WIDTH=128 ROWSPAN=3 VALIGN="TOP"> <IMG SRC="/web/19961022105458im_/http://www4.apple.com/home/elements/spacer2.gif" WIDTH=128 HEIGHT=1 ALT=""><BR>  <A HREF="/web/19961022105458/http://www5.apple.com/cgi/imagemap/mapserve.acgi$home/newsidebar.map"> <IMG SRC="/web/19961022105458im_/http://www4.apple.com/home/elements/sidebar.gif" WIDTH=125 HEIGHT=262 BORDER=0 ALT="Navigation Graphic - See Below" ISMAP USEMAP="#newsidebar"></A> <BR></TD>  <MAP NAME="newsidebar"> <AREA SHAPE="rect" COORDS="37,38,84,57" HREF="/web/19961022105458/http://www.apple.com/main/find.html"> <AREA SHAPE="rect" COORDS="0,69,128,93" HREF="/web/19961022105458/http://www2.apple.com/documents/productsupport.html"> <AREA SHAPE="rect" COORDS="0,97,128,121" HREF="/web/19961022105458/http://www.info.apple.com/"> <AREA SHAPE="rect" COORDS="0,125,128,149" HREF="/web/19961022105458/http://www2.apple.com/documents/techres.html"> <AREA SHAPE="rect" COORDS="0,153,128,177" HREF="/web/19961022105458/http://devworld.apple.com/"> <AREA SHAPE="rect" COORDS="0,181,128,205" HREF="/web/19961022105458/http://www2.apple.com/documents/groups.html"> <AREA SHAPE="rect" COORDS="0,209,128,233" HREF="/web/19961022105458/http://www2.apple.com/documents/resources.html"> <AREA SHAPE="rect" COORDS="0,237,128,261" HREF="/web/19961022105458/http://www2.apple.com/documents/about.html"> </MAP>

 <TD WIDTH=7 ROWSPAN=6> <IMG SRC="/web/19961022105458im_/http://www4.apple.com/home/elements/spacer.gif" ALT="" WIDTH=7 HEIGHT=1></TD>  <TD WIDTH=463 ALIGN="CENTER" COLSPAN=2> <IMG SRC="/web/19961022105458im_/http://www4.apple.com/home/banner_102296.gif" WIDTH=463 HEIGHT=90 ALT="Welcome to Apple"></TD> </TR>

http://www4.apple.com/home/elements/spacer2.gif




http://www5.apple.com/cgi/imagemap/mapserve.acgi$home/newsidebar.map




http://www4.apple.com/home/elements/sidebar.gif

• 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

box model paraLAYOUTS

TABLELESS.COM

• alinhar verticalmente

problemas

Conteudo

}

?.box {

vertical-align: middle;

• alinhar verticalmente

problemas

Conteudo

.box {

vertical-align: middle;

}

display: table-cell;

• igualar altura de regioes

problemas

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 ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

<aside>

.box {

height: 200px;

}

aside, .box {

height: 100%;

float: left;

}


problemas


<aside>

.box {

height: 200px;

}

aside, .right {

height: 100%;

float: left;

}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ofelquys lotomania ipsumtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur.


problemas


<aside> .box {

height: 200px;

}

aside, .right {

height: 100%;

float: left;

}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ofelquys lotomania ipsumtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur.


problemas

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 ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non<aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ofelquys lotomania ipsumtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur.

.box {

height: 200px;

display: table-row;

}

aside, .right {

height: 100%;

float: left;

display: table-cell;

}

tabletable-captiontable-celltable-columntable-column-grouptable-footer-grouptable-header-grouptable-rowtable-row-group

tabelas...

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>

verdade seja dita

20132013

O GOOGLE JA FEZ ATE UM MEDIDOR DE KI

verdade seja dita

20132013

E AINDA NAO SUPERAMOS AS TABELAS

gridO DEPOIS

• 2012 (draft W3C)

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


LOOPLorem ipsum

Dolor sit amet


Sed do eiusmod

bla bla

footer

flexivelfixo


LOOPLorem ipsum

Dolor sit amet


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-definition-columns: auto auto;

1 2

display: grid;

css

grid-definition-rows: auto auto auto;

1 2

3 4

5 6


display: grid;

css

1 2

3 4

5 6


AREA DA TELA

css

1 2

3 4

5 6

grid-definition-columns: auto 1fr;

css

1 2

3 4

5 6

grid-definition-columns: 1fr 1fr;

css

1 2

3 4

5 6

grid-definition-columns: 2fr 1fr;

css

content

grid-definition-columns:

auto minmax(min-content, 1fr);

1 2

3 4

5 6

css

content1

3 4

5 6

RESIZE



css

content1

3 4

5 6

RESIZEMAIS



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

html

<div class="reg5">c5</div>





• sem blocos para linha/coluna


1 2

3 4

5 6


</div>

html

• a ordem nao importa

1 2

3 4

5 6


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

mão na massa...

TEMPLATES

grid-template

header

aside content

footer

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

grid-template

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

.reg1 { grid-area: header }

.reg2 { grid-area: aside }

.reg3 { grid-area: content }



.reg6 { grid-area: footer }

templates responsivos

header

menu content aside

footer


header

menu

content

footeraside


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

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;

}

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ção200px 400px 200px

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

mix com media queries

header

main

footer

aside1 aside2

header

main

footer

aside2

aside1

mix com media queries

não é só isso

• respeita media-queries

• respeita max-width, min-width, ...

• inline ou em block

centralizar elementos

.a

.container {

display: flex;

}

.container

.a {

margin: auto;

}

centralizar elementos

.a

.container

.container {

display: flex;

}

.a {

margin: auto;

}

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

conceitos importantes

•named flows

•regions

html

<div class=”content”> ... </div>

<div class=”region region-1”></div>

<img src=”” />




css

.content {

flow-into: lorem-ipsum;

}

.region {

flow-from: lorem-ipsum;

}

@region

@region .region-3 {

p {

color: #BADA55;

}

}

@region .region-4 {

p {

color: red;

}

}

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

regions

layouts complexos

exclusionsO DEPOIS

a tirania do retângulo

ELEMENTOS DE BLOCO SAO QUADRADOS


border-radius?


border-radius?

• molda apenas estilo

• nao molda conteudo

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

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

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

-100px

50%

layouts complexos

obrigado!@LOOPINFINITO

LOOPINFINITO.COM.BR

css layout: o ontem, o hoje e o depois

Software

width border

left e right

ut enim ad minim veniam

width width x height

width e maxwidth

duis aute irure dolor

right boxsizing

height e maxheight