Tweet
Tweet

Slide 1

Slide 1 text

CSS {GRID} LAYOUT It’s Evolution Baby

Slide 2

Slide 2 text

#2 VEZ EM BH =]

Slide 3

Slide 3 text

#1 - Mineirão - 20.11.2015

Slide 4

Slide 4 text

Quem? •OSS & Community Lover •Front in Floripa •FloripaJS •Fã do Pearl Jam \m/ diogomoretti diogomoretti_

Slide 5

Slide 5 text

Roadmap Table Box Model/Tableless/Grids Flexbox Grid Layout

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

TABLE

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

BOX MODEL

Slide 11

Slide 11 text

História do Box Model •Surgiu em 1996 com CSS 1.0 •Conceito do CSS (estilo | marcação) •Aparição de elementos de bloco (
,

,

) •Propriedades como margin, padding, width, height, display, float, border, background…

Slide 12

Slide 12 text

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 ¯\_(ツ)_/¯

Slide 13

Slide 13 text

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 ¯\_(ツ)_/¯

Slide 14

Slide 14 text

Box Model CSS 3 •Box Sizing content padding border margin

Slide 15

Slide 15 text

Box Model CSS 3 •Box Sizing content padding border margin box-sizing: border-box;

Slide 16

Slide 16 text

http://reference.sitepoint.com/css/ie5boxmodel

Slide 17

Slide 17 text

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 ¯\_(ツ)_/¯

Slide 18

Slide 18 text

Parece evoluir…

Slide 19

Slide 19 text

…mas a gente não conseguia fazer isso direito:

Slide 20

Slide 20 text

…até hoje!

Slide 21

Slide 21 text

São apenas divs lado-a-lado

Slide 22

Slide 22 text

GRID SYSTEM

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Grids •Isso agora é possível como MÁGICA! 1 2 3
1
2
3

Slide 25

Slide 25 text

Aí em 2011…

Slide 26

Slide 26 text

Aí a web…

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Isso em 2017 é inadmissível

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

FLEXBOX

Slide 34

Slide 34 text

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/

Slide 35

Slide 35 text

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/

Slide 36

Slide 36 text

Estrutura para os exemplos
1
2
3
flex container flex items

Slide 37

Slide 37 text

Sem Flexbox 1 2 3

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

CSS GRID LAYOUT

Slide 41

Slide 41 text

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/

Slide 42

Slide 42 text

Em outras palavras…

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

DISCLAIMER

Slide 46

Slide 46 text

Terminologia
Grid container Grid items

Slide 47

Slide 47 text

Sintaxe .container { display: grid; }

Slide 48

Slide 48 text

Exemplo 1 .container { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: 200px 500px 200px; } WTF!???

Slide 49

Slide 49 text

Lines & Sizes 200px 1fr 200px 300px 500px Line 1 Line 2 Line 3 Line 1 Line 2 Line 3 Line 4

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

.header Exemplo 1: Header

Slide 53

Slide 53 text

.sidebar { background: yellow; grid-column: 2 / 3; grid-row: 2 / 4; } Exemplo 1: Sidebar

Slide 54

Slide 54 text

.header Exemplo 1: Sidebar .sidebar

Slide 55

Slide 55 text

Exemplo 1: Final

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

header menu tea tea-feat rooms shake-feat shake

Slide 60

Slide 60 text

Estrutura

Slide 61

Slide 61 text

Putz, agora vou ter que decorar onde começa e termina cada bloco…

Slide 62

Slide 62 text

.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

Slide 63

Slide 63 text

.header { grid-area: header; background: red; } Grid Area

Slide 64

Slide 64 text

Grid Area .header

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

Tá, e o responsivo como é que fica?

Slide 67

Slide 67 text

Exemplo 1: Responsive

Slide 68

Slide 68 text

.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

Slide 69

Slide 69 text

.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

Slide 70

Slide 70 text

Exemplo 1: Responsive

Slide 71

Slide 71 text

Beleza, e se eu colocar um “intruso"?

Slide 72

Slide 72 text

Terminologia

Slide 73

Slide 73 text

Grid Layout X Flexbox

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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…

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

Por um mundo com mais desenvolvedores… …que não quebrem a web!

Slide 80

Slide 80 text

THANKS! diogo.nu