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

Montando layouts em um mini game

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.

C66863aa3cc145cf7d5ff8e1c40a7db8?s=128

Simone Amorim

August 11, 2018
Tweet

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