Tweet
Tweet

Slide 1

Slide 1 text

Desenvolvendo Interfaces “Total-Flex” Daniel Filho daniel!lho.info

Slide 2

Slide 2 text

@danielfilho

Slide 3

Slide 3 text

ig.com.br front-end developer

Slide 4

Slide 4 text

zofe.com.br co-host

Slide 5

Slide 5 text

makeyou.com core-team front-end engineer

Slide 6

Slide 6 text

danielfilho.github.com eternal apprentice

Slide 7

Slide 7 text

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Website Logo

Menu link
Menu link
Menu link

Page heading

Here's a two column layout with header and footer

The second table row contains the menu and the content column.

The third table row creates the footer.

Copyright ©

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Website Logo

  • Menu link
  • Menu link
  • Menu link

Page heading

Here's a two column layout with header and footer

The second table row contains the menu and the content column.

The third table row creates the footer.

Copyright ©

Slide 14

Slide 14 text

+semantic

Slide 15

Slide 15 text

Website Logo

  • Menu link
  • Menu link
  • Menu link

Page heading

Here's a two column layout with header and footer

The second table row contains the menu and the content column.

The third table row creates the footer.

Copyright ©

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

div{ display: table-cell; } div{ display: table-row; }

Slide 18

Slide 18 text

6 : Math.floor( Math.pow(2, 2.59) );

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Vamos falar de coisa boa?

Slide 24

Slide 24 text

CSS

Slide 25

Slide 25 text

Flexible Box Layout Module http://www.w3.org/TR/css3-flexbox/

Slide 26

Slide 26 text

Flexbox

Slide 27

Slide 27 text

-webkit-flex; -moz-flex; -ms-flex; -o-flex; display: flex;

Slide 28

Slide 28 text

-webkit-justify-content: {...}; -moz-justify-content: {...}; -ms-justify-content: {...}; -o-justify-content: {...}; justify-content: {...};

Slide 29

Slide 29 text

-webkit-align-items: {...}; -moz-align-items: {...}; -ms-align-items: {...}; -o-align-items: {...}; align-items: {...};

Slide 30

Slide 30 text

code demo 1: alignment

Slide 31

Slide 31 text

code demo 2: sorting and orientation

Slide 32

Slide 32 text

code demo 3: flexibility

Slide 33

Slide 33 text

simurai.com

Slide 34

Slide 34 text

code demo 1: website vs webapp

Slide 35

Slide 35 text

code demo 2: header

Slide 36

Slide 36 text

code demo 3: e-mail webapp

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

danielfilho.info/ /about-me /g /+ /@ /sd /in