CSS Layout: O ontem, o hoje e o depois

Partindo do ontem com layouts em tabelas e passando pelo hoje com o box model, iremos explorar as limitações dessas abordagens para entender o que as novas técnicas do depois – flexbox, grids, regions e exclusions – vêm a solucionar.

Transcript

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

   View Slide

2. @CAIO_GONDIM @ALMIRFILHO
   

   View Slide

3. GLOBO.COM
   

   View Slide

4. LOOPINFINITO.COM.BR
   

   View Slide

5. tabelas
   O ONTEM
   

   View Slide

6. • 1990
   html 1.0
   • estrutura de documento
   • layout com
   

   View Slide

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

8. primeiro site ever
   

   View Slide

9. • 1993
   html 2.0
   •
   • padrao IETF
   

   View Slide

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

    View Slide

11. • 1997
    html 3.2
    •
    •nasce o web designer
    

    View Slide

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

13. yahoo!
    

    View Slide

14. apple.com
    

    View Slide

15. bol.com.br
    

    View Slide

16. uol.com.br
    

    View Slide

17. cade.com.br
    

    View Slide

18. amazon.com
    

    View Slide

19. globo.com
    

    View Slide

20. globo.com
    

    View Slide

21. codigo
    
    
    
    
    
    
    
    WIDTH=128
    HEIGHT=1
    ALT="">
    
    
    
    WIDTH=125 HEIGHT=262
    BORDER=0
    ALT="Navigation Graphic - See Below"
    ISMAP
    USEMAP="#newsidebar">
    

    View Slide

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

    View Slide

23. box model
    O HOJE
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

30. 2002
    TABLELESS
    

    View Slide

31. tabelas para
    DADOS TABULARES
    box model para
    LAYOUTS
    

    View Slide

32. TABLELESS.COM
    

    View Slide

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

    View Slide

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

    View Slide

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

36. • 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, .right {
    height: 100%;
    float: left;
    }
    Lorem ipsum dolor sit amet,
    consectetur adipisicing elit, sed do
    eiusmod ofelquys lotomania ipsum
    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.
    

    View Slide

37. • 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, .right {
    height: 100%;
    float: left;
    }
    Lorem ipsum dolor sit amet,
    consectetur adipisicing elit, sed do
    eiusmod ofelquys lotomania ipsum
    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.
    

    View Slide

38. • 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
    
    Lorem ipsum dolor sit amet,
    consectetur adipisicing elit, sed do
    eiusmod ofelquys lotomania ipsum
    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.
    .box {
    height: 200px;
    display: table-row;
    }
    aside, .right {
    height: 100%;
    float: left;
    display: table-cell;
    }
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

42. verdade seja dita
    2013
    2013
    E AINDA
    NAO SUPERAMOS
    AS TABELAS
    

    View Slide

43. grid
    O DEPOIS
    

    View Slide

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

    View Slide

45. assim como tabelas...
    LINHAS E
    COLUNAS
    

    View Slide

46. diferente de tabelas...
    ESTRUTURALMENTE
    INDEPENDENTE
    

    View Slide

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

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

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

50. View Slide

51. View Slide

52. sem
    position ?
    esqueca!
    resize?
    esqueca!
    

    View Slide

53. mão na massa...
    DEFININDO
    UM GRID
    

    View Slide

54. html
    
    

    View Slide

55. css
    display: grid;
    

    View Slide

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

    View Slide

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

    View Slide

58. css
    1 2
    3 4
    5 6
    grid-definition-columns: auto auto;
    AREA DA TELA
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

66. mão na massa...
    ASSOCIANDO
    CONTEUDO
    

    View Slide

67. 
    html
    1 2
    3 4
    5 6
    
    

    View Slide

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

    View Slide

69. html
    • a ordem nao importa
    1 2
    3 4
    5 6
    
    
    c5
    c1
    c2
    c3
    c4
    c6
    

    View Slide

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

    View Slide

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

    View Slide

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

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

74. mão na massa...
    TEMPLATES
    

    View Slide

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

    View Slide

76. 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 }
    .reg4 { grid-area: content }
    .reg5 { grid-area: content }
    .reg6 { grid-area: footer }
    

    View Slide

77. templates responsivos
    header
    menu content aside
    footer
    

    View Slide

78. templates responsivos
    header
    menu
    content
    footer
    aside
    

    View Slide

79. templates responsivos
    @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";
    }
    }
    

    View Slide

80. flexbox
    O DEPOIS
    

    View Slide

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

    View Slide

82. web site
    header
    content
    ads
    

    View Slide

83. ads
    content2
    footer
    

    View Slide

84. web app
    footer
    header
    side main
    

    View Slide

85. os x app store
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

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

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

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

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

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

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

98. 1
    flex-direction: row;
    2 3
    

    View Slide

99. 1
    flex-direction: column;
    2
    3
    

    View Slide

100. justify-content: flex-start;
     1 2 3
     

     View Slide

101. justify-content: flex-end;
     1 2 3
     

     View Slide

102. justify-content: center;
     1 2 3
     

     View Slide

103. justify-content: space-between;
     1 2 3
     

     View Slide

104. justify-content: space-around;
     1 2 3
     

     View Slide

105. align-items: flex-start;
     1 2 3
     

     View Slide

106. align-items: flex-end;
     1 2 3
     

     View Slide

107. align-items: center;
     1 2 3
     

     View Slide

108. align-items: stretch;
     1 2 3
     

     View Slide

109. order: N;
     1 2 3
     

     View Slide

110. order: N;
     3 2
     1
     

     View Slide

111. order: N;
     3 2
     1
     

     View Slide

112. mix com media queries
     header
     main
     footer
     aside1 aside2
     

     View Slide

113. header
     main
     footer
     aside2
     aside1
     mix com media queries
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

117. web app flexible
     

     View Slide

118. web app flexible
     

     View Slide

119. regions
     O DEPOIS
     

     View Slide

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

     View Slide

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

     View Slide

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

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

124. conceitos importantes
     •named flows
     •regions
     

     View Slide

125. html
     ...
     
     
     
     
     
     

     View Slide

126. html
     ...
     
     
     
     
     
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

131. regions
     

     View Slide

132. regions
     

     View Slide

133. layouts complexos
     

     View Slide

134. exclusions
     O DEPOIS
     

     View Slide

135. a tirania do retângulo
     ELEMENTOS DE
     BLOCO SAO
     QUADRADOS
     

     View Slide

136. a tirania do retângulo
     border-radius?
     

     View Slide

137. a tirania do retângulo
     border-radius?
     • molda apenas estilo
     • nao molda conteudo
     

     View Slide

138. shapes!
     shape-inside
     shape-outside
     

     View Slide

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

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

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

     View Slide

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

     View Slide

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

     View Slide

144. layouts complexos
     

     View Slide

145. layouts complexos
     

     View Slide

146. obrigado!
     @LOOPINFINITO
     LOOPINFINITO.COM.BR
     

     View Slide