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

Montando layouts em um mini game chamado Browser

Montando layouts em um mini game chamado Browser

Link livecode: https://github.com/simoneas02/livecode-frontInCampinas

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.

C66863aa3cc145cf7d5ff8e1c40a7db8?s=128

Simone Amorim

May 12, 2018
Tweet

Transcript

  1. CSS Grid Layouts Montando layouts em um mini game chamado

    Browser By Simone Amorim
  2. Simone Amorim @samorim02 @simoneas02 simoneas02.github.io

  3. Mother

  4. I love running And bike riding!

  5. WWCode Leader Nossa missão é inspirar mulheres a se destacarem

    na área de tecnologia!
  6. Organization FEMUGPE

  7. I’m Developer

  8. I’m CSS Evangelista

  9. 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; }
  10. Grid Layout?

  11. Biblioteca x framework?

  12. 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/
  13. Flexbox x Grid Layout?

  14. FlexBox? Layouts unidimensionais w3.org/TR/css-flexbox-1/

  15. Grid Layout? w3.org/TR/css3-grid-layout/ Layouts bidimensionais

  16. Terminologia

  17. Grid Lines As linhas que dividem o grid. 1 3

    4 2 3 2 1
  18. Grid Track É o termo genérico para o espaço entre

    duas grid lines adjacente, verticais ou horizontais.
  19. Grid Cells Também conhecida como grid item. É o espaçamento

    entre duas grids lines verticais e duas horizontais.
  20. Grid Area Um ou mais grid items (grid cells)

  21. Manda code

  22. Use o Firefox Nightly

  23. <div class=“container”> <div class=“a”>A</div> <div class=“b”>B</div> <div class=“c”>C</div> <div class=“d”>D</div>

    <div class=“e”>E</div> <div class=“f”>F</div> </div> HTML básico
  24. Definindo um Grid

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

  26. Line-base placement

  27. .container { display: grid; } grid-template-rows: 100px 100px; grid-template-columns: 120px

    120px 120px; 100px; A B C D E F 1 column 2 column 3 column 2 row 1 row 3 row grid-template: 120px 120px 120px / 120px 120px 120px;
  28. Grid Gap

  29. .container { … } grid-row-gap: 20px; grid-column-gap: 5px; A B

    C D E F 5px 20px grid-gap: 20px 10px; grid-gap: 20px; grid-gap: 0 10px; /* Shorthands */
  30. Line-base positioning

  31. .a { } grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end:

    2; .? { } grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; B C D A E F
  32. Shorthands Line-base positioning

  33. grid-column: 1 / 2; grid-row: 1 / 2; grid-column-start: 1;

    grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; grid-area: 1 / 1 / 2 / 2; B C D A E F .a { … } /* Shorthands */ grid-row: 1 / -1; grid-row: 1 / span 3;
  34. FR a nova unidade de medida

  35. .container { … } grid-template-rows: 100px; grid-template-columns: 1fr 1fr 1fr;

    .container { … } grid-template-rows: 100px; grid-template-columns: 2fr 1fr 1fr; A B C 1 + 1 + 1 = 3 1 1 1 2 + 1 + 1 = 4 A B C 2 1 1
  36. A nova função repeat!

  37. .container { … } grid-template-rows: repeat(2, 10%); grid-template-columns: repeat(4, 20%);

    D E F A B C 10% 10% 20% 20% 20%
  38. Area naming

  39. .a {grid-area: header;} .b {grid-area: aside;} .c {grid-area: main;} .d

    {grid-area: footer;} .container { … grid-template-areas: “header header header” “aside main main” “aside content content” “footer footer footer”; } main header content aside footer
  40. Responsive Web Design

  41. main header content aside footer @media (max-width: 600px) { }

    … 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
  42. Muito, tipo muito Mais

  43. Parcial / prefixo -ms Suportado caniuse.com/#feat=css-grid Qual o suporte?

  44. Como você quer montar layouts ao longo da vida?

  45. Com Grid Layout

  46. Sem Grid Layout

  47. Quer Saber mais? gridbyexample.com/ css-tricks.com/snippets/css/complete-guide-grid/ Grid by Example - Rachel

    Andrew Complete guide - CSS Tricks
  48. bit.ly/aprendendo-grid-layout

  49. github.com/simoneas02/awesome-grid-layout

  50. Leitura obrigatória

  51. Tem aquela frase: A gente nunca sabe a força que

    tem, quando a única alternativa é ser forte!!! by Yan Magalhães “
  52. Vem trabalhar conosco DESENVOLVE

  53. Big thanks!!!

  54. Obrigada! @samorim02 @simoneas02 simoneas02.github.io