Workshop: Dominando CSS Layouts na prática com Grid Layout

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

CSS GRID LAYOUT グリッドレイアウト

Slide 3

Slide 3 text

Mother, WWcode Leader, Organizer of FEMUGPE, Front-End Developer and CSS Evangelist <3 I love running and ride a bike! @samorim02 @simoneas02 simoneas02.github.io

Slide 4

Slide 4 text

CSS LAYOUTS ONTEM 昨日のCSSレイアウト

Slide 5

Slide 5 text

Table

Slide 6

Slide 6 text

Table .box { display: inline-block; } inline

Slide 7

Slide 7 text

Table inline .box { float: left; } Float

Slide 8

Slide 8 text

Table inline Float .container { display: flex; } Flex

Slide 9

Slide 9 text

Grid Layout?

Slide 10

Slide 10 text

Biblioteca ou framework?

Slide 11

Slide 11 text

Um modulo CSS3 que define um grid otimizado para interfaces CSS GRID LAYOUT CSS Grid Layout Module Level 1 w3.org/TR/css3-grid-layout/

Slide 12

Slide 12 text

Grid Layout x Flexbox

Slide 13

Slide 13 text

FLEXBOX Layouts unidimensionais w3.org/TR/css-flexbox-1/

Slide 14

Slide 14 text

GRID LAYOUT w3.org/TR/css3-grid-layout/ Layouts bidimensionais

Slide 15

Slide 15 text

TERMINOLOGiA 用語

Slide 16

Slide 16 text

GRID LINES As linhas que dividem o grid.

Slide 17

Slide 17 text

GRID TRACK É o termo genérico para o espaço entre duas grid lines, verticais ou horizontais.

Slide 18

Slide 18 text

GRID CELLS Também conhecida como grid item. É o espaçamento entre duas line grids verticais e duas horizontais.

Slide 19

Slide 19 text

GRID AREA Um ou mais grid items (grid cells)

Slide 20

Slide 20 text

CODE コード bit.ly/css-grid-layouts

Slide 21

Slide 21 text

DEFININDO UM GRID GRIDの定義 bit.ly/01-definindo-grid

Slide 22

Slide 22 text

.grid-container { display: grid; } .grid- container { display: inline-grid; }

Slide 23

Slide 23 text

LINE-BASE PLACEMENT ラインベース配置 bit.ly/02-placement

Slide 24

Slide 24 text

A B C D E F 1 column 2 column 3 column 2 row 1 row 3 row .grid-container { display: grid; } grid-template-rows: 100px 100px; grid-template-columns: 120px 120px 120px; 100px;

Slide 25

Slide 25 text

LINE-BASE POSITIONING ラインベース位置決め bit.ly/03-position

Slide 26

Slide 26 text

.a { } grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; .f { } grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; B C D A E F

Slide 27

Slide 27 text

SHORTHANDS ショーランズ bit.ly/04-position-shorthands

Slide 28

Slide 28 text

.a { } grid-column: 1 / 2; grid-row: 1 / 2; .a { } grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; .a { } grid-area: 1 / 1 / 2 / 2; B C D A E F

Slide 29

Slide 29 text

GRID GAP グリッドギャップ bit.ly/05-grid-gap

Slide 30

Slide 30 text

… … grid-row-gap: 10px; grid-column-gap: 10px; … … grid-gap: 10px;

Slide 31

Slide 31 text

AREA NAMING エリア名 bit.ly/06-area-naming

Slide 32

Slide 32 text

.a {grid-area: header;} .b {grid-area: aside;} .c {grid-area: main;} .d {grid-area: footer;} .container { display: grid; grid-template-rows: auto; grid-template-columns: auto; grid-template-areas: “header header header” “aside main main” “aside content content” “footer footer footer”; } main header content aside footer .e {grid-area: content;}

Slide 33

Slide 33 text

RESPONSIVE WEB DESIGN レスポンシブウェブデザイン bit.ly/06-area-naming

Slide 34

Slide 34 text

main header content aside footer @media screen and (max-width: 666px) { } … grid-template-areas: “header header header” “aside main main” “aside content content” “footer footer footer”; … .container { grid-template-areas: “aside header header” “aside main main” “aside main main” “content footer footer”; } main header content aside footer

Slide 35

Slide 35 text

Hands On - YouTube Layout YouTubeのレイアウト - オンハンズ github.com/simoneas02/youtube-css-grid

Slide 36

Slide 36 text

MAIS もっと

Slide 37

Slide 37 text

SUPORTE Parcial / prefixo -ms Soportado http://caniuse.com/#feat=css-grid

Slide 38

Slide 38 text

QUER SABER MAIS github.com/simoneas02/awesome-grid-layout A curated list of CSS Grid Layout Module or only Css Grid もっと知りたいです

Slide 39

Slide 39 text

https://codepen.io/simoneas02/post/grid-layout

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Não importa ser Front-end, Desiger, Back-end.. O importante é amar o que você faz! Dinheiro e reconhecimento são apenas uma consequência” by Bernard de Luna

Slide 42

Slide 42 text

@samorim02 @simoneas02 simoneas02.github.io ありがとうございました