$30 off During Our Annual Pro Sale. View Details »

CSS Layout: O ontem, o hoje e o depois

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.

Loop Infinito

June 15, 2013
Tweet

More Decks by Loop Infinito

Other Decks in Programming

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