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

Um mini-workshop sobre como trabalhar e pensar no desenvolvimento de layout de forma moderna. Apresentando de forma prática os conceitos por trás da nova especificação de CSS Grid, aplicando esse conhecimento em um projetinho básico do zero, criando uma interface responsiva de maneira rápida e simples.

Transcript

2. CSS GRID LAYOUT グリッドレイアウト
3. 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
4. CSS LAYOUTS ONTEM 昨日のCSSレイアウト
5. <table> <td></td> </table> Table
6. Table .box { display: inline-block; } inline
7. Table inline .box { float: left; } Float
8. Table inline Float .container { display: flex; } Flex
9. Grid Layout?
10. Biblioteca ou framework?
11. 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/
12. Grid Layout x Flexbox
13. FLEXBOX Layouts unidimensionais w3.org/TR/css-flexbox-1/
14. GRID LAYOUT w3.org/TR/css3-grid-layout/ Layouts bidimensionais
15. TERMINOLOGiA 用語
16. GRID LINES As linhas que dividem o grid.
17. GRID TRACK É o termo genérico para o espaço entre duas grid lines, verticais ou horizontais.
18. GRID CELLS Também conhecida como grid item. É o espaçamento entre duas line grids verticais e duas horizontais.
19. GRID AREA Um ou mais grid items (grid cells)
20. CODE コード bit.ly/css-grid-layouts
21. DEFININDO UM GRID GRIDの定義 bit.ly/01-definindo-grid
22. .grid-container { display: grid; } .grid- container { display: inline-grid; }
23. LINE-BASE PLACEMENT ラインベース配置 bit.ly/02-placement
24. 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;
25. LINE-BASE POSITIONING ラインベース位置決め bit.ly/03-position
26. .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
27. SHORTHANDS ショーランズ bit.ly/04-position-shorthands
28. .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
29. GRID GAP グリッドギャップ bit.ly/05-grid-gap
30. … … grid-row-gap: 10px; grid-column-gap: 10px; … … grid-gap: 10px;
31. AREA NAMING エリア名 bit.ly/06-area-naming
32. .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;}
33. RESPONSIVE WEB DESIGN レスポンシブウェブデザイン bit.ly/06-area-naming
34. 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
35. Hands On - YouTube Layout YouTubeのレイアウト - オンハンズ github.com/simoneas02/youtube-css-grid
36. MAIS もっと
37. SUPORTE Parcial / prefixo -ms Soportado http://caniuse.com/#feat=css-grid
38. QUER SABER MAIS github.com/simoneas02/awesome-grid-layout A curated list of CSS Grid Layout Module or only Css Grid もっと知りたいです
39. https://codepen.io/simoneas02/post/grid-layout
41. 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
42. @samorim02 @simoneas02 simoneas02.github.io ありがとうございました