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

Workshop: Dominando CSS Layouts na prática com ...

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.

Simone Amorim

June 22, 2017
Tweet

More Decks by Simone Amorim

Other Decks in Technology

Transcript

  1. 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
  2. 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/
  3. GRID TRACK É o termo genérico para o espaço entre

    duas grid lines, verticais ou horizontais.
  4. GRID CELLS Também conhecida como grid item. É o espaçamento

    entre duas line grids verticais e duas horizontais.
  5. 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;
  6. .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
  7. .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
  8. .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;}
  9. 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
  10. QUER SABER MAIS github.com/simoneas02/awesome-grid-layout A curated list of CSS Grid

    Layout Module or only Css Grid もっと知りたいです
  11. 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