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