CSS {Grid} Layout (Front in BH 2k17)

37929aa3d175e16abb209709b9e1d093?s=47 Diogo Moretti
September 25, 2017

CSS {Grid} Layout (Front in BH 2k17)

37929aa3d175e16abb209709b9e1d093?s=128

Diogo Moretti

September 25, 2017
Tweet

Transcript

  1. CSS {GRID} LAYOUT It’s Evolution Baby

  2. #2 VEZ EM BH =]

  3. #1 - Mineirão - 20.11.2015

  4. Quem? •OSS & Community Lover •Front in Floripa •FloripaJS •Fã

    do Pearl Jam \m/ diogomoretti diogomoretti_
  5. Roadmap Table Box Model/Tableless/Grids Flexbox Grid Layout

  6. Afinal, o que é CSS Layout? CSS Layout é o

    uso de CSS (!) para se estruturar uma página web. O termo apareceu com o CSS 1.0 e 2.1 para substituir as famosas tabelas na criação de layouts. Hoje é muito usado pelo W3C para nomear novas especificações.
  7. TABLE

  8. História das tabelas •Surgiu em 1995 com o HTML 3.0

    •Ganhou força (ou seja, mais atributos) juntamente com o HTML 3.2 •Ao contrário do que todo mundo pensa, as tabelas nasceram para tabular dados e TAMBÉM PARA CRIAR LAYOUTS! https://www.w3.org/TR/REC-html32#table
  9. Problemas das 'tables' •Estilo e marcação misturados (cellpadding, cellspacing, valign,

    colspan, rowspan…) •Render não-incremental •Acessibilidade •Código de difícil manutenção e leitura https://en.wikipedia.org/wiki/Incremental_rendering
  10. BOX MODEL

  11. História do Box Model •Surgiu em 1996 com CSS 1.0

    •Conceito do CSS (estilo | marcação) •Aparição de elementos de bloco (<div>, <h1>, <p>) •Propriedades como margin, padding, width, height, display, float, border, background…
  12. Box Model – CSS 2.1 •Foco na estruturação de layouts

    •Propriedades surgiram como position, max-* e min-* •Valores com top, left, bottom, right •Usamos até hoje ¯\_(ツ)_/¯
  13. Tableless •Movimento ~2002 •Proposta de deixar TABLE para tabular dados

    e BOX MODEL para a criação de layouts •Sites surgiram para apoiar a causa: CSS Zen Garden, Tableless, Maujor… •Gostamos até hoje ¯\_(ツ)_/¯
  14. Box Model CSS 3 •Box Sizing content padding border margin

  15. Box Model CSS 3 •Box Sizing content padding border margin

    box-sizing: border-box;
  16. http://reference.sitepoint.com/css/ie5boxmodel

  17. Problemas do Box Model •Alinhar objetos verticalmente •Posicionar divs lado-a-lado

    •Se for usar float, tem que usar clearfixes •Uma div acompanhando a altura da outra •…e muito mais (muito mesmo) •Ahh, problemas que temos até hoje ¯\_(ツ)_/¯
  18. Parece evoluir…

  19. …mas a gente não conseguia fazer isso direito: <div> <div>

    <div>
  20. …até hoje!

  21. São apenas divs lado-a-lado

  22. GRID SYSTEM

  23. Grids •Nasceu para resolver problemas ao criar um sistema de

    colunas •Começou em 2007 com o Blueprint mas seu "boom" foi em 2009 com o 960.gs •É uma abstração do Box Model, porque por trás é CSS 2.1 cheio de gambiarra para funcionar
  24. Grids •Isso agora é possível como MÁGICA! 1 2 3

    <div class=“container"> <div class=“span-4”>1</div> <div class=“span-4”>2</div> <div class=“span-4”>3</div> </div>
  25. Aí em 2011…

  26. <div class="col-md-5 col-sm-5 col-xs-12"> <div class="col-md-7 col-sm-7 col-xs-7"> Aí a

    web…
  27. Isso fazia sentido de 2007~2011 com CSS puro! Mas ai…

  28. Isso em 2017 é inadmissível

  29. "Grids não-semânticos só fazem sentido com CSS Puro" Moretti, Diogo

    – 2013
  30. Grids Semânticos •Se você usa pré-processador, use grid semântico •Bootstrap

    e Foundation já possuem versões de seus grids de forma semântica (Ex.: SASS) •Melhora a leitura e sua página não é desenhada pelo html, e sim pelo CSS •Afinal, não é isso que buscamos? Semântica, separação de função e um código manutenível
  31. None
  32. CSS LAYOUT SPECS CSS Grid Layout Module Level 1 Especificação

    Atual Status CSS Flexible Box Layout Module Level 1 2016 Candidato a recomendação CSS Grid Layout Module Level 1 2017 Candidato a recomendação CSS Template Layout Module 2015 Rascunho CSS Multi-Column Layout Module 2011 Candidato a recomendação
  33. FLEXBOX

  34. Afinal, o que é Flexbox? A principal ideia é dar

    ao “container" (pai) a habilidade de mudar o tamanho e direção dos filhos, afim de preencher os espaços e evitar o overflow. https://www.w3.org/TR/css-flexbox-1/
  35. Features do Flexbox •Resolve quase todos os problemas do Box

    Model tradicional •Criado para layout e pequenas partes da APP •Não possui float, overflow… •Força o uso semântico de HTML e CSS •Ótimo suporte (IE10+) – 97% https://www.w3.org/TR/css-flexbox-1/
  36. Estrutura para os exemplos <div class="container"> <div class="item">1</div> <div class="item">2</div>

    <div class="item">3</div> </div> flex container flex items
  37. Sem Flexbox 1 2 3

  38. Com Flexbox .container { display: flex; } 1 2 3

  39. Centralizar com Flexbox .item { margin: auto; } .container {

    display: flex; }
  40. CSS GRID LAYOUT

  41. CSS Grid Layout? A ideia é dividir sua página em

    linhas e colunas e permitir posicionar elementos nesses “slots" criados. Também é possível trocar a posição dos elementos usando apenas CSS. https://www.w3.org/TR/css-grid-1/
  42. Em outras palavras…

  43. Você vai “fatiar" sua página e depois encaixar os “macro"

    blocos
  44. Suporte 10+ 52+ 57+ 10.1+ 44+ http://caniuse.com/#feat=css-grid Todos os principais

    browsers ~70%
  45. DISCLAIMER

  46. Terminologia <div class="container"> <div class="header"></div> <div class="content"></div> <div class=“sidebar"></div> <div

    class="footer"></div> </div> Grid container Grid items
  47. Sintaxe .container { display: grid; }

  48. Exemplo 1 .container { display: grid; grid-template-columns: 1fr 300px; grid-template-rows:

    200px 500px 200px; } WTF!???
  49. Lines & Sizes 200px 1fr 200px 300px 500px Line 1

    Line 2 Line 3 Line 1 Line 2 Line 3 Line 4
  50. .header { background: red; grid-column-start: 1; grid-column-end: 3; grid-row-start: 1;

    grid-row-end: 2; } Grid Column & Grid Row
  51. .header { background: red; grid-column: 1 / 3; grid-row: 1

    / 2; } Grid Column & Grid Row
  52. .header Exemplo 1: Header

  53. .sidebar { background: yellow; grid-column: 2 / 3; grid-row: 2

    / 4; } Exemplo 1: Sidebar
  54. .header Exemplo 1: Sidebar .sidebar

  55. Exemplo 1: Final

  56. Ahh, então me dá um exemplo prático

  57. https://dribbble.com/shots/1573896-Warehouse

  58. None
  59. header menu tea tea-feat rooms shake-feat shake

  60. <div class="container"> <div class="header"></div> <div class="menu"></div> <div class="tea"></div> <div class="tea-feat"></div>

    <div class="rooms"></div> <div class="shake-feat"></div> <div class="shake"></div> </div> Estrutura
  61. Putz, agora vou ter que decorar onde começa e termina

    cada bloco…
  62. .container { display: grid; grid-template-columns: 350px 1fr 350px; grid-template-rows: 600px

    200px 200px 200px; grid-template-areas: "header header menu" "tea tea-feat tea-feat" "rooms rooms rooms" "shake shake-feat shake-feat” } Grid Area
  63. .header { grid-area: header; background: red; } Grid Area

  64. Grid Area .header

  65. None
  66. Tá, e o responsivo como é que fica?

  67. Exemplo 1: Responsive

  68. .container { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: 200px 1fr

    200px; grid-template-areas: “header header" "content sidebar" "footer footer" } Exemplo 1: Responsive
  69. .container { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; grid-template-areas:

    “header" “content" "sidebar" "footer" } @media (max-width: 580px) { } Exemplo 1: Responsive
  70. Exemplo 1: Responsive

  71. Beleza, e se eu colocar um “intruso"?

  72. Terminologia <div class="container"> <div class="header"></div> <div class=“content"></div> <div class=“intruso"></div> <div

    class=“sidebar"></div> <div class="footer"></div> </div> <div class=“intruso"></div>
  73. Grid Layout X Flexbox

  74. None
  75. Grid Layout & Flexbox Cômodos da casa Disposição dos móveis

  76. O que não vimos •Alinhamento do container (justify-items, align- items,

    justify-content, align-content…) e também dos “items" (justify-self, align-self…) •Subgrid e inline-grid •Propriedades novas como grid-auto-* •Valores novos como span, auto-fill, minmax()… •E outras aplicações…
  77. Resources http://jensimmons.com/post/feb-27-2017/learn-css-grid http://gridbyexample.com https://css-tricks.com/snippets/css/complete-guide-grid http://cssgridgarden.com https://github.com/simoneas02/awesome-grid-layout http://www.griddy.io

  78. Quem Seguir? @jensimmons @Una @rachelandrew @chriscoyier @meyerweb

  79. Por um mundo com mais desenvolvedores… …que não quebrem a

    web!
  80. THANKS! diogo.nu