Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS {Grid} Layout: It's Evolution Baby

CSS {Grid} Layout: It's Evolution Baby

Diogo Moretti

May 20, 2017
Tweet

More Decks by Diogo Moretti

Other Decks in Technology

Transcript

  1. Quem? •Front-end @ Chaordic •Org. Front in Floripa •Fundador do

    FloripaJS •OSS & Community Lover •Fã do Pearl Jam \m/ diogomoretti diogomoretti_
  2. 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.
  3. 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
  4. 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
  5. 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…
  6. 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 ¯\_(ツ)_/¯
  7. 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 ¯\_(ツ)_/¯
  8. 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 ¯\_(ツ)_/¯
  9. 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
  10. 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>
  11. 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 e um código manutenível
  12. 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
  13. 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/
  14. 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+) – 98% https://www.w3.org/TR/css-flexbox-1/
  15. 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/
  16. Lines & Sizes 200px 1fr 200px 300px 500px Line 1

    Line 2 Line 3 Line 1 Line 2 Line 3 Line 4
  17. <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> Grid Area
  18. .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
  19. .container { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: 200px 1fr

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

    “header" “content" "sidebar" "footer" } Responsive @media (max-width: 580px) { }
  21. 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…