Montando layouts em um mini game

Vamos entrar em um jogo divertido, reviveremos o passado desde as tabelas até um futuro, que na verdade já é o presente chamado CSS Grid Layout. Em cada jogada você vai entender que CSS Grid é uma realidade que vai revolucionar a forma como você desenvolve Layouts.O poder estará em suas mãos, e é claro que você não vai querer ficar pra trás não é mesmo? Let's go.

Transcript

1. CSS Grid Layouts Montando layouts em um mini game chamado Browser By Simone Amorim
2. CSS Grid em produção!!! https://cssgrid.design/
3. Simone Amorim @samorim02(A Dama do CSS) @simoneas02 simoneas02.github.io Mother, Women Who Code, Front-end Developer and CSS Evangelist I love running and bike riding.
4. CSS Layouts ontem? O que fez a cabeça da moçada <table> <td></td> </table> .box { display: inline-block; } .box { float: left; } .container { display: flex; }
5. Biblioteca Framework Bootstrap ? ? ? ? ? ? ? ? ? ? ? ? ?
6. 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/
7. Parcial / prefixo -ms Suportado Março 2017 caniuse.com/#feat=css-grid Quando essa parada começou? 2 ? 4 3 1 2012!!!
8. Flexbox x Grid Layout?
9. FlexBox? Layouts unidimensionais w3.org/TR/css-flexbox-1/
10. Grid Layout? w3.org/TR/css3-grid-layout/ Layouts bidimensionais
11. Terminologia
12. Grid Lines As linhas que dividem o grid. 1 3 4 2 3 2 1
13. Grid Track É o termo genérico para o espaço entre duas grid lines adjacente, verticais ou horizontais.
14. Grid Cells Também conhecida como grid item. É o espaçamento entre duas grids lines verticais e duas horizontais.
15. Grid Area Um ou mais grid items (grid cells)
16. Manda code
17. Use o Firefox Nightly
18. Definindo um Grid
19. .container { display: grid; } .container { display: inline-grid; }
20. Line-base placement
21. .container { … } grid-template-columns: 50px 100px 200px; grid-template-columns: 50px 20% auto; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 200px 300px; grid-template-columns: 1fr 2fr 3fr;
22. Grid Gap
23. .container { … } grid-row-gap: 20px; grid-column-gap: 50px; grid-gap: 30px 60px; grid-gap: 20px; /* Shorthands */
24. Line-base positioning
25. Css3 .A { } grid-column-start: 1; grid-column-end: 3; .A { } grid-column: 1 / 3; grid-column: span 2; /* Shorthands */ grid-column: 1 / -1; grid-row: span 3;
26. .container { … } grid-template-rows: repeat(2, 10%); grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, minmax( 250px, 1fr )); repeat() minmax()
27. Area naming
28. .header {grid-area: header;} .content {grid-area: content;} .footer {grid-area: footer;} .container { … } grid-template-areas: “header header header” “aside main main” “aside content content”; “footer footer footer”; .aside {grid-area: aside;} .main {grid-area: main;}
29. Responsive Web Design
30. @media (max-width: 800px) { } .container { grid-template-areas: “aside header header” “aside main main” “aside main main” “content footer footer”; } @media (max-width: 600px) { } .container { grid-template-areas: “header header” “aside main” “content main” “footer footer”; }
31. Not Media Queries??
32. Planeje antes!!
33. HTML básico
34. Definindo o Grid
35. Tornando responsivo
36. Muito, tipo muito Mais
37. Como você quer montar layouts ao longo da vida?
38. Com Grid Layout
39. Sem Grid Layout
40. Quer Saber mais? gridbyexample.com/ css-tricks.com/snippets/css/complete-guide-grid/ Grid by Example - Rachel Andrew Complete guide - CSS Tricks
41. bit.ly/aprendendo-grid-layout
42. github.com/simoneas02/awesome-grid-layout
43. Leitura obrigatória
44. Tarefa de casa
45. Não deixe o medo de jogar impedir que você jogue! by Rafael Amorim “
46. Vem trabalhar conosco DESENVOLVE
47. Obrigada! @samorim02 (A Dama do CSS) @simoneas02 simoneas02.github.io